subzey · July 17, 2019 13:36 · rjbudzynski · Mar 4, 2020
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 <head>
 	<title>Adding numbers with WebGL2 Transform Feedback</title>
 </head>
 <body>
 	<h1>Adding numbers with WebGL2 Transform Feedback.</h1>
 	<output></output>
 	<script src="webgl.js"></script>
 	<p>View <a href="webgl.js">the commented source</a>!</p>
 </body>
 </html>
diff --git a/webgl.js b/webgl.js
 // The typed arrays we will sum
 const inputJSArray1 = Uint32Array.of(2, 2, 12345678);
 const inputJSArray2 = Uint32Array.of(2, 40, 87654321);
 const VERTEX_COUNT = Math.min(inputJSArray1.length, inputJSArray2.length);

 // Create a <canvas> element. It should not even be attached to the #document, just exist
 const a = document.createElement('canvas');

 // Get a WebGL2 context. WebGL1 has no  transfrom feedback
 const gl = a.getContext('webgl2') || a.getContext('experimental-webgl2');

 // Do not render anything - skip the fragment shader entirely
 gl.enable(gl.RASTERIZER_DISCARD);


 // Create a GLSL program. It's a set of:
 // - vertex shader
 // - fragment shader (it's turned off, but is still needed)
 // - transfrom feedback
 const program = gl.createProgram();

 // Create a vertex shader
 const vShader = gl.createShader(gl.VERTEX_SHADER);
 gl.shaderSource(vShader, `#version 300 es

 	// Output parameter v_result (known as varying in WebGL1).
 	// Normally it would be passed to the fragment shader.
 	// flat means, there's no interpolation. There's no interpolation for integers anyway.
 	flat out uint v_result;

 	// Input paramenters
 	in uint a_input_1;
 	in uint a_input_2;

 	// This function is called for each vertex
 	void main() {
 		v_result = a_input_1 + a_input_2;
 	}
 `);
 gl.compileShader(vShader);
 // Log shader errors
 console.log('vShader', gl.getShaderInfoLog(vShader));
 gl.attachShader(program, vShader);


 // Create a vertex shader
 const fShader = gl.createShader(gl.FRAGMENT_SHADER);
 gl.shaderSource(fShader, `#version 300 es
 	// It won't be called anyway, write something valid here
 	void main() {}
 `);
 gl.compileShader(fShader);
 console.log('fShader', gl.getShaderInfoLog(fShader));
 gl.attachShader(program, fShader);

 // Attach v_result varying should be intercepted
 // and stored into the TRANSFROM_FEEDBACK buffer
 gl.transformFeedbackVaryings(program, ['v_result'], gl.INTERLEAVED_ATTRIBS);

 // Link program
 gl.linkProgram(program);
 console.log('program', gl.getProgramInfoLog(program));

 // Use program.
 // WebGL can use several programs for drawing, and we need to specify the active one.
 gl.useProgram(program);


 // Create and initialize buffers

 // Input buffer 1
 let inputBuffer1 = gl.createBuffer();
 // We need to place the data on that buffer.
 // You'd probably expect something like (buffer.setData), but no.
 // We have to make this buffer an active ARRAY_BUFFER...
 gl.bindBuffer(gl.ARRAY_BUFFER, inputBuffer1);
 // ...then write data into the active ARRAY_BUFFER.
 gl.bufferData(gl.ARRAY_BUFFER, inputJSArray1, gl.STATIC_DRAW);

 // Input buffer 2
 let inputBuffer2 = gl.createBuffer();
 // Same again for the second buffer.
 gl.bindBuffer(gl.ARRAY_BUFFER, inputBuffer2);
 gl.bufferData(gl.ARRAY_BUFFER, inputJSArray2, gl.STATIC_DRAW);

 // Output buffer
 let resultBuffer = gl.createBuffer();

 // Create a TransformFeedback object
 var transformFeedback = gl.createTransformFeedback();
 // Make it the active TRANSFORM_FEEDBACK
 gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);

 // Make resultBuffer the active TRANSFORM_FEEDBACK_BUFFER #0
 gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, resultBuffer);

 // Now we can set data to that buffer.
 // We actually don;t care about the exact contents of this buffer,
 // just make sure the length is 8 bytes (2 * Uint32)
 gl.bufferData(gl.TRANSFORM_FEEDBACK_BUFFER, VERTEX_COUNT * Uint32Array.BYTES_PER_ELEMENT, gl.STATIC_DRAW);

 // Now we have three buffers in the GPU memory:
 // inputBuffer1: 8 bytes of attr1 data
 // inputBuffer2: 8 bytes of attr2 data
 // outputBuffer: 8 bytes of something we don't care, probably zeroes

 // Attributes

 // Attribute a_input_1
 // Get the index that WegGL decided to assign to this attribute
 const input1AttribLocation = gl.getAttribLocation(program, 'a_input_1');
 // Debug print. Most probably, it will be 0
 console.log(input1AttribLocation);

 // We will specify the attribute as a pointer to a buffer
 gl.enableVertexAttribArray(input1AttribLocation);
 // But the buffer as an active one.
 gl.bindBuffer(gl.ARRAY_BUFFER, inputBuffer1);
 // On the buffer that is currently the active one..
 gl.vertexAttribIPointer(
 	input1AttribLocation, // the attribute with the index input1AttribLocation ...
 	1, // is the single value (not a vector)...
 	gl.UNSIGNED_INT, // of type Uint32...
 	0, // starting at the offset 0
 	0 // with the distance between consecutive values 0 (it means, "auto")
 );


 // Same for a_input_2
 const input2AttribLocation = gl.getAttribLocation(program, 'a_input_2');
 console.log(input2AttribLocation);
 gl.bindBuffer(gl.ARRAY_BUFFER, inputBuffer2);
 gl.enableVertexAttribArray(input2AttribLocation);
 gl.vertexAttribIPointer(
 	input2AttribLocation, // index
 	1, // size
 	gl.UNSIGNED_INT, // type
 	0, // stride
 	0 // offset
 );

 // Ready to draw!

 // Activate the transform feedback
 gl.beginTransformFeedback(gl.POINTS);
 // We don't need WebGL to use complex geometry to create triangles and stuff, just use points.
 // Each point is a vertex. So we have to "draw" VERTEX_COUNT points.
 gl.drawArrays(gl.POINTS, 0, VERTEX_COUNT);
 // Deactivate the transform feedback, so we can read the buffer contents back.
 gl.endTransformFeedback();

 // Read back

 const resultArray = new Uint32Array(VERTEX_COUNT);
 gl.getBufferSubData(
 	gl.TRANSFORM_FEEDBACK_BUFFER, // target
 	0, // srcByteOffset
 	resultArray, // dstData
 	0, // srcOffset?
 	VERTEX_COUNT // length?
 );

 // TA-DA!!
 document.querySelector('output').innerHTML = `
 	[${inputJSArray1.join(', ')}] <br>
 	+ <br>
 	[${inputJSArray2.join(', ')}] <br>
 	= <br>
 	[${resultArray.join(', ')}]
 `;
 // (hopefully)
	<!doctype html>
	<html>
	<head>
	<title>Adding numbers with WebGL2 Transform Feedback</title>
	</head>
	<body>
	<h1>Adding numbers with WebGL2 Transform Feedback.</h1>
	<output></output>
	<script src="webgl.js"></script>
	<p>View <a href="webgl.js">the commented source</a>!</p>
	</body>
	</html>
	// The typed arrays we will sum
	const inputJSArray1 = Uint32Array.of(2, 2, 12345678);
	const inputJSArray2 = Uint32Array.of(2, 40, 87654321);
	const VERTEX_COUNT = Math.min(inputJSArray1.length, inputJSArray2.length);

	// Create a <canvas> element. It should not even be attached to the #document, just exist
	const a = document.createElement('canvas');

	// Get a WebGL2 context. WebGL1 has no transfrom feedback
	const gl = a.getContext('webgl2') \|\| a.getContext('experimental-webgl2');

	// Do not render anything - skip the fragment shader entirely
	gl.enable(gl.RASTERIZER_DISCARD);


	// Create a GLSL program. It's a set of:
	// - vertex shader
	// - fragment shader (it's turned off, but is still needed)
	// - transfrom feedback
	const program = gl.createProgram();

	// Create a vertex shader
	const vShader = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(vShader, `#version 300 es

	// Output parameter v_result (known as varying in WebGL1).
	// Normally it would be passed to the fragment shader.
	// flat means, there's no interpolation. There's no interpolation for integers anyway.
	flat out uint v_result;

	// Input paramenters
	in uint a_input_1;
	in uint a_input_2;

	// This function is called for each vertex
	void main() {
	v_result = a_input_1 + a_input_2;
	}
	`);
	gl.compileShader(vShader);
	// Log shader errors
	console.log('vShader', gl.getShaderInfoLog(vShader));
	gl.attachShader(program, vShader);


	// Create a vertex shader
	const fShader = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(fShader, `#version 300 es
	// It won't be called anyway, write something valid here
	void main() {}
	`);
	gl.compileShader(fShader);
	console.log('fShader', gl.getShaderInfoLog(fShader));
	gl.attachShader(program, fShader);

	// Attach v_result varying should be intercepted
	// and stored into the TRANSFROM_FEEDBACK buffer
	gl.transformFeedbackVaryings(program, ['v_result'], gl.INTERLEAVED_ATTRIBS);

	// Link program
	gl.linkProgram(program);
	console.log('program', gl.getProgramInfoLog(program));

	// Use program.
	// WebGL can use several programs for drawing, and we need to specify the active one.
	gl.useProgram(program);


	// Create and initialize buffers

	// Input buffer 1
	let inputBuffer1 = gl.createBuffer();
	// We need to place the data on that buffer.
	// You'd probably expect something like (buffer.setData), but no.
	// We have to make this buffer an active ARRAY_BUFFER...
	gl.bindBuffer(gl.ARRAY_BUFFER, inputBuffer1);
	// ...then write data into the active ARRAY_BUFFER.
	gl.bufferData(gl.ARRAY_BUFFER, inputJSArray1, gl.STATIC_DRAW);

	// Input buffer 2
	let inputBuffer2 = gl.createBuffer();
	// Same again for the second buffer.
	gl.bindBuffer(gl.ARRAY_BUFFER, inputBuffer2);
	gl.bufferData(gl.ARRAY_BUFFER, inputJSArray2, gl.STATIC_DRAW);

	// Output buffer
	let resultBuffer = gl.createBuffer();

	// Create a TransformFeedback object
	var transformFeedback = gl.createTransformFeedback();
	// Make it the active TRANSFORM_FEEDBACK
	gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);

	// Make resultBuffer the active TRANSFORM_FEEDBACK_BUFFER #0
	gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, resultBuffer);

	// Now we can set data to that buffer.
	// We actually don;t care about the exact contents of this buffer,
	// just make sure the length is 8 bytes (2 * Uint32)
	gl.bufferData(gl.TRANSFORM_FEEDBACK_BUFFER, VERTEX_COUNT * Uint32Array.BYTES_PER_ELEMENT, gl.STATIC_DRAW);

	// Now we have three buffers in the GPU memory:
	// inputBuffer1: 8 bytes of attr1 data
	// inputBuffer2: 8 bytes of attr2 data
	// outputBuffer: 8 bytes of something we don't care, probably zeroes

	// Attributes

	// Attribute a_input_1
	// Get the index that WegGL decided to assign to this attribute
	const input1AttribLocation = gl.getAttribLocation(program, 'a_input_1');
	// Debug print. Most probably, it will be 0
	console.log(input1AttribLocation);

	// We will specify the attribute as a pointer to a buffer
	gl.enableVertexAttribArray(input1AttribLocation);
	// But the buffer as an active one.
	gl.bindBuffer(gl.ARRAY_BUFFER, inputBuffer1);
	// On the buffer that is currently the active one..
	gl.vertexAttribIPointer(
	input1AttribLocation, // the attribute with the index input1AttribLocation ...
	1, // is the single value (not a vector)...
	gl.UNSIGNED_INT, // of type Uint32...
	0, // starting at the offset 0
	0 // with the distance between consecutive values 0 (it means, "auto")
	);


	// Same for a_input_2
	const input2AttribLocation = gl.getAttribLocation(program, 'a_input_2');
	console.log(input2AttribLocation);
	gl.bindBuffer(gl.ARRAY_BUFFER, inputBuffer2);
	gl.enableVertexAttribArray(input2AttribLocation);
	gl.vertexAttribIPointer(
	input2AttribLocation, // index
	1, // size
	gl.UNSIGNED_INT, // type
	0, // stride
	0 // offset
	);

	// Ready to draw!

	// Activate the transform feedback
	gl.beginTransformFeedback(gl.POINTS);
	// We don't need WebGL to use complex geometry to create triangles and stuff, just use points.
	// Each point is a vertex. So we have to "draw" VERTEX_COUNT points.
	gl.drawArrays(gl.POINTS, 0, VERTEX_COUNT);
	// Deactivate the transform feedback, so we can read the buffer contents back.
	gl.endTransformFeedback();

	// Read back

	const resultArray = new Uint32Array(VERTEX_COUNT);
	gl.getBufferSubData(
	gl.TRANSFORM_FEEDBACK_BUFFER, // target
	0, // srcByteOffset
	resultArray, // dstData
	0, // srcOffset?
	VERTEX_COUNT // length?
	);

	// TA-DA!!
	document.querySelector('output').innerHTML = `
	[${inputJSArray1.join(', ')}] <br>
	+ <br>
	[${inputJSArray2.join(', ')}] <br>
	= <br>
	[${resultArray.join(', ')}]
	`;
	// (hopefully)