LayoutTests/webgl/resources/webgl_test_files/conformance2/uniforms/large-uniform-buffers.html - WebKit - Git at Google

 <!--
 Copyright (c) 2019 The Khronos Group Inc.
 Use of this source code is governed by an MIT-style license that can be
 found in the LICENSE.txt file.
 -->

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>WebGL large uniform buffers conformance tests</title>
 <link rel="stylesheet" href="../../resources/js-test-style.css"/>
 <script src="../../js/js-test-pre.js"></script>
 <script src="../../js/webgl-test-utils.js"></script>
 <script id="vshader" type="x-shader/x-vertex">#version 300 es
 in vec4 a_vertex;
 void main(void) {
   gl_Position = a_vertex;
 }
 </script>
 <script id="fshader" type="x-shader/x-fragment">#version 300 es
 precision mediump float;
 layout (std140) uniform color_ubo {
   vec4 color;
 };
 out vec4 fragColor;
 void main(void) {
   fragColor = color;
 }
 </script>
 </head>
 <body>
 <canvas id="example" width="100", height="100"></canvas>
 <div id="description"></div>
 <div id="console"></div>
 <script>
 "use strict";
 debug("");
 description("Test for UBOs sized over 65536 - https://bugs.chromium.org/p/angleproject/issues/detail?id=3388");

 var wtu = WebGLTestUtils;
 var gl = wtu.create3DContext("example", undefined, 2);

 function runTest() {
     var program = wtu.setupProgram(gl, ['vshader', 'fshader'], ['a_vertex']);
     var uboIndex = gl.INVALID_INDEX;
     if (program)
         uboIndex = gl.getUniformBlockIndex(program, "color_ubo");
     if (!program || uboIndex == gl.INVALID_INDEX) {
         testFailed("Loading program failed");
         return;
     }
     testPassed("Loading program succeeded");

     var vertices = new Float32Array([
         -1, -1, 0,
          1, -1, 0,
         -1,  1, 0,
          1,  1, 0
     ]);
     var vertexBuf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuf);
     gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
     gl.enableVertexAttribArray(0);
     gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

     var indexBuf = gl.createBuffer();
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuf);
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array([ 0, 1, 2, 2, 1, 3 ]), gl.STATIC_DRAW);

     var uboDataSize = gl.getActiveUniformBlockParameter(
         program, uboIndex, gl.UNIFORM_BLOCK_DATA_SIZE);
     if (uboDataSize == 0) {
         testFailed("uniform block data size invalid");
         return;
     }

     var uboBuf = gl.createBuffer();
     var uboData = new Float32Array(0x20000);

     var offs0 = 0x00000;
     // Red
     uboData[offs0 + 0] = 1;
     uboData[offs0 + 1] = 0;
     uboData[offs0 + 2] = 0;
     uboData[offs0 + 3] = 1;

     var offs1 = 0x10000;
     const alignment = gl.getParameter(gl.UNIFORM_BUFFER_OFFSET_ALIGNMENT);
     if (offs1 % alignment != 0)
         testFailed("Platform has a strange uniform buffer offset alignment requirement: " + alignment);

     // Green
     uboData[offs1 + 0] = 0;
     uboData[offs1 + 1] = 1;
     uboData[offs1 + 2] = 0;
     uboData[offs1 + 3] = 1;

     gl.uniformBlockBinding(program, uboIndex, 0);
     gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, uboBuf);
     gl.bufferData(gl.UNIFORM_BUFFER, uboData, gl.STATIC_DRAW);

     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No errors from setup");

     debug("draw lower triangle - should be red");
     gl.bindBufferRange(gl.UNIFORM_BUFFER, 0, uboBuf, offs0 * 4, 0x10);
     gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);
     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No errors from draw");

     debug("draw upper triangle - should be green");
     var uboBuf2 = gl.createBuffer();
     gl.bindBufferRange(gl.UNIFORM_BUFFER, 0, uboBuf, offs1 * 4, 0x10);
     gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 6);
     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No errors from draw");

     var width = 100, height = 100;
     wtu.checkCanvasRectColor(gl, 0, 0, width/2-5, height/2-5, [255, 0, 0, 255], 2,
         function() { testPassed("lower left should be red"); },
         function() { testFailed("lower left should be red"); });
     wtu.checkCanvasRectColor(gl, width/2+5, height/2+5, width/2-5, height/2-5, [0, 255, 0, 255], 2,
         function() { testPassed("top right should be green"); },
         function() { testFailed("top right should be green"); });
 }

 if (!gl) {
     testFailed("WebGL context creation failed");
 } else {
     testPassed("WebGL context creation succeeded");
     runTest();
 }

 debug("");
 var successfullyParsed = true;
 </script>
 <script src="../../js/js-test-post.js"></script>

 </body>
 </html>
	<!--
	Copyright (c) 2019 The Khronos Group Inc.
	Use of this source code is governed by an MIT-style license that can be
	found in the LICENSE.txt file.
	-->

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>WebGL large uniform buffers conformance tests</title>
	<link rel="stylesheet" href="../../resources/js-test-style.css"/>
	<script src="../../js/js-test-pre.js"></script>
	<script src="../../js/webgl-test-utils.js"></script>
	<script id="vshader" type="x-shader/x-vertex">#version 300 es
	in vec4 a_vertex;
	void main(void) {
	gl_Position = a_vertex;
	}
	</script>
	<script id="fshader" type="x-shader/x-fragment">#version 300 es
	precision mediump float;
	layout (std140) uniform color_ubo {
	vec4 color;
	};
	out vec4 fragColor;
	void main(void) {
	fragColor = color;
	}
	</script>
	</head>
	<body>
	<canvas id="example" width="100", height="100"></canvas>
	<div id="description"></div>
	<div id="console"></div>
	<script>
	"use strict";
	debug("");
	description("Test for UBOs sized over 65536 - https://bugs.chromium.org/p/angleproject/issues/detail?id=3388");

	var wtu = WebGLTestUtils;
	var gl = wtu.create3DContext("example", undefined, 2);

	function runTest() {
	var program = wtu.setupProgram(gl, ['vshader', 'fshader'], ['a_vertex']);
	var uboIndex = gl.INVALID_INDEX;
	if (program)
	uboIndex = gl.getUniformBlockIndex(program, "color_ubo");
	if (!program \|\| uboIndex == gl.INVALID_INDEX) {
	testFailed("Loading program failed");
	return;
	}
	testPassed("Loading program succeeded");

	var vertices = new Float32Array([
	-1, -1, 0,
	1, -1, 0,
	-1, 1, 0,
	1, 1, 0
	]);
	var vertexBuf = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuf);
	gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
	gl.enableVertexAttribArray(0);
	gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

	var indexBuf = gl.createBuffer();
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuf);
	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array([ 0, 1, 2, 2, 1, 3 ]), gl.STATIC_DRAW);

	var uboDataSize = gl.getActiveUniformBlockParameter(
	program, uboIndex, gl.UNIFORM_BLOCK_DATA_SIZE);
	if (uboDataSize == 0) {
	testFailed("uniform block data size invalid");
	return;
	}

	var uboBuf = gl.createBuffer();
	var uboData = new Float32Array(0x20000);

	var offs0 = 0x00000;
	// Red
	uboData[offs0 + 0] = 1;
	uboData[offs0 + 1] = 0;
	uboData[offs0 + 2] = 0;
	uboData[offs0 + 3] = 1;

	var offs1 = 0x10000;
	const alignment = gl.getParameter(gl.UNIFORM_BUFFER_OFFSET_ALIGNMENT);
	if (offs1 % alignment != 0)
	testFailed("Platform has a strange uniform buffer offset alignment requirement: " + alignment);

	// Green
	uboData[offs1 + 0] = 0;
	uboData[offs1 + 1] = 1;
	uboData[offs1 + 2] = 0;
	uboData[offs1 + 3] = 1;

	gl.uniformBlockBinding(program, uboIndex, 0);
	gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, uboBuf);
	gl.bufferData(gl.UNIFORM_BUFFER, uboData, gl.STATIC_DRAW);

	wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No errors from setup");

	debug("draw lower triangle - should be red");
	gl.bindBufferRange(gl.UNIFORM_BUFFER, 0, uboBuf, offs0 * 4, 0x10);
	gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);
	wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No errors from draw");

	debug("draw upper triangle - should be green");
	var uboBuf2 = gl.createBuffer();
	gl.bindBufferRange(gl.UNIFORM_BUFFER, 0, uboBuf, offs1 * 4, 0x10);
	gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 6);
	wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No errors from draw");

	var width = 100, height = 100;
	wtu.checkCanvasRectColor(gl, 0, 0, width/2-5, height/2-5, [255, 0, 0, 255], 2,
	function() { testPassed("lower left should be red"); },
	function() { testFailed("lower left should be red"); });
	wtu.checkCanvasRectColor(gl, width/2+5, height/2+5, width/2-5, height/2-5, [0, 255, 0, 255], 2,
	function() { testPassed("top right should be green"); },
	function() { testFailed("top right should be green"); });
	}

	if (!gl) {
	testFailed("WebGL context creation failed");
	} else {
	testPassed("WebGL context creation succeeded");
	runTest();
	}

	debug("");
	var successfullyParsed = true;
	</script>
	<script src="../../js/js-test-post.js"></script>

	</body>
	</html>