WebGL JavaScript

Draw a Rotating Cross with Lighting

This JavaScript program demonstrates how to draw a rotating solid colored cross with lighting WebGL program. This program shows how to specify a set of vertices and normal vectors with indices to specify the geometry.

DrawARotatingCrossWithLighting.html

  <head>
    <title>XoaX.net's WebGL</title>

    <script  id="idVertexShader" type="c">
      attribute vec4 av4Vertex;
      attribute vec4 av4Normal;
      uniform mat4 um4MvpMatrix;
      uniform vec3 uv3ObjectColor;
      uniform vec3 uv3LightColor;
      uniform vec3 uv3LightDirection;
      varying vec4 vv4Color;

      void main() {
        gl_Position = um4MvpMatrix*av4Vertex;
        vec3 v3Normal = normalize(av4Normal.xyz);
        float fIntensity = max(dot(uv3LightDirection, v3Normal), 0.0);
        vec3 v3Diffuse = fIntensity*uv3LightColor*uv3ObjectColor;
        vv4Color = vec4(v3Diffuse, 1.0);
      }
    </script>

    <script  id="idFragmantShader" type="c">
      precision mediump float;
      varying vec4 vv4Color;

      void main() {
        gl_FragColor = vv4Color;
      }
    </script>

    <script type="text/javascript">
    var gqTriangleSolid = null;
    var gfAngle = 0.0;
    function Initialization() {
      gfAngle = 0.0;
      var faVertices = [
        // Bottoms
        .25, -2.25, .25,
	    -.25, -2.25, .25,
	    -.25, -2.25, -.25,
	    .25, -2.25, -.25,

		1.25, -.25, -.25,
		1.25, -.25, .25,
		.25, -.25, .25,
	    .25, -.25, -.25,

		-1.25, -.25, .25,
		-1.25, -.25, -.25,
		-.25, -.25, -.25,
		-.25, -.25, .25,
		// Tops
        -.25, 1.25, -.25,
	    -.25, 1.25, .25,
	    .25, 1.25, .25,
	    .25, 1.25, -.25,

		1.25, .25, .25,
		1.25, .25, -.25,
		.25, .25, -.25,
	    .25, .25, .25,

		-1.25, .25, -.25,
		-1.25, .25, .25,
		-.25, .25, .25,
		-.25, .25, -.25,
      ];
      var iaSideDefinitions = [
        // Bottom sides
        0, 1, 2, 3,
        4, 5, 6, 7,
        8, 9, 10, 11,
        // Top Sides
        12, 13, 14, 15,
        16, 17, 18, 19,
        20, 21, 22, 23,
        // Front Sides
        1, 0, 14, 13,
        5, 16, 19, 6,
        21, 8, 11, 22,
        // Back Sides
        3, 2, 12, 15,
        17, 4, 7, 18,
        9, 20, 23, 10,
        // Left Sides
        13, 12, 23, 22,
        21, 20, 9, 8,
        11, 10, 2, 1,
        // Right Sides
        15, 14, 19, 18,
        17, 16, 5, 4,
        7, 6, 0, 3
      ];
      var iSides = 18;
      var iVertsPerSide = 4;
      // This can be used to render any object with a consistent number of side, like a regular solid.
      gqTriangleSolid = new TriangleSolid(faVertices, iaSideDefinitions, iSides, iVertsPerSide);
      // Begin the animation loop with half second intervals.
      const kiIntervalId = setInterval(RotationRender, 20);
    }
    function RotationRender() {
      var faRotationMatrix = CreateARotationAroundZMatrix(gfAngle);
      gqTriangleSolid.mfnRender(faRotationMatrix);
      gfAngle += .03;
    }
    function Normalize(faV) {
      var fL = Math.sqrt(faV[0]*faV[0] + faV[1]*faV[1] + faV[2]*faV[2]);
      faV[0] /= fL; faV[1] /= fL; faV[2] /= fL;
    }
    function Dot(faV1, faV2) {
      return (faV1[0]*faV2[0] + faV1[1]*faV2[1] + faV1[2]*faV2[2]);
    }
    function Cross(faV1, faV2) {
      return [faV1[1]*faV2[2]-faV1[2]*faV2[1], faV1[2]*faV2[0]-faV1[0]*faV2[2], faV1[0]*faV2[1]-faV1[1]*faV2[0]];
    }
    function Difference(faV1, faV2) {
      return [faV1[0]-faV2[0], faV1[1]-faV2[1], faV1[2]-faV2[2]];
    }
    function MultiplyMatrices(faaM, faaA) { // M = M*A, Note M != A
      var faRow = [0,0,0,0];
      for (iRow = 0; iRow < 4; ++iRow) {
        // Copy the current row
        for(iCol = 0; iCol < 4; ++iCol) {
          faRow[iCol] = faaM[iRow + 4*iCol];
        }
        for(iCol = 0; iCol < 4; ++iCol) {
          faaM[iRow + 4*iCol] = 0.0;
          for (k = 0; k < 4; ++k) {
            faaM[iRow + 4*iCol] += faRow[k]*faaA[4*iCol + k];
          }
        }
      }
    }
    function CreateARotationAroundZMatrix(fRotateRadians) {
      var fSin = Math.sin(fRotateRadians);
      var fCos = Math.cos(fRotateRadians);
      var faMatrix = new Float32Array([
        fCos, 0.0, -fSin, 0.0,
        0.0, 1.0, 0.0, 0.0,
        fSin, 0.0, fCos, 0.0,
        0.0, 0.0, 0.0, 1.0]);
      return faMatrix;
    }
    function ApplyMatrixToPoint3D(faMatrix, faPoint) {
      var faCopyPoint = [0,0,0];
      // Copy the point
      for (i = 0; i < 3; ++i) {
        faCopyPoint[i] = faPoint[i];
      }
      for(iCol = 0; iCol < 3; ++iCol) {
        faPoint[iCol] = 0.0;
        for (iRow = 0; iRow < 3; ++iRow) {
          faPoint[iCol] += faMatrix[iRow + 4*iCol]*faCopyPoint[iRow];
        }
      }
    }
    function CreatePerspectiveMatrix(fFieldOfViewDeg, fAspectRatio, fNearPlane, fFarPlane) {
      var fFieldOfViewRad = Math.PI*fFieldOfViewDeg/180;
      var fSin = Math.sin(fFieldOfViewRad);
      var fCos = Math.cos(fFieldOfViewRad);
      var fCot = fCos/fSin;
      var fDepth = fFarPlane - fNearPlane;
      var faMatrix = new Float32Array([
        fCot/fAspectRatio, 0.0, 0.0, 0.0,
        0.0, fCot, 0.0, 0.0,
        0.0, 0.0, -(fFarPlane + fNearPlane)/fDepth, -1.0,
        0.0, 0.0, -(2*fFarPlane*fNearPlane)/fDepth, 0.0]);
      return faMatrix;
    }
    function CreateLookAtMatrix(faEye, faObject, faUp) {
      var faViewDirection = Difference(faObject, faEye);
      Normalize(faViewDirection);
      var faRight = Cross(faViewDirection, faUp);
      Normalize(faRight);
      var faStraightUp = Cross(faRight, faViewDirection);
      var faMatrix = new Float32Array([
	    faRight[0], faStraightUp[0], -faViewDirection[0], 0.0,
	    faRight[1], faStraightUp[1], -faViewDirection[1], 0.0,
	    faRight[2], faStraightUp[2], -faViewDirection[2], 0.0,
        -Dot(faEye, faRight), -Dot(faEye, faStraightUp), Dot(faEye, faViewDirection), 1.0]);
      return faMatrix;
    }

