Passing Data to the Shaders

Step 1: To pass data to the shaders, first we have to determine the locations of the variables using:
getAttribLocation(program,name)
getUniformLocation(program,name)
Each of these functions returns the location of the variable as an integer that is greater than or equal to 0. -1 is returned if the variable does not exist or if it starts with 'gl_' or 'webgl_'.

Step 2: Using the locations we have obtained, we then specify the values:
vertexAttrib{1234}{fi}[v](location,...)
uniform{1234}{fi}[v](location,...)
{fi} specifies whether a float or an integer is passed.
{1234} indicates how many values are to be passed. If the variable in the shader has more components than the parameters, the second and third components will be set to zero while the fourth component will be set to one.
If 'v' is specified, there will be only one parameter other than 'location', and it will be an array containing the few components.

RESETRUNFULL

<!DOCTYPE html><html>
<head>
<script src="/shared/webgl-library.js"></script>
<script>
var VS_SOURCE=`
   attribute vec4 p;
   void main(){
      gl_Position = p; 
      gl_PointSize=30.0;
   }`;
var FS_SOURCE=`
   precision mediump float;
   uniform vec4 c;
   void main(){
      gl_FragColor=c;
   }`;
function draw_point(){
   var canvas = document.getElementById("myCanvas");
   var gl = canvas.getContext("webgl");
   initShaders(gl,VS_SOURCE,FS_SOURCE);
   var pL=gl.getAttribLocation(gl.program, 'p');
   if (pL<0) alert("Failed to get the location of p");
   gl.vertexAttrib2f(pL,0.5,0.0);
   var cA=[1.0,0.3,0.6,1.0];
   var cL=gl.getUniformLocation(gl.program,'c');
   if (cL<0) alert("Failed to get the location of c");
   gl.uniform4fv(cL,cA);
   gl.clearColor(0.0,0.0,0.0,1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.drawArrays(gl.POINTS,0,1);
}
</script>
</head>
<body onload="draw_point()">
   <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>

<!DOCTYPE html><html>
<head>
<script src="/shared/webgl-library.js"></script>
<script>
var VS_SOURCE=`
   attribute vec4 p;
   void main(){
      gl_Position = p; 
      gl_PointSize=30.0;
   }`;
var FS_SOURCE=`
   precision mediump float;
   uniform vec4 c;
   void main(){
      gl_FragColor=c;
   }`;
function draw_point(){
   var canvas = document.getElementById("myCanvas");
   var gl = canvas.getContext("webgl");
   initShaders(gl,VS_SOURCE,FS_SOURCE);
   var pL=gl.getAttribLocation(gl.program, 'p');
   if (pL<0) alert("Failed to get the location of p");
   gl.vertexAttrib2f(pL,0.5,0.0);
   var cA=[1.0,0.3,0.6,1.0];
   var cL=gl.getUniformLocation(gl.program,'c');
   if (cL<0) alert("Failed to get the location of c");
   gl.uniform4fv(cL,cA);
   gl.clearColor(0.0,0.0,0.0,1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.drawArrays(gl.POINTS,0,1);
}
</script>
</head>
<body onload="draw_point()">
   <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>

Here are some other related functions:

uniformMatrix{234}fv(location, transpose, Array) passes in the values for a matrix uniform.

getVertexAttribOffset(location, pname) returns the address of the specified generic 'location'. 'pname' must be VERTEX_ATTRIB_ARRAY_POINTER.

MENU

Passing Data to the Shaders