test_webgl2_uniform_block.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>WebGL2 test: using uniform blocks</title>

<script src="/tests/SimpleTest/SimpleTest.js"></script>

<link rel="stylesheet" href="/tests/SimpleTest/test.css">

<script src="webgl-util.js"></script>

<script id='vertSource' type='none'>

#version 300 es

uniform UniformBlock

  vec3 color;

  vec3 offset;

};

in vec2 POSITION;

out vec3 outCOLOR0;

void main() {

  gl_Position = vec4(POSITION, 0.0, 1.0);

  outCOLOR0 = vec3(color.x + offset.x, color.y + offset.y,

                   color.z + offset.z);

</script>

<script id='fragSource' type='none'>

#version 300 es

precision mediump float;

in vec3 outCOLOR0;

out vec4 oFragColor;

void main() {

  oFragColor = vec4(outCOLOR0, 1.0);

</script>

<body>

<canvas id="c" width="32" height="32"></canvas>

<script>

  WebGLUtil.withWebGL2('c', function(gl) {

    const vs = gl.createShader(gl.VERTEX_SHADER);

    gl.shaderSource(vs, vertSource.innerHTML.trim());

    gl.compileShader(vs);

    const fs = gl.createShader(gl.FRAGMENT_SHADER);

    gl.shaderSource(fs, fragSource.innerHTML.trim());

    gl.compileShader(fs);

    const prog = gl.createProgram();

    gl.attachShader(prog, vs);

    gl.attachShader(prog, fs);

    gl.linkProgram(prog);

    gl.useProgram(prog);

    gl.detachShader(prog, vs);

    gl.detachShader(prog, fs);

    gl.disable(gl.DEPTH_TEST);

    var vertData = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, vertData);

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-0.5, -0.5,

                                                     0.5, -0.5,

                                                     0.0, 0.5]), gl.STATIC_DRAW);

    gl.clearColor(0, 1, 0, 1);

    prog.POSITION = gl.getAttribLocation(prog, "POSITION");

    ok(prog.POSITION >= 0, '`POSITION` should be valid.');

    prog.blockIndex = gl.getUniformBlockIndex(prog, "UniformBlock");

    ok(prog.blockIndex >= 0, '`UniformBlock` index should be valid.');

    prog.blockSize = gl.getActiveUniformBlockParameter(prog,

                      prog.blockIndex, gl.UNIFORM_BLOCK_DATA_SIZE);

    ok(prog.blockSize >= 0, '`UniformBlock` size should be valid.');

    var uboArray = new ArrayBuffer(prog.blockSize);

    var uboFloat = new Float32Array(uboArray);

    uboFloat.set([0.5, 0.2, 0.3, 0.3, 0.2, 0.1], 0);

    var uniformBuffer = gl.createBuffer();

    gl.uniformBlockBinding(prog, prog.blockIndex, 1);

    gl.bindBuffer(gl.UNIFORM_BUFFER, uniformBuffer);

    gl.bufferData(gl.UNIFORM_BUFFER, uboFloat, gl.DYNAMIC_DRAW);

    gl.bindBufferBase(gl.UNIFORM_BUFFER, 1, uniformBuffer);

    gl.clear(gl.COLOR_BUFFER_BIT);

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

    ok(true, 'Test complete.');

  }, function() {

    SimpleTest.finish();

});

  SimpleTest.waitForExplicitFinish();

</script>