Untitled

<!DOCTYPE html>
<html>
    <script type="vertex" id="vs">
		attribute float vertexID;
		varying vec4 vColor;
		void main(void) {
		  gl_Position = vec4(0., 0., 0., 1.); // Failed on windows chrome/firefox, passed on firefox with disable-angle
		  // gl_Position = vec4(-1., -1., 0., 1.); // Failed on widnows chrome/firefox,  passed on firefox with disable-angle
		  // gl_Position = vec4(0.5, 0.5, 0., 1.); // Failed on widnows chrome/firefox,  passed on firefox with disable-angle
		  vColor = vec4(2., 22., 222., vertexID);
		}
    </script>
    <script type="fragment" id="fs">
		precision highp float;
		varying vec4 vColor;
		void main(void) {
		  gl_FragColor = vColor;
		}
    </script>
    <canvas id="webgl-canvas"></canvas>
    <script>
	/*
	Setup a frame buffer with 1X1 texture, and render N points to the same pixel position.
	Setup blenind to calculate max value in Red channel and number of points in Alpha channel.
	*/
    	const MAX_32_BIT_FLOAT = 3.402823466e38;
	const WIDTH = 1;
	const HEIGHT = 1;
	const POINT_COUNT = 10;
        const canvas = document.getElementById("webgl-canvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        const gl = canvas.getContext("webgl2");
	if (!gl || gl.getExtension('EXT_color_buffer_float') === null) {
		console.log('Not a WebGL2 context or EXT_color_buffer_float not supported, this test will fail');
	}
	const width = WIDTH;
	const height = HEIGHT;
	// set up Program
	const vsSource = document.getElementById("vs").text.trim();
	const fsSource = document.getElementById("fs").text.trim();
	const vs = gl.createShader(gl.VERTEX_SHADER);
	const fs = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(vs, vsSource);
	gl.compileShader(vs);
	if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
	    let i, lines;

	    console.error(gl.getShaderInfoLog(vs));
	    lines = vsSource.split("\n");
	    for (i = 0; i < lines.length; ++i) {
		console.error(`${i + 1}: ${lines[i]}`);
	    }
	}

	gl.shaderSource(fs, fsSource);
	gl.compileShader(fs);

	if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
	    let i, lines;

	    console.error(gl.getShaderInfoLog(fs));
	    lines = vsSource.split("\n");
	    for (i = 0; i < lines.length; ++i) {
		console.error(`${i + 1}: ${lines[i]}`);
	    }
	}


	const program = gl.createProgram();
	gl.attachShader(program, vs);
	gl.attachShader(program, fs);
	gl.linkProgram(program);
	gl.useProgram(program);

	// set up Framebuffer to render to 1X1 texture
	const framebuffer = gl.createFramebuffer();
	gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
	gl.activeTexture(gl.TEXTURE0);
	const colorTarget = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, colorTarget);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
	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);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, width, height, 0, gl.RGBA, gl.FLOAT, null);
	gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTarget, 0);
	// GEOMETRY
	const quadArray = gl.createVertexArray();
	gl.bindVertexArray(quadArray);
	const vertexIDBuffer = gl.createBuffer();
	const vertexIDs = new Float32Array(POINT_COUNT).map((_, index) => index);
	console.log('Using 0, 0 for position');
	console.log(`VertexIDs: ${vertexIDs}`);
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexIDBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, vertexIDs, gl.STATIC_DRAW);
	gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(0);
	gl.viewport(0, 0, width, height);
	gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, framebuffer);
	gl.clearColor(1, 11, 111, 0);
	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
	gl.disable(gl.BLEND);
	gl.disable(gl.DEPTH_TEST);
	// gl.blendFunc(gl.ONE, gl.ONE);
	// gl.blendEquationSeparate(gl.MAX, gl.FUNC_ADD);

	gl.drawArrays(gl.POINTS, 0, POINT_COUNT);
	const data = new Float32Array(4 * width * height);
	gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.FLOAT, data);
	let failed = false;
	console.log('Testing Additive Blending');
	const expectedColor = [2, 22, 222, 0]; // alpha value depends on which fragment rendered last not checking for it.
	if (data[0] !== expectedColor[0]) {
		console.log(`Red channel: expected ${expectedColor[0]} acutal: ${data[0]}`);
		failed = true;
	}
	if (data[1] !== expectedColor[1]) {
		console.log(`Green channel: expected ${expectedColor[1]} acutal: ${data[1]}`);
		failed = true;
	}
	if (data[2] !== expectedColor[2]) {
		console.log(`Blue channel: expected ${expectedColor[2]} acutal: ${data[2]}`);
		failed = true;
	}
	//if (data[3] !== expectedColor[3]) {
	//	console.log(`Alpha channel: expected ${expectedColor[3]} acutal: ${data[3]}`);
	//	failed = true;
	//}
	console.log(`Recevied expected color : ${data.slice(0, 4)}`);
	if (failed) {
		console.log('TEST FAILED');
	} else {
		console.log('TEST PASSED');
	}
    </script>
</body>
</html>