WebGL Fundamentals

https://webglfundamentals.org
Admin
WebGL Fundamentals is a comprehensive educational resource that teaches WebGL from basic principles,...
Tokens:541,542
Snippets:3,908
Trust Score:9.5
Update:4 days ago
Show doc for...
Tokens:
Raw
### WebGL Setup Example

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-how-can-i-move-the-perspective-vanishing-point-from-the-center-of-the-canvas-.html

Basic WebGL initialization and shader setup.

```javascript
const vs = `
attribute vec4 position;
uniform mat4 u_worldViewProjection;
void main() {
gl_Position = u_worldViewProjection * position;
}
`;
const fs = `
precision mediump float;
void main() {
gl_FragColor = vec4(vec3(0), 1);
}
`
const gl = document.querySelector("canvas").getContext("webgl");
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
position: [
-1, -1, -1,
1, -1, -1,
1, 1, -1,
-1, 1, -1,
1
```

--------------------------------

### WebGL Shader Setup Example 1

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-creating-a-smudge-liquify-effect.html

Initial shader setup for vertex and fragment shaders using TWGL.

```javascript
var vs = `
attribute vec4 position;
uniform mat4 u_matrix;
void main() {
gl_Position = u_matrix * position;
}
`;
var fs = `
precision mediump float;
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}
`;
var vsQuad = `
attribute vec4 position;
attribute vec2 texcoord;
varying vec2 v_texcoord;
1
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
1
body { margin: 0; }
```

--------------------------------

### Full WebGL stencil example setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-use-the-stencil-buffer.html

A complete setup example using TWGL to initialize a WebGL program with stencil support.

```javascript
const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl', {stencil: true});
const vs = `
attribute vec4 position;
uniform mat4 matrix;
void main() {
gl_Position = matrix * position;
}
`;
const fs = `
precision mediump float;
uniform vec4 color;
void main() {
gl_FragColor = color;
}
`;
const program = twgl.createProgram(gl, [vs, fs]);
const posLoc = gl.getAttribLocation(program, 'position');
const matLoc = gl.getUniformLocation(program, 'matrix');
const colorLoc = gl.getUniformLocation(program, 'color');
```

```html
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
```

```css
canvas { border: 1px solid black; }
```

--------------------------------

### Full WebGL Setup Example

Source: https://webglfundamentals.org/webgl/lessons/webgl-drawing-without-data.html

A complete JavaScript and GLSL setup for rendering geometry without vertex buffers.

```javascript
'use strict';
const gl = document.querySelector('#c').getContext('webgl');
const vs = `
attribute float vertexId;
uniform float numVerts;
uniform vec2 resolution;
#define PI radians(180.0)
const float numSlices = 8.0;
const float numVertsPerCircle = numSlices * 3.0;
vec2 computeCircleTriangleVertex(float vertexId) {
float sliceId = floor(vertexId / 3.0);
float triVertexId = mod(vertexId, 3.0);
float edge = triVertexId + sliceId;
float angleU = edge / numSlices; // 0.0 to 1.0
float angle = angleU * PI * 2.0;
float radius = step(triVertexId, 1.5);
return vec2(cos(angle), sin(angle)) * radius;
}
void main() {
```

--------------------------------

### Full WebGL Initialization Example

Source: https://webglfundamentals.org/webgl/lessons/webgl-image-processing.html

A complete setup for initializing a WebGL context and program.

```javascript
"use strict";
function main() {
var image = new Image();
image.src = "https://webglfundamentals.org/webgl/resources/leaves.jpg";
image.onload = function() {
render(image);
};
}
function render(image) {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// setup GLSL program
var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);
// look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation(program, "a_position");
1
<canvas id="canvas"></canvas>
1
@import url("https://webglfundamentals.org/webgl/resources/webgl-tutorials.css");
```

--------------------------------

### WebGL GPGPU Example Initialization

Source: https://webglfundamentals.org/webgl/lessons/webgl-gpgpu.html

Initial setup code for the WebGL GPGPU example, defining shaders and dimensions.

```javascript
'use strict';
const vs = `
attribute vec4 position;
void main() {
gl_Position = position;
}
`;
const fs = `
precision highp float;
uniform sampler2D srcTex;
uniform vec2 srcDimensions;
void main() {
vec2 texcoord = gl_FragCoord.xy / srcDimensions;
vec4 value = texture2D(srcTex, texcoord);
gl_FragColor = value * 2.0;
}
`;
const dstWidth = 3;
const dstHeight = 2;
```

