WebGL To HTML

To build good experimental WebGL applications it is useful to be able to use HTML form elements to change flags inside of a shader. In order to do this you need to do the following steps:
  1. Create HTML Form Elements with unique IDs.
  2. Declare uniform shader variables in fragment or vertex shaders.
  3. Expose handles for shader uniform variables using gl.getUniformLocation()
  4. Use getDocumentElementByID() and gl.uniform1i() commands to change shader variable value.
  5. redraw the scene to see draw with the new shader values.

Create HTML Form Elements with unique IDs.

 
            < select id="sourceCLR">
            < option value="texture"> Texture < /option >
            < option value="math" > Math < /option >
            < option value="other" > Fract < /option >
            < /select >

Declare unify shader variables in fragment or vertex shaders.


< script id="shader-fs" type="x-shader/x-fragment" >
    precision mediump float; 
 ...
 uniform int sourceCLR;
 ...

Expose handles for shader unify variables using gl.getUniformLocation()


        shaderProgram.sourceCLR = gl.getUniformLocation(shaderProgram,"sourceCLR");

Use getDocumentElementByID() and gl.uniform1i() commands to change shader variable value.


         var asrc = document.getElementById("sourceCLR").value;
        if (asrc == "texture")
        {
          gl.uniform1i(shaderProgram.sourceCLR,1);
        }
        else if (asrc == "math")
        {
          gl.uniform1i(shaderProgram.sourceCLR,2);
        }
        else if (asrc == "other")
        {
            gl.uniform1i(shaderProgram.sourceCLR,3);
        }

Redraw the scene to see draw with the new shader values.


drawScene();