dom/canvas/test/webgl-mochitest/test_webgl2_uniform_block.html

   1 <!DOCTYPE HTML>
   2 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   3 <title>WebGL2 test: using uniform blocks</title>
   4 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   5 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   6 <script src="webgl-util.js"></script>
   7 <script id='vertSource' type='none'>
   8 #version 300 es
   9 uniform UniformBlock
  10 {
  11   vec3 color;
  12   vec3 offset;
  13 };
  14 in vec2 POSITION;
  15 out vec3 outCOLOR0;
  16
  17 void main() {
  18   gl_Position = vec4(POSITION, 0.0, 1.0);
  19   outCOLOR0 = vec3(color.x + offset.x, color.y + offset.y,
  20                    color.z + offset.z);
  21 }
  22 </script>
  23 <script id='fragSource' type='none'>
  24 #version 300 es
  25 precision mediump float;
  26 in vec3 outCOLOR0;
  27 out vec4 oFragColor;
  28
  29 void main() {
  30   oFragColor = vec4(outCOLOR0, 1.0);
  31 }
  32 </script>
  33 <body>
  34 <canvas id="c" width="32" height="32"></canvas>
  35 <script>
  36   WebGLUtil.withWebGL2('c', function(gl) {
  37     const vs = gl.createShader(gl.VERTEX_SHADER);
  38     gl.shaderSource(vs, vertSource.innerHTML.trim());
  39     gl.compileShader(vs);
  40     const fs = gl.createShader(gl.FRAGMENT_SHADER);
  41     gl.shaderSource(fs, fragSource.innerHTML.trim());
  42     gl.compileShader(fs);
  43     const prog = gl.createProgram();
  44     gl.attachShader(prog, vs);
  45     gl.attachShader(prog, fs);
  46     gl.linkProgram(prog);
  47     gl.useProgram(prog);
  48     gl.detachShader(prog, vs);
  49     gl.detachShader(prog, fs);
  50
  51     gl.disable(gl.DEPTH_TEST);
  52     var vertData = gl.createBuffer();
  53     gl.bindBuffer(gl.ARRAY_BUFFER, vertData);
  54     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-0.5, -0.5,
  55                                                      0.5, -0.5,
  56                                                      0.0, 0.5]), gl.STATIC_DRAW);
  57
  58     gl.clearColor(0, 1, 0, 1);
  59
  60     prog.POSITION = gl.getAttribLocation(prog, "POSITION");
  61     ok(prog.POSITION >= 0, '`POSITION` should be valid.');
  62     prog.blockIndex = gl.getUniformBlockIndex(prog, "UniformBlock");
  63     ok(prog.blockIndex >= 0, '`UniformBlock` index should be valid.');
  64     prog.blockSize = gl.getActiveUniformBlockParameter(prog,
  65                       prog.blockIndex, gl.UNIFORM_BLOCK_DATA_SIZE);
  66     ok(prog.blockSize >= 0, '`UniformBlock` size should be valid.');
  67
  68     var uboArray = new ArrayBuffer(prog.blockSize);
  69     var uboFloat = new Float32Array(uboArray);
  70     uboFloat.set([0.5, 0.2, 0.3, 0.3, 0.2, 0.1], 0);
  71     var uniformBuffer = gl.createBuffer();
  72     gl.uniformBlockBinding(prog, prog.blockIndex, 1);
  73     gl.bindBuffer(gl.UNIFORM_BUFFER, uniformBuffer);
  74     gl.bufferData(gl.UNIFORM_BUFFER, uboFloat, gl.DYNAMIC_DRAW);
  75     gl.bindBufferBase(gl.UNIFORM_BUFFER, 1, uniformBuffer);
  76
  77     gl.clear(gl.COLOR_BUFFER_BIT);
  78     gl.drawArrays(gl.POINTS, 0, 1);
  79
  80     ok(true, 'Test complete.');
  81   }, function() {
  82     SimpleTest.finish();
  83   });
  84
  85   SimpleTest.waitForExplicitFinish();
  86 </script>