gpt2
This commit is contained in:
parent
a1a0fc49f2
commit
4de675fb59
140
index.html
140
index.html
@ -3,17 +3,141 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WebGL Plot</title>
|
||||
<title>WebGL Line Strip</title>
|
||||
<style>
|
||||
canvas {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
background-color: black;
|
||||
}
|
||||
canvas { width: 100%; height: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="glCanvas" width="700" height="700"></canvas>
|
||||
<script src="main.js"></script>
|
||||
<canvas id="glCanvas"></canvas>
|
||||
|
||||
<script>
|
||||
// Vertex Shader Source
|
||||
const vertexShaderSource = `
|
||||
attribute vec2 a_position;
|
||||
uniform vec2 u_resolution;
|
||||
|
||||
void main() {
|
||||
// Convert the position from pixels to clipspace
|
||||
vec2 zeroToOne = a_position / u_resolution;
|
||||
vec2 zeroToTwo = zeroToOne * 2.0;
|
||||
vec2 clipSpace = zeroToTwo - 1.0;
|
||||
|
||||
gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); // Flip Y axis
|
||||
}
|
||||
`;
|
||||
|
||||
// Fragment Shader Source
|
||||
const fragmentShaderSource = `
|
||||
precision mediump float;
|
||||
uniform vec4 u_color;
|
||||
void main() {
|
||||
gl_FragColor = u_color;
|
||||
}
|
||||
`;
|
||||
|
||||
function createShader(gl, type, source) {
|
||||
const shader = gl.createShader(type);
|
||||
gl.shaderSource(shader, source);
|
||||
gl.compileShader(shader);
|
||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||
console.error("Shader compile error:", gl.getShaderInfoLog(shader));
|
||||
gl.deleteShader(shader);
|
||||
return null;
|
||||
}
|
||||
return shader;
|
||||
}
|
||||
|
||||
function createProgram(gl, vertexShader, fragmentShader) {
|
||||
const program = gl.createProgram();
|
||||
gl.attachShader(program, vertexShader);
|
||||
gl.attachShader(program, fragmentShader);
|
||||
gl.linkProgram(program);
|
||||
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
||||
console.error("Program link error:", gl.getProgramInfoLog(program));
|
||||
return null;
|
||||
}
|
||||
return program;
|
||||
}
|
||||
|
||||
function main() {
|
||||
const canvas = document.getElementById("glCanvas");
|
||||
const gl = canvas.getContext("webgl");
|
||||
if (!gl) {
|
||||
console.error("WebGL not supported");
|
||||
return;
|
||||
}
|
||||
|
||||
// Resize canvas to full screen
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
// Create shaders
|
||||
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
|
||||
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
|
||||
|
||||
|
||||
// Create program
|
||||
const program = createProgram(gl, vertexShader, fragmentShader);
|
||||
|
||||
// Look up attributes and uniforms
|
||||
const positionLocation = gl.getAttribLocation(program, "a_position");
|
||||
const resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");
|
||||
const colorUniformLocation = gl.getUniformLocation(program, "u_color");
|
||||
|
||||
// Create buffer and bind
|
||||
const positionBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
|
||||
|
||||
// Create some points for the curve (You would populate this with your data)
|
||||
const points = [
|
||||
100, 150,
|
||||
200, 250,
|
||||
300, 50,
|
||||
400, 300
|
||||
];
|
||||
|
||||
// Send points to buffer
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);
|
||||
|
||||
// Resize the viewport to match canvas size
|
||||
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
|
||||
|
||||
// Use the program
|
||||
gl.useProgram(program);
|
||||
|
||||
// Set the resolution
|
||||
gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
|
||||
|
||||
// Set the color (white)
|
||||
gl.uniform4f(colorUniformLocation, 1, 1, 1, 1);
|
||||
|
||||
// Enable the position attribute
|
||||
gl.enableVertexAttribArray(positionLocation);
|
||||
|
||||
// Bind the position buffer
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
|
||||
|
||||
// Tell the attribute how to get data out of positionBuffer
|
||||
const size = 2; // 2 components per iteration (x, y)
|
||||
const type = gl.FLOAT; // the data is 32bit floats
|
||||
const normalize = false; // don't normalize the data
|
||||
const stride = 0; // move forward size * sizeof(type) each iteration
|
||||
const offset = 0; // start at the beginning of the buffer
|
||||
gl.vertexAttribPointer(positionLocation, size, type, normalize, stride, offset);
|
||||
|
||||
// Clear the canvas
|
||||
gl.clearColor(0, 0, 0, 0);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
// Draw the curve as a line strip
|
||||
const primitiveType = gl.LINE_STRIP;
|
||||
const offsetIndex = 0;
|
||||
const count = points.length / 2; // 2D points
|
||||
gl.drawArrays(primitiveType, offsetIndex, count);
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
7
main.js
7
main.js
@ -112,10 +112,13 @@ function display(gl) {
|
||||
|
||||
if (mode_affichage === HORIZONTAL) {
|
||||
for (let i = 0; i < nc; i++) {
|
||||
console.log(i);
|
||||
let haut = map(0, nc, i, 1.0, -1.0);
|
||||
let bas = map(0, nc, i + 1, 1.0, -1.0);
|
||||
if (type_dessin === LIGNE || type_dessin === LIGNE_AXES) {
|
||||
console.log("drawCurve");
|
||||
drawCurve(gl, i, -1.0, haut, 1.0, bas);
|
||||
console.log("drawCurve");
|
||||
} else if (type_dessin === HISTOGRAMME) {
|
||||
drawHistogram(gl, i, -1.0, haut, 1.0, bas);
|
||||
}
|
||||
@ -141,6 +144,10 @@ function main() {
|
||||
if (!gl) return;
|
||||
|
||||
loadFile(); // Load example data
|
||||
|
||||
console.log(courbe);
|
||||
console.log(nc);
|
||||
|
||||
display(gl); // Render the curves
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user