A Simple Code Texture

This JavaScript program demonstrates how to draw a simple code texture in WebGL.

SimpleCodeTexture.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>XoaX.net's WebGL</title>
		<style>
			#idCanvas {
				border: 1px solid black;
				width: 600px;
				height: 600px
			}
		</style>
		<script  id="idVertexShader" type="c">
			precision highp float;

			attribute vec2 position;

			void main() {
				gl_Position = vec4(position, 0.0, 1.0);
				gl_PointSize = 600.0;
			}
		</script>
		<script  id="idFragmantShader" type="c">
			precision mediump float;
			void main() {
				vec2 v2Pos = 2.0*gl_PointCoord - 1.0;
				float fDist = length(v2Pos);
				float fDistSq = fDist * fDist;
				gl_FragColor = vec4(0.1/fDistSq, 0.05/fDistSq, 0.15/fDistSq, 1.0 );
			}
		</script>
		<script type="text/javascript" src="SimpleCodeTexture.js"></script>
  </head>
  <body onload="Render()">
    <canvas id="idCanvas"></canvas>
  </body>
</html>

SimpleCodeTexture.js

function CreateProgram(kqGL) {

	// Compile the vertex shader
	const ksVertexShaderCode = document.getElementById("idVertexShader").innerHTML;
	let qVertexShader = kqGL.createShader(kqGL.VERTEX_SHADER);
	kqGL.shaderSource(qVertexShader, ksVertexShaderCode);
	kqGL.compileShader(qVertexShader);
	if (!kqGL.getShaderParameter(qVertexShader, kqGL.COMPILE_STATUS)) {
		alert("The vertex shader failed to compile!");
		kqGL.deleteShader(qVertexShader);
		return null;
	}

	// Compile the fragment shader
	const ksFragmentShaderCode = document.getElementById("idFragmantShader").innerHTML;
	let qFragmentShader = kqGL.createShader(kqGL.FRAGMENT_SHADER);
	kqGL.shaderSource(qFragmentShader, ksFragmentShaderCode);
	kqGL.compileShader(qFragmentShader);
	if (!kqGL.getShaderParameter(qFragmentShader, kqGL.COMPILE_STATUS)) {
		alert("The fragment shader failed to compile!");
		kqGL.deleteShader(qFragmentShader);
		return null;
	}

	// Compile and link the program
	let qProgram = kqGL.createProgram();
	kqGL.attachShader(qProgram, qVertexShader);
	kqGL.attachShader(qProgram, qFragmentShader);
	kqGL.linkProgram(qProgram);
	if (!kqGL.getProgramParameter(qProgram, kqGL.LINK_STATUS)) {
		alert("The program failed to initialize", kqGL.getProgramInfoLog(qProgram));
		return null;
	}

	return qProgram;
}

function Render() {

	const qCanvas = document.getElementById("idCanvas");
	qCanvas.width = qCanvas.clientWidth;
	qCanvas.height = qCanvas.clientHeight;
	const kqGL = qCanvas.getContext("webgl");

	let qProgram = CreateProgram(kqGL);

  // Tell WebGL how to convert from clip space to pixels
  kqGL.viewport(0, 0, kqGL.canvas.width, kqGL.canvas.height);

  // Clear the canvas
  kqGL.clearColor(0, 0, 0, 1.0);
  kqGL.clear(kqGL.COLOR_BUFFER_BIT);

	kqGL.useProgram(qProgram);
	
	kqGL.drawArrays(kqGL.POINTS, 0, 1);
  let qBuffer = kqGL.createBuffer();
  kqGL.bindBuffer(kqGL.ARRAY_BUFFER, qBuffer);
  kqGL.bufferData(kqGL.ARRAY_BUFFER, new Float32Array([0.0, 0.0]), kqGL.STATIC_DRAW);
  kqGL.vertexAttribPointer(0, 2, kqGL.FLOAT, false, 0, 0);
}

WebGL JavaScript

A Simple Code Texture

SimpleCodeTexture.html

SimpleCodeTexture.js

Output