Le bufferSubData

Les "Buffer Objects" (appelés aussi VBO) contiennent les données pour le Vertex Shader

const canvas = document.querySelector('canvas');

On donne la taille d'affichage du canvas

canvas.style.width="500px";
canvas.style.height="200px";

On donne la taille du drawingBuffer. Combien de pixels le canvas va contenir.

// taille du drawingBuffer
//https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

canvas.width=5;
canvas.height=2;

const gl = canvas.getContext('webgl');

When you first create the WebGL context WebGL will set the viewport to match the size of the canvas Donc la ligne suivante n'est pas nécessaire ici.

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

const vertex = `
attribute vec2 a_position;
void main() {
  gl_Position = vec4(a_position, 0, 1);
  gl_PointSize = 1.0;
}`;

const fragment = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0, 1);
}`;

 
let prg = gl.createProgram();
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
gl.attachShader(prg, vertexShader);
gl.attachShader(prg, fragmentShader);
gl.linkProgram(prg);

gl.useProgram(prg);

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

pseudoCode : gl = { arrayBuffer: positionBuffer; } buffer = { positionBuffer: null; }

const positions = new Float32Array(6);

positions[0]=-1+7/5;
positions[1]=-1+1/2;

positions[2]=-1+1/5;
positions[3]=-1+3/2;

positions[4]=-1+9/5;
positions[5]=-1+3/2;


gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);

pseudoCode : gl = { arrayBuffer: positionBuffer; } buffer = { positionBuffer: [ positions[0] positions[1] positions[2] positions[3] positions[4] positions[5] ]; }

const subPositions = new Float32Array(2);
subPositions[0]= -1 + 3/5;
subPositions[1]= -1 + 1/2;
gl.bufferSubData(gl.ARRAY_BUFFER, 8, subPositions);

// subPositions est un Float32array de 2 éléments // chaque élément occupe 4 octets bufferSubData modifie une partie du buffer courant, à partir du 8e octets : gl.bufferSubData( gl.ARRAY_BUFFER, 8, <---- offset (en nombre d'octets) subPositions ); pseudoCode : gl = { arrayBuffer: positionBuffer; } buffer = { positionBuffer: [ positions[0] : byte0 byte1 byte2 byte3 positions[1] : byte4 byte5 byte6 byte7 positions[2] : byte8 byte9 byte10 byte11 << bufferSubData positions[3] : byte12 byte13 byte14 byte15 << bufferSubData positions[4] : byte16 byte17 byte18 byte19 ]; } Pour une indication précise de l'action de bufferSubData http://registry.khronos.org/OpenGL/specs/es/2.0/es_full_spec_2.0.pdf#nameddest=section-2.9 To modify some or all of the data contained in a buffer object’s data store, the client may use the command void BufferSubData( enum target, intptr offset, sizeiptr size, const void *data ); with target set to ARRAY_BUFFER. offset and size indicate the range of data in the buffer object that is to be replaced, in terms of basic machine units. data specifies a region of client memory size basic machine units in length, containing the data that replace the specified buffer range.

const positionAttributeLocation = gl.getAttribLocation(prg, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);



gl.vertexAttribPointer(
	positionAttributeLocation,
	2, // size
	// number of components per vertex attribute
    // ici c'est 2, parce que dans notre vertex on a : attribute vec2 a_position

	gl.FLOAT, //type,
	false, // normalize,
	0, //stride,
	0, // offset
);

gl.drawArrays(gl.POINTS, 0, 3);