--------------------------------

### WebGL main initialization example

Source: https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

A basic setup for a WebGL context and program initialization.

```javascript
"use strict";
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// setup GLSL program
var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);
gl.useProgram(program);
// look up where the vertex data needs to go.
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
// lookup uniforms
var colorLocation = gl.getUniformLocation(program, "u_color");
var matrixLocation = gl.getUniformLocation(program, "u_matrix");
// Create a buffer to put three 2d clip space points in
var positionBuffer = gl.createBuffer();
```

--------------------------------

### WebGL Shader Setup Example 2

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-creating-a-smudge-liquify-effect.html

Modified shader setup including a matrix uniform for the quad vertex shader.

```javascript
var vs = `
attribute vec4 position;
uniform mat4 u_matrix;
void main() {
gl_Position = u_matrix * position;
}
`;
var fs = `
precision mediump float;
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}
`;
var vsQuad = `
attribute vec4 position;
attribute vec2 texcoord;
uniform mat4 u_matrix;
1
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
1
body { margin: 0; }
```

--------------------------------

### Initialize TWGL scene setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-zooming-to-and-stopping-at-object-in-a-scene-in-webgl.html

Example setup using the TWGL library to initialize WebGL context, program info, and primitive shapes.

```javascript
var m4 = twgl.m4;
var v3 = twgl.v3;
twgl.setAttributePrefix("a_");
var gl = twgl.getWebGLContext(document.getElementById("c"));
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
var shapes = [
twgl.primitives.createCubeBufferInfo(gl, 2),
twgl.primitives.createSphereBufferInfo(gl, 1, 24, 12),
twgl.primitives.createTruncatedConeBufferInfo(gl, 1, 0, 2, 24, 1),
];
function rand(min, max) {
return min + Math.random() * (max - min);
}
function easeInOut(t, start, end) {
var c = end - start;
if ((t /= 0.5) < 1) {
return c / 2 * t * t + start;
} else {
return -c / 2 * ((--t) * (t - 2) - 1) + start;
}
}
```

--------------------------------

### Basic reflection initialization

Source: https://webglfundamentals.org/webgl/lessons/webgl-environment-maps.html

Complete setup for a WebGL environment map example including context creation, program compilation, and uniform lookups.

```javascript
"use strict";
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// setup GLSL program
var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d"]);
// look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation(program, "a_position");
var normalLocation = gl.getAttribLocation(program, "a_normal");
// lookup uniforms
var projectionLocation = gl.getUniformLocation(program, "u_projection");
var viewLocation = gl.getUniformLocation(program, "u_view");
var worldLocation = gl.getUniformLocation(program, "u_world");
var textureLocation = gl.getUniformLocation(program, "u_texture");
var worldCameraPositionLocation = gl.getUniformLocation(program, "u_worldCameraPosition");
```

--------------------------------

### WebGL setup for dashed line

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-pure-webgl-dashed-line.html

A complete setup example using TWGL to create a program and calculate distances for a dashed line.

```javascript
const gl = document.querySelector("#c").getContext("webgl");
// Note: createProgramFromScripts will call bindAttribLocation
// based on the index of the attibute names we pass to it.
var program = twgl.createProgramFromScripts(
gl, 
["vshader", "fshader"], 
["a_position", "a_lengthSoFar"]);
gl.useProgram(program);