function TriangleSolid(faVertices, iaSideDefinitions, iSides, iVertsPerSide) {
  // Get the WebGL Context
  var qCanvas = document.querySelector("#idCanvasWebGL");
  var qGL = qCanvas.getContext("webgl");

  // Compile the vertex shader
  var sVertexShaderCode = document.querySelector("#idVertexShader").text;
  var qVertexShader = qGL.createShader(qGL.VERTEX_SHADER);
  qGL.shaderSource(qVertexShader, sVertexShaderCode);
  qGL.compileShader(qVertexShader);

  // Compile the fragment shader
  var sFragmentShaderCode = document.querySelector("#idFragmantShader").text;
  var qFragmentShader = qGL.createShader(qGL.FRAGMENT_SHADER);
  qGL.shaderSource(qFragmentShader, sFragmentShaderCode);
  qGL.compileShader(qFragmentShader);

  // Compile and link the program
  var qProgram = qGL.createProgram();
  qGL.attachShader(qProgram, qVertexShader);
  qGL.attachShader(qProgram, qFragmentShader);
  qGL.linkProgram(qProgram);
  qGL.useProgram(qProgram);
  this.mqGL = qGL;
  this.mqProgram = qProgram;

  // Sides times vertices per side times spatial dimensions
  var iTrianglesPerSide = iVertsPerSide - 2;
  this.mfaRenderVertices = new Float32Array(iSides*iVertsPerSide*3);
  this.mfaRenderNormals = new Float32Array(iSides*iVertsPerSide*3);
  this.mui8aIndices = new Uint8Array(iSides*iTrianglesPerSide*3);
  this.miSides = iSides;
  this.miVertsPerSide = iVertsPerSide;
  this.miIndices = this.mui8aIndices.length;
  var faV1 = new Float32Array(3);
  var faV2 = new Float32Array(3);
  // Create  buffers
  for (var iFace = 0; iFace < iSides; ++iFace) {
    var iFaceOffset = 3*iVertsPerSide*iFace;
    for (var iVertex = 0; iVertex < iVertsPerSide; ++iVertex) {
       // Get the starting index
       var iVert = 3*iaSideDefinitions[iVertex + iVertsPerSide*iFace];
       for (var iDim = 0; iDim < 3; ++iDim) {
         this.mfaRenderVertices[iFaceOffset + 3*iVertex + iDim] = faVertices[iVert + iDim];
       }
    }
    // Get the normal for the current face
    // Use the middle vertices at each third of the side
    var iOneThirdIndex = Math.floor(iVertsPerSide/3);
    var iTwoThirdsIndex = Math.floor(2*iVertsPerSide/3);
    for (var iDim = 0; iDim < 3; ++iDim) {
      // Take the first index and the one just half past the middle
      faV1[iDim] = this.mfaRenderVertices[iFaceOffset + 3*iOneThirdIndex + iDim] - this.mfaRenderVertices[iFaceOffset + iDim];
      faV2[iDim] = this.mfaRenderVertices[iFaceOffset + 3*iTwoThirdsIndex + iDim] - this.mfaRenderVertices[iFaceOffset + iDim];
    }
    var faNormal = Cross(faV1, faV2);
    Normalize(faNormal);
    // Set the normal for all three vertices on this side
    for (var iVertex = 0; iVertex < iVertsPerSide; ++iVertex) {
      for (var iDim = 0; iDim < 3; ++iDim) {
        this.mfaRenderNormals[iFaceOffset + 3*iVertex + iDim] = faNormal[iDim];
      }
    }

    // Write the indices for the triangles on this face
    // There are (iVertsPerSide - 2) of them on each side
    for (var iTriangle = 0; iTriangle < iTrianglesPerSide; ++iTriangle) {
      this.mui8aIndices[3*(iTrianglesPerSide*iFace + iTriangle)] = iVertsPerSide*iFace;
	  this.mui8aIndices[3*(iTrianglesPerSide*iFace + iTriangle) + 1] = iTriangle + iVertsPerSide*iFace + 1;
      this.mui8aIndices[3*(iTrianglesPerSide*iFace + iTriangle) + 2] = iTriangle + iVertsPerSide*iFace + 2;
    }
  }
  var aqBufferData = [
    ['av4Vertex', this.mfaRenderVertices],
    ['av4Normal', this.mfaRenderNormals]
  ];
  for (var qBufferData of aqBufferData) {
    var qBuffer = qGL.createBuffer();
    qGL.bindBuffer(qGL.ARRAY_BUFFER, qBuffer);
    qGL.bufferData(qGL.ARRAY_BUFFER, qBufferData[1], qGL.STATIC_DRAW);
    var qAttribute = qGL.getAttribLocation(qProgram, qBufferData[0]);
    // There are 3 coordinates per vertex
    qGL.vertexAttribPointer(qAttribute, 3, qGL.FLOAT, false, 0, 0);
    qGL.enableVertexAttribArray(qAttribute);
    qGL.bindBuffer(qGL.ARRAY_BUFFER, null);
  }
  // Store the indices in the element buffer
  var qIndexBuffer = qGL.createBuffer();
  qGL.bindBuffer(qGL.ELEMENT_ARRAY_BUFFER, qIndexBuffer);
  qGL.bufferData(qGL.ELEMENT_ARRAY_BUFFER, this.mui8aIndices, qGL.STATIC_DRAW);

  // The member functions
  this.mfnRender = function(faRotationMatrix) {
    var qGL = this.mqGL;
    var qProgram = this.mqProgram;
      // Get the storage locations of uniform variables and so on
      var qMvpMatrix = qGL.getUniformLocation(qProgram, 'um4MvpMatrix');
      var qObjectColor = qGL.getUniformLocation(qProgram, 'uv3ObjectColor');
      var qLightColor = qGL.getUniformLocation(qProgram, 'uv3LightColor');
      var qLightDirection = qGL.getUniformLocation(qProgram, 'uv3LightDirection');

      // Set the cube color to red and the light color to white
      qGL.uniform3f(qObjectColor, 0.4, 0.3, 0.0);
      qGL.uniform3f(qLightColor, 1.0, 1.0, 1.0);

      // Set a directional light source, like the Sun
      var faDirectionOfLight = new Float32Array([.5, 1.0, 2.0]);
      // Rotate the light direction to keep the front lit
      ApplyMatrixToPoint3D(faRotationMatrix, faDirectionOfLight);
      Normalize(faDirectionOfLight);
      qGL.uniform3fv(qLightDirection, faDirectionOfLight);

      var faModelViewProj = CreatePerspectiveMatrix(15, qCanvas.width/qCanvas.height, 1, 10);
      var faLookAt = CreateLookAtMatrix([0, 3, 8],[0, 0, 0],[0, 1, 0]);
      // Proj*Look*Rotate
      MultiplyMatrices(faModelViewProj, faLookAt);
      MultiplyMatrices(faModelViewProj, faRotationMatrix);
      qGL.uniformMatrix4fv(qMvpMatrix, false, faModelViewProj);

      qGL.clearColor(0.9, 0.9, 0.9, 1.0);
      qGL.enable(qGL.DEPTH_TEST);
      qGL.clear(qGL.COLOR_BUFFER_BIT | qGL.DEPTH_BUFFER_BIT);
      qGL.drawElements(qGL.TRIANGLES, this.miIndices, qGL.UNSIGNED_BYTE, 0);
  }
}
    </script>
  </head>
  <body onload="Initialization();">
    <canvas id="idCanvasWebGL" width="400", height="400" style="border:1px solid brown"></canvas>
  </body>
</html>
 

Output

 
 

© 2007–2022 XoaX.net LLC. All rights reserved.