WebGL2 JavaScript

Draw a Low Resolution Rotating Cross

This JavaScript program demonstrates how to draw a low resolution rotating cross in WebGL 2.0.

DrawLowResolutionRotatingCross.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>XoaX.net's WebGL</title>
  </head>
  <style>
    canvas {
    	border: 1px solid black;
    	width: 800px;
    	height: 600px
    }
  </style>
  <body>
    <canvas id="idCanvas" width="10" height="15"></canvas>
    <script type="text/javascript" src="DrawLowResolutionRotatingCross.js"></script>
  </body>
</html>

DrawLowResolutionRotatingCross.js

'use strict';

// Note: This is a WebGL2 program
// Vertex Shader
const ksVertexShader = `#version 300 es
in vec2 daEndpoint;

uniform mat3 u_matrix;

void main() {
  // Multiply the position by the matrix.
  gl_Position = vec4((u_matrix * vec3(daEndpoint, 1)).xy, 0, 1);
}`;

// Fragment Shader
const ksFragmentShader = `#version 300 es
precision highp float;

uniform vec4 u_color;
out vec4 outColor;

void main() {
   outColor = u_color;
}`;

const kgqGL = document.querySelector('#idCanvas').getContext('webgl2');

// Compile and link the program
function CreateTheProgram() {
	const saShaderType = ['VERTEX_SHADER', 'FRAGMENT_SHADER'];
	const saShaderCode = [ksVertexShader, ksFragmentShader];
	var qaCompiledShaders = [];
	// Compile the shaders
	for (var i = 0; i < 2; ++i) {
		// This is the equivalent of kgqGL.VERTEX_SHADER or kgqGL.FRAGMENT_SHADER
		const kqShader = kgqGL.createShader(kgqGL[saShaderType[i]]);
		kgqGL.shaderSource(kqShader, saShaderCode[i]);
		kgqGL.compileShader(kqShader);
		const bCompiled = kgqGL.getShaderParameter(kqShader, kgqGL.COMPILE_STATUS);
		if (!bCompiled) {
			const ksErrorLog = kgqGL.getShaderInfoLog(kqShader);
			console.log('There was an error compiling \'' + kqShader + '\':' + ksErrorLog + `\n`
				+ saShaderCode[i].split('\n').map((l,i) => `${i + 1}: ${l}`).join('\n'));
			kgqGL.deleteShader(kqShader);
			return null;
		}
		qaCompiledShaders[i] = kqShader;
	}
	// Link the program
	const kqProgram = kgqGL.createProgram();
	kgqGL.attachShader(kqProgram, qaCompiledShaders[0]);
	kgqGL.attachShader(kqProgram, qaCompiledShaders[1]);
	kgqGL.linkProgram(kqProgram);
	const kbLinked = kgqGL.getProgramParameter(kqProgram, kgqGL.LINK_STATUS);
  if (!kbLinked) {
  	const ksErrorLog = kgqGL.getProgramInfoLog(kqProgram);
  	console.log('Error in program linking:' + ksErrorLog);
  	kgqGL.deleteProgram(kqProgram);
  	return null;
  }
	return kqProgram;
}


const kgProgram = CreateTheProgram();
var qEndpointsLoc = kgqGL.getAttribLocation(kgProgram, "daEndpoint");
var qColorLoc = kgqGL.getUniformLocation(kgProgram, "u_color");
var qRotationLoc = kgqGL.getUniformLocation(kgProgram, "u_matrix");

// Create a buffer and put a 2 points in it for 1 line
var qEndpointsBuffer = kgqGL.createBuffer();
kgqGL.bindBuffer(kgqGL.ARRAY_BUFFER, qEndpointsBuffer);
var faEndpoints = [-.5, -.5, .5, .5, -.5, .5, .5, -.5];
kgqGL.bufferData(kgqGL.ARRAY_BUFFER, new Float32Array(faEndpoints), kgqGL.STATIC_DRAW);

var qVertexArray = kgqGL.createVertexArray();
kgqGL.bindVertexArray(qVertexArray);

kgqGL.enableVertexAttribArray(qEndpointsLoc);
var kiEntriesPerIter = 2;         // 2 components per iteration
var qDataType = kgqGL.FLOAT;			// 32bit floats
var bNormalize = false; 					// Don't normalize the data to [0,1] or [-1. 1]
var iStride = 0;        					// 0 = move forward size * sizeof(type) each iteration to get the next position
var iOffset = 0;       	 					// The offset of the first entry
kgqGL.vertexAttribPointer(qEndpointsLoc, kiEntriesPerIter, qDataType, bNormalize, iStride, iOffset);

requestAnimationFrame(Redraw);
  
function Redraw(fTimeMs) {
  // Use the compiled/linked program
  kgqGL.useProgram(kgProgram);

	// Reduce the rotation angle to 1 radian per second
  fTimeMs *= 0.001;
	var c = Math.cos(fTimeMs);
	var s = Math.sin(fTimeMs);
	var daRotation = [c, -s, 0, s, c, 0, 0, 0, 1];

	var bTranpose = false;
	kgqGL.uniformMatrix3fv(qRotationLoc, bTranpose, daRotation);
	kgqGL.uniform4fv(qColorLoc, [.5, .25, .1, 1]);
	
  var iOffset = 0;
	var iIterations = 4;
	kgqGL.drawArrays(kgqGL.LINES, iOffset, iIterations);

	requestAnimationFrame(Redraw);
}
 

Output

 
 

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