function distance(array, ndx1, ndx2)
{
ndx1 *= 3;
ndx2 *= 3;
var dx = array[ndx1 + 0] - array[ndx2 + 0];
var dy = array[ndx1 + 1] - array[ndx2 + 1];
var dz = array[ndx1 + 2] - array[ndx2 + 2];
return Math.sqrt(dx * dx + dy * dy + dz * dz);
}
// Used this line in the console to generate the positions
// var sub = 10; for (var ii = 0; ii <= sub; ++ii) { r = (ii & 1) ? 0.5 : 0.9; a = ii * Math.PI * 2 / sub; console.log((Math.cos(a) * r).toFixed(3) + ", " + (Math.sin(a) * r).toFixed(3) + ", "); }
```

```html
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
```

```css
canvas { border: 1px solid black; }
```

--------------------------------

### WebGL Texture Setup Example

Source: https://webglfundamentals.org/webgl/lessons/webgl-cors-permission.html

A partial setup for a WebGL program that attempts to use a texture, which will fail if the texture source is cross-origin.

```javascript
"use strict";
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// setup GLSL program
var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader", "fragment-shader"]);
// look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation(program, "a_position");
var texcoordLocation = gl.getAttribLocation(program, "a_texcoord");
// lookup uniforms
var matrixLocation = gl.getUniformLocation(program, "u_matrix");
var textureLocation = gl.getUniformLocation(program, "u_texture");
// Create a buffer.
var positionBuffer = gl.createBuffer();
```

--------------------------------

### Basic Render Loop Setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-multiple-views.html

Initial setup for the render loop including perspective projection and camera matrix calculation.

```javascript
function degToRad(d) {
  return d * Math.PI / 180;
}
const settings = {
  rotation: 150, // in degrees
};
const fieldOfViewRadians = degToRad(120);
function render() {
  webglUtils.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  gl.enable(gl.CULL_FACE);
  gl.enable(gl.DEPTH_TEST);
  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const near = 1;
  const far = 2000;
  // Compute a perspective projection matrix
  const perspectiveProjectionMatrix =
  m4.perspective(fieldOfViewRadians, aspect, near, far);
  // Compute the camera's matrix using look at.
  const cameraPosition = [0, 0, -75];
  const target = [0, 0, 0];
  const up = [0, 1, 0];
  const cameraMatrix = m4.lookAt(cameraPosition, target, up);
  // rotate the F in world space
  let worldMatrix = m4.yRotation(degToRad(settings.rotation));
  worldMatrix = m4.xRotate(worldMatrix, degToRad(settings.rotation));
  // center the 'F' around its origin
  worldMatrix = m4.translate(worldMatrix, -35, -75, -5);
  drawScene(perspectiveProjectionMatrix, cameraMatrix, worldMatrix);
}
render();
```

--------------------------------

### Complete WebGL Minimal Example

Source: https://webglfundamentals.org/webgl/lessons/webgl-smallest-programs.html

Full JavaScript setup for a WebGL program rendering colored points.

```javascript
'use strict';
const gl = document.querySelector('#c').getContext('webgl');
const vs = `
// vertex shader
attribute vec4 position;
void main() {
gl_Position = position;
gl_PointSize = 20.0;
}
`;
const fs = `
// fragment shader
precision mediump float;
uniform vec4 color;
void main() {
gl_FragColor = color;
}
`;
```

--------------------------------

### WebGL setup with TWGL

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-fps-like-camera-movement-with-basic-matrix-transformations.html

Basic WebGL initialization and shader setup using the TWGL library.

```javascript
const m4 = twgl.m4;
const v3 = twgl.v3;
const gl = document.querySelector("canvas").getContext("webgl");
const vs = `
uniform mat4 u_worldViewProjection;
uniform mat4 u_worldInverseTranspose;
attribute vec4 position;
attribute vec3 normal;
varying vec3 v_normal;
void main() {
gl_Position = u_worldViewProjection * position;
v_normal = (u_worldInverseTranspose * vec4(normal, 0)).xyz;
}
`;
const fs = `
precision mediump float;
varying vec3 v_normal;
uniform vec3 u_lightDir;
uniform vec4 u_color;
1
```

--------------------------------

### Start Servez

Source: https://webglfundamentals.org/webgl/lessons/webgl-setup-and-installation.html

Command to start the Servez server for a specific directory.

```bash
servez path/to/folder/where/you/unzipped/files
```

--------------------------------

### Sprite setup parameters

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-optimize-rendering-a-ui.html

This code snippet demonstrates the setup method for a sprite, including texture creation, parameter configuration, and buffer initialization.

```javascript
gl.useProgram(this.material.program);
this.gl_tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.gl_tex);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.image);
gl.bindTexture(gl.TEXTURE_2D, null);
this.uv_x = this.size.x / this.image.width;
this.uv_y = this.size.y / this.image.height;
this.tex_buff = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.tex_buff);
gl.bufferData(gl.ARRAY_BUFFER, Sprite.createRenderRectArray(0, 0, this.uv_x, this.uv_y), gl.STATIC_DRAW);
this.geo_buff = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.geo_buff);
gl.bufferData(gl.ARRAY_BUFFER, Sprite.createRectArray(0, 0, this.size.x, this.size.y), gl.STATIC_DRAW);
gl.useProgram(null);
```

