le but est de comprendre l'élément gl_VertexID.
let lx=5;
let ly=1;
let canvas = document.createElement("canvas");
canvas.width=lx;
canvas.width=ly;
const gl = canvas.getContext('webgl2');
const ext = gl.getExtension("EXT_color_buffer_float");
gl.viewport(0,0,lx,ly);
const vs = `#version 300 es
out float glvertexid;
void main() {
float k = float(gl_VertexID);
float x= -1.0 + ( 2.0*k+1.0)/${lx}.0;
glvertexid=float(gl_VertexID);
gl_Position = vec4(x, 0, 0, 1);
gl_PointSize = 1.0;
}
`;
const fs = `#version 300 es
precision highp float;
in float glvertexid;
out vec4 outColor;
void main() {
outColor = vec4(glvertexid,glvertexid, glvertexid, glvertexid);
}
`;
function createShader(gl, type, src) {
const sh = gl.createShader(type);
gl.shaderSource(sh, src);
gl.compileShader(sh);
return sh;
}
const prg = gl.createProgram(gl);
gl.attachShader(prg, createShader(gl, gl.VERTEX_SHADER, vs));
gl.attachShader(prg, createShader(gl, gl.FRAGMENT_SHADER, fs));
gl.linkProgram(prg);
gl.useProgram(prg);
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, 0, gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
const targetTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, targetTexture);
{
const level = 0;
const internalFormat = gl.RGBA32F;
const border = 0;
const format = gl.RGBA;
const type = gl.FLOAT;
const data = null;
gl.texImage2D(
gl.TEXTURE_2D,
level,
internalFormat,
lx, ly,
border,
format,
type,
data
);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
}
// Create and bind the framebuffer
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
// attach the texture as the first color attachment
const attachmentPoint = gl.COLOR_ATTACHMENT0;
gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, 0);
gl.drawArrays(gl.POINTS, 0, lx);
let data = new Float32Array(4*lx*ly);
gl.readPixels(0, 0, lx, ly, gl.RGBA, gl.FLOAT, data);