--------------------------------

### Install Servez via npm

Source: https://webglfundamentals.org/webgl/lessons/webgl-setup-and-installation.html

Command to install the Servez web server globally using npm.

```bash
npm -g install servez
```

--------------------------------

### Full WebGL setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-drawing-without-data.html

Complete JavaScript and GLSL setup for rendering the circle.

```javascript
'use strict';
const gl = document.querySelector('#c').getContext('webgl');
const vs = `
attribute float vertexId;
uniform float numVerts;
uniform vec2 resolution;
#define PI radians(180.0)
void main() {
float numSlices = 8.0;
float sliceId = floor(vertexId / 3.0);
float triVertexId = mod(vertexId, 3.0);
float edge = triVertexId + sliceId;
float angleU = edge / numSlices; // 0.0 to 1.0
float angle = angleU * PI * 2.0;
float radius = step(triVertexId, 1.5);
vec2 pos = vec2(cos(angle), sin(angle)) * radius;
float aspect = resolution.y / resolution.x;
vec2 scale = vec2(aspect, 1);
gl_Position = vec4(pos * scale, 0, 1);

```

--------------------------------

### Main WebGL Setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-3d-lighting-directional.html

The main JavaScript setup function for the WebGL program.

```javascript
"use strict";
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// setup GLSL program
var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d"]);
// look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation(program, "a_position");
var normalLocation = gl.getAttribLocation(program, "a_normal");
// lookup uniforms
var worldViewProjectionLocation = gl.getUniformLocation(program, "u_worldViewProjection");
var worldLocation = gl.getUniformLocation(program, "u_world");
var colorLocation = gl.getUniformLocation(program, "u_color");
var reverseLightDirectionLocation =
gl.getUniformLocation(program, "u_reverseLightDirection");
```

--------------------------------

### Install Servez on OSX via sudo

Source: https://webglfundamentals.org/webgl/lessons/webgl-setup-and-installation.html

Command to install the Servez web server globally on OSX using sudo.

```bash
sudo npm -g install servez
```

--------------------------------

### Initialize WebGL Lathe Setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-3d-geometry-lathe.html

Initial setup for a WebGL application using an SVG path to define a curve for the lathe operation.

```javascript
"use strict";
const svg = "m44,434c18,-33 19,-66 15,-111c-4,-45 -37,-104 -39,-132c-2,-28 11,-51 16,-81c5,-30 3,-63 -36,-63";
function main() {
const opt = getQueryParams();
const curvePoints = parseSVGPath(svg);
// Get A WebGL context
/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
return;
}
const data = {
tolerance: 0.15,
distance: .4,
divisions: 16,
startAngle: 0,
endAngle: Math.PI * 2,
capStart: true,
capEnd: true,
```

--------------------------------

### Simplify Program Setup with ProgramInfo

Source: https://webglfundamentals.org/webgl/lessons/webgl-less-code-more-fun.html

Demonstrates a simplified approach to creating a program and bundling its setters into a single object.

```javascript
  * var programInfo = webglUtils.createProgramInfo(gl, ["vertexshader", "fragmentshader"]);
```

```javascript
  * programInfo = {
  * program: WebGLProgram, // program we just compiled
  * uniformSetters: ..., // setters as returned from webglUtils.createUniformSetters
  * attribSetters: ..., // setters as returned from webglUtils.createAttribSetters
  * }
```

--------------------------------

### Initialize WebGL Programs

Source: https://webglfundamentals.org/webgl/lessons/webgl-visualizing-the-camera.html

Setup GLSL programs by compiling shaders and linking them.

```javascript
const programInfo = webglUtils.createProgramInfo(gl, ['vertex-shader-3d', 'fragment-shader-3d']);
const vertexColorProgramInfo = webglUtils.createProgramInfo(gl, ['vertex-shader-3d', 'fragment-shader-3d']);
const solidColorProgramInfo = webglUtils.createProgramInfo(gl, ['solid-color-vertex-shader', 'solid-color-fragment-shader']);
```

--------------------------------

### Canvas 2D Pattern Setup and Resizing

Source: https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

This example demonstrates creating 2x2 pixel patterns and a setup function for a 2D canvas to test resolution handling.

```javascript
'use strict';
const patterns = (() => {
const ctx = document.createElement('canvas').getContext('2d');
ctx.canvas.width = 2;
ctx.canvas.height = 2;
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 2, 2);
ctx.fillStyle = '#FFF';
ctx.fillRect(0, 0, 2, 1);
const p1 = ctx.createPattern(ctx.canvas, 'repeat');
ctx.fillRect(0, 0, 2, 2);
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 1, 2);
const p2 = ctx.createPattern(ctx.canvas, 'repeat');
return [p1, p2];
})();
function setupCanvas(canvas, resizeFn) {
const ctx = canvas.getContext('2d');
const drawFn = (displayWidth, displayHeight) => {
canvas.width = displayWidth;
canvas.height = displayHeight;
ctx.fillStyle = patterns[0];
```

--------------------------------

### WebGL Initialization Setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-efficient-particle-system-in-javascript---webgl-.html

Initializes the WebGL context, sets up basic state, and prepares buffers and shaders for the particle simulation.

```javascript
  * gl = null;
  * try {
  * // Try to grab the standard context. If it fails, fallback to experimental.
  * gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  * gl.viewportWidth = canvas.width;
  * gl.viewportHeight = canvas.height;
  * }
  * catch(e) {}
  *   * if(gl){
  * gl.clearColor(0.0,0.0,0.0,1.0);
  * gl.clearDepth(1.0); // Clear everything
  * gl.enable(gl.DEPTH_TEST); // Enable depth testing
  * gl.depthFunc(gl.LEQUAL); // Near things obscure far things
  *   * // Initialize the shaders; this is where all the lighting for the
  * // vertices and so forth is established.
  *   * initShaders();
  *   * // Here's where we call the routine that builds all the objects
  * // we'll be drawing.
  *   * initBuffers();
  * }else{
  * alert("WebGL unable to initialize");
  * }
  *   * /* Initialize actors */
  * for(var i=0;i<NUM_SQS;i++){
  * sqs.push(new Square(canvas.width*Math.random(),canvas.height*Math.random(),1,1));
  * }
  *   * /* Begin animation loop by referencing the drawFrame() method */
  * gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
  * gl.vertexAttribPointer(vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
  * requestAnimationFrame(drawFrame,canvas);
```

--------------------------------

### Define test canvases

Source: https://webglfundamentals.org/webgl/lessons/webgl-tips.html

Example setup with three canvases demonstrating different tabindex configurations.

```html
<canvas id="c1"></canvas>
<canvas id="c2" tabindex="0"></canvas>
<canvas id="c3" tabindex="1"></canvas>
```

--------------------------------

### WebGL low-resolution rendering setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-get-pixelize-effect-in-webgl-.html

Example code using TWGL to set up shaders for a low-resolution rendering pipeline.

```javascript
const vs = `
attribute vec4 position;
uniform mat4 u_matrix;
void main() {
gl_Position = u_matrix * position;
}
`;
const fs = `
void main() {
gl_FragColor = vec4(0, 0, 0, 1); // black
}
`;
const vs2 = `
attribute vec4 position;
attribute vec2 texcoord;
uniform mat4 u_matrix;
varying vec2 v_texcoord;
void main() {
gl_Position = u_matrix * position;
```

```html
<script src="https://twgljs.org/dist/3.x/twgl-full.min.js"></script>
```

```css
body { margin: 0; }
```

--------------------------------

### Initialize WebGL Context and Program

Source: https://webglfundamentals.org/webgl/lessons/webgl-2d-drawimage.html

Basic setup for a WebGL context, program creation, and attribute/uniform location lookups.

```javascript
"use strict";
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// setup GLSL program
var program = webglUtils.createProgramFromScripts(gl, ["drawImage-vertex-shader", "drawImage-fragment-shader"]);
// look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation(program, "a_position");
var texcoordLocation = gl.getAttribLocation(program, "a_texcoord");
// lookup uniforms
var matrixLocation = gl.getUniformLocation(program, "u_matrix");
var textureLocation = gl.getUniformLocation(program, "u_texture");
// Create a buffer.
var positionBuffer = gl.createBuffer();
```

--------------------------------

### Render Loop Setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-visualizing-the-camera.html

Initialize the render loop with canvas resizing and GL state enabling.

```javascript
function render() {
webglUtils.resizeCanvasToDisplaySize(gl.canvas);
gl.enable(gl.CULL_FACE);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.SCISSOR_TEST);
```

--------------------------------

### Example .MTL file content

Source: https://webglfundamentals.org/webgl/lessons/webgl-load-obj-w-mtl.html

A sample .MTL file structure showing material definitions starting with the newmtl keyword.

```text
# Blender MTL File: 'None'
# Material Count: 11
  * newmtl D1blinn1SG
  * Ns 323.999994
  * Ka 1.000000 1.000000 1.000000
  * Kd 0.500000 0.500000 0.500000
  * Ks 0.500000 0.500000 0.500000
  * Ke 0.0 0.0 0.0
  * Ni 1.000000
  * d 1.000000
  * illum 2
  * newmtl D1lambert2SG
  * Ns 323.999994
  * Ka 1.000000 1.000000 1.000000
  * Kd 0.020000 0.020000 0.020000
  * Ks 0.500000 0.500000 0.500000
  * Ke 0.0 0.0 0.0
  * Ni 1.000000
  * d 1.000000
  * illum 2
  * newmtl D1lambert3SG
  * Ns 323.999994
  * Ka 1.000000 1.000000 1.000000
  * Kd 1.000000 1.000000 1.000000
  * Ks 0.500000 0.500000 0.500000
  * Ke 0.0 0.0 0.0
  * Ni 1.000000
  * d 1.000000
  * illum 2
  * ... similar for 8 more materials
```

--------------------------------

### WebGL Shader and Render Setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-read-a-single-component-with-readpixels.html

This snippet demonstrates the initialization of shaders, program linking, and the render loop, including the use of gl.readPixels to capture pixel data.

```javascript
  * gl.compileShader(shader);
  * return shader;
  * }
  *   * var vertexShader, fragmentShader;
  *   * if (!vertexSource){
  * vertexShader = createShader(gl.VERTEX_SHADER, `attribute vec2 a_position;
  * void main() { gl_Position = vec4(a_position, 0.0, 1.0); }`
  * );
  * } else {
  * vertexShader = createShader(gl.VERTEX_SHADER, vertexSource);
  * }
  * fragmentShader = createShader(gl.FRAGMENT_SHADER, fragmentSource);
  *   * shaderProgram = gl.createProgram();
  * gl.attachShader(shaderProgram, vertexShader);
  * gl.attachShader(shaderProgram, fragmentShader);
  * gl.linkProgram(shaderProgram);
  *   * gl.useProgram(shaderProgram);
  * return shaderProgram;
  * }
  *   * var _render = function(gl, program){
  * var positionLocation = gl.getAttribLocation(program, "a_position");
  *   * var u_imageLoc = gl.getUniformLocation(program, "u_image");
  * var textureSizeLocation = gl.getUniformLocation(program, "u_textureSize");
  *   * gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
  * gl.enableVertexAttribArray(positionLocation);
  *   * var width = gl.canvas.width,
  * height = gl.canvas.height;
  *   * gl.bindFramebuffer(gl.FRAMEBUFFER, gFramebuffer);
  *   * gl.uniform2f(textureSizeLocation, width, height);
  *   * gl.uniform1i(u_imageLoc, 0);
  *   * gl.viewport(0, 0, width, height);
  *   * gl.drawArrays(gl.TRIANGLES, 0, 6);
  *   * }
  *   * var _run = function(program){
  * let t0 = performance.now();
  * _render(gl, program);
  * gl.bindTexture(gl.TEXTURE_2D, gTexture);
  * let t1 = performance.now();
  *   * // gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
  * gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RED, gl.UNSIGNED_BYTE, pixels);
  *   * let t2 = performance.now();
  * console.log('_render dur = ' + Number((t1-t0).toFixed(3)) + ' ms');
  * console.log('_run dur = ' + Number((t2-t0).toFixed(3)) + ' ms');
  * }
  *   * };
```

--------------------------------

### Vertex Shader Attribute and Varying Setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-how-it-works.html

Example of declaring attributes and varying variables in a vertex shader to pass color data to the fragment shader.

```glsl
  * attribute vec2 a_position;
  * attribute vec4 a_color;
  * ...
  * varying vec4 v_color;
  *   * void main() {
  * ...
  * // Copy the color from the attribute to the varying.
  * v_color = a_color;
  * }
```

--------------------------------

### Test Data Preparation for Points and Lines

Source: https://webglfundamentals.org/webgl/lessons/webgl-gpgpu.html

Example data setup for 2 points and 5 line segments, padded with zeros to fit into an RGBA texture format.

```javascript
const points = [
  100, 100, 0, 0,
  200, 100, 0, 0,
];
const lines = [
  25, 50, 0, 0,
  25, 150, 0, 0,
  90, 50, 0, 0,
  90, 150, 0, 0,
  125, 50, 0, 0,
  125, 150, 0, 0,
  185, 50, 0, 0,
  185, 150, 0, 0,
  225, 50, 0, 0,
  225, 150, 0, 0,
];
const numPoints = points.length / 4;
const numLineSegments = lines.length / 4 / 2;
```

--------------------------------

### WebGL shader setup for custom vertex data

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-control-the-color-between-vertices.html

This example demonstrates defining attributes and varying variables in a WebGL shader to pass custom data, such as corner information, to the fragment shader.

```javascript
const gl = document.querySelector('canvas').getContext('webgl');
const vs = `
attribute vec4 position;
attribute vec4 color;
attribute vec3 corner;
varying vec4 v_color;
varying vec3 v_corner;
void main() {
gl_Position = position;
v_color = color;
v_corner = corner;
}
`;
const fs = `
precision highp float;
varying vec4 v_color;
varying vec3 v_corner;
// could be a uniform
```

--------------------------------

### Render Loop Setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-gpgpu.html

Initialize the render loop with time tracking and canvas resizing.

```javascript
* const pointsTexDimensions = pointsTexDimensions1;
  * const linesTexDimensions = linesTexDimensions1;
  *   * let then = 0;
  * function render(time) {
  * // convert to seconds
  * time *= 0.001;
  * // Subtract the previous time from the current time
  * const deltaTime = time - then;
  * // Remember the current time for the next frame.
  * then = time;
  *   * webglUtils.resizeCanvasToDisplaySize(gl.canvas);
```

--------------------------------

### Full WebGL directional lighting example

Source: https://webglfundamentals.org/webgl/lessons/webgl-3d-lighting-directional.html

Complete JavaScript setup for a WebGL program that renders a lit cube. It creates a program, looks up attribute and uniform locations, and sets up the scene.

```JavaScript
"use strict";
function main() {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  var canvas = document.querySelector("#canvas");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    return;
  }

  // setup GLSL program
  var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d"]);

  // look up where the vertex data needs to go.
  var positionLocation = gl.getAttribLocation(program, "a_position");
  var normalLocation = gl.getAttribLocation(program, "a_normal");

  // lookup uniforms
  var worldViewProjectionLocation = gl.getUniformLocation(program, "u_worldViewProjection");
  var worldInverseTransposeLocation = gl.getUniformLocation(program, "u_worldInverseTranspose");
  var colorLocation = gl.getUniformLocation(program, "u_color");
  var reverseLightDirectionLocation =
      gl.getUniformLocation(program, "u_reverseLightDirection");
```

--------------------------------

### Initialize WebGL context and programs

Source: https://webglfundamentals.org/webgl/lessons/webgl-skinning.html

Setup the WebGL context and create program info for skinning and mesh shaders.

```javascript
"use strict";
async function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("#canvas");
const gl = canvas.getContext("webgl");
if (!gl) {
return;
}
const ext = gl.getExtension('OES_texture_float');
if (!ext) {
return; // the extension doesn't exist on this device
}
// compiles and links the shaders, looks up attribute and uniform locations
const skinProgramInfo = webglUtils.createProgramInfo(gl, ["skinVS", "fs"]);
const meshProgramInfo = webglUtils.createProgramInfo(gl, ["meshVS", "fs"]);
class Skin {
constructor(joints, inverseBindMatrixData) {
this.joints = joints;
this.inverseBindMatrices = [];
this.jointMatrices = [];
```

--------------------------------

### Setup Program and Geometry Buffers

Source: https://webglfundamentals.org/webgl/lessons/webgl-planar-projection-mapping.html

Initializes the WebGL program and creates buffer information for a sphere and a plane.

```javascript
// setup GLSL program
// compiles shader, links program, look up locations
const textureProgramInfo = webglUtils.createProgramInfo(gl, ['vertex-shader-3d', 'fragment-shader-3d']);
const sphereBufferInfo = primitives.createSphereBufferInfo(
gl,
1, // radius
12, // subdivisions around
6, // subdivisions down
);
const planeBufferInfo = primitives.createPlaneBufferInfo(
gl,
20, // width
20, // height
1, // subdivisions across
1, // subdivisions down
);
```

--------------------------------

### Full example using helper functions

Source: https://webglfundamentals.org/webgl/lessons/webgl-less-code-more-fun.html

A complete main function that gets a WebGL context, creates sphere buffers, sets up a program, and defines attribute setters. It uses window.primitives.createSphereBuffers and webglUtils.createProgramFromScripts.

```javascript
"use strict";
function main() {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  var canvas = document.querySelector("#canvas");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    return;
  }

  var buffers = window.primitives.createSphereBuffers(gl, 10, 48, 24);

  // setup GLSL program
  var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d"]);

  var uniformSetters = webglUtils.createUniformSetters(gl, program);
  var attribSetters = webglUtils.createAttributeSetters(gl, program);

  var attribs = {
    a_position: { buffer: buffers.position, numComponents: 3, },
    a_normal: { buffer: buffers.normal, numComponents: 3, },
    a_texcoord: { buffer: buffers.texcoord, numComponents: 2, },
  };
}
```

--------------------------------

### Initialize WebGL with BufferInfo

Source: https://webglfundamentals.org/webgl/lessons/webgl-less-code-more-fun.html

Demonstrates setting up a WebGL context and creating buffer information from an indexed quad array.

```javascript
"use strict";
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
gl.enable(gl.DEPTH_TEST);
// an indexed quad
var arrays = {
position: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0],
texcoord: [0, 0, 0, 1, 1, 0, 1, 1],
normal: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1],
indices: [0, 1, 2, 1, 2, 3],
};
var bufferInfo = webglUtils.createBufferInfoFromArrays(gl, arrays);
// setup GLSL program
```

--------------------------------

### Initialize WebGL Context and Program

Source: https://webglfundamentals.org/webgl/lessons/webgl-skybox.html

Basic setup for a WebGL application, including context retrieval and program creation from script elements.

```javascript
"use strict";
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// setup GLSL program
var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d"]);
// look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation(program, "a_position");
// lookup uniforms
var skyboxLocation = gl.getUniformLocation(program, "u_skybox");
var viewDirectionProjectionInverseLocation =
gl.getUniformLocation(program, "u_viewDirectionProjectionInverse");
// Create a buffer for positions
var positionBuffer = gl.createBuffer();
```

--------------------------------

### OBJ face line example

Source: https://webglfundamentals.org/webgl/lessons/webgl-load-obj.html

An example of an OBJ face definition line.

```text
f 1/2/3 4/5/6 7/8/9
```

--------------------------------

### GLSL Variable Example

Source: https://webglfundamentals.org/webgl/lessons/webgl-image-processing.html

An example of a uniform variable name used in GLSL shaders.

```glsl
u_image
```

--------------------------------

### Initialize WebGL Buffers and Program

Source: https://webglfundamentals.org/webgl/lessons/webgl-drawing-multiple-things.html

Setup the WebGL context, create buffers for a sphere, cube, and cone, and initialize the shader program.

```javascript
"use strict";
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// creates buffers with position, normal, texcoord, and vertex color
// data for primitives by calling gl.createBuffer, gl.bindBuffer,
// and gl.bufferData
const sphereBufferInfo = primitives.createSphereWithVertexColorsBufferInfo(gl, 10, 12, 6);
const cubeBufferInfo = primitives.createCubeWithVertexColorsBufferInfo(gl, 20);
const coneBufferInfo = primitives.createTruncatedConeWithVertexColorsBufferInfo(gl, 10, 0, 20, 12, 1, true, false);
// setup GLSL program
var programInfo = webglUtils.createProgramInfo(gl, ["vertex-shader-3d", "fragment-shader-3d"]);
function degToRad(d) {
return d * Math.PI / 180;
}
```
Tokens:
Raw