### WebGL Setup and Texture Loading Example

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

This is a basic WebGL setup that includes getting a context, creating a shader program, and looking up attribute and uniform locations. It also includes buffer creation and is intended to demonstrate texture loading, though cross-origin textures will fail.

```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();

```

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

### WebGL Initialization and Setup

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

Basic WebGL setup including getting the context, creating a shader program, and locating vertex attributes and uniforms.

```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 texcoordLocation = gl.getAttribLocation(program, "a_texcoord");
  // lookup uniforms
  var projectionLocation = gl.getUniformLocation(program, "u_projection");
```

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

### Full WebGL Example Setup

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

This code block provides a complete, runnable example including canvas setup, GLSL shader definitions, and the JavaScript render loop. It demonstrates drawing points procedurally without explicit vertex data.

```javascript
'use strict';
const gl = document.querySelector('#c').getContext('webgl');
const vs = `
attribute float vertexId;
uniform float numVerts;
uniform float time;
void main() {
float u = vertexId / numVerts; // goes from 0 to 1
float x = u * 2.0 - 1.0; // -1 to 1
float y = fract(time + u) * -2.0 + 1.0; // 1.0 -> -1.0
gl_Position = vec4(x, y, 0, 1);
gl_PointSize = 5.0;
}
`;
const fs = `
precision mediump float;
void main() {
gl_FragColor = vec4(0, 0, 1, 1);
}
1
<canvas id="c"></canvas>
1
@import url("https://webglfundamentals.org/webgl/resources/webgl-tutorials.css");
WebGLFundamentals
Export To: 
jsGist Codepen JSFiddle Stack Overflow
Copy and paste the text below into a stack overflow question.
```

```

click here to open in a separate window
This gives us POINTS going down the screen but they are all in order. We need to add some randomness. There is no random number generator in GLSL. Instead we can use a function that generates something that appears random enough.
Here's one
```

  * // hash function from https://www.shadertoy.com/view/4djSRW
  * // given a value between 0 and 1
  * // returns a value between 0 and 1 that *appears* kind of random
  * float hash(float p) {
  * vec2 p2 = fract(vec2(p * 5.3983, p * 5.4427));
  * p2 += dot(p2.yx, p2.xy + vec2(21.5351, 14.3137));
  * return fract(p2.x * p2.y * 95.4337);
  * }


and we can use that like this
```

  * void main() {
  * float u = vertexId / numVerts; // goes from 0 to 1
  * float x = u * 2.0 - 1.0; // -1 to 1
  * float x = hash(u) * 2.0 - 1.0; // random position
  * float y = fract(time + u) * -2.0 + 1.0; // 1.0 -> -1.0
  *   * gl_Position = vec4(x, y, 0, 1);
  * gl_PointSize = 5.0;
  * }


We pass `hash` our previous 0 to 1 value and it gives us back a pseudo random 0 to 1 value.
Let's also make the points smaller
```
```

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

### Basic WebGL Program Setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-webgl-droste-effect.html

A minimal WebGL setup including shader definitions and context retrieval. This serves as a starting point for WebGL applications.

```javascript
"use strict";
function main() {
const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl')
const vs = `
attribute vec4 position;
attribute vec2 texcoord;
uniform mat4 u_matrix;
varying vec2 v_texcoord;
void main() {
gl_Position = u_matrix * position;
v_texcoord = texcoord;
}
`;
const fs = `
precision mediump float;
varying vec2 v_texcoord;
uniform sampler2D u_tex;
void main() {
gl_FragColor = texture2D(u_tex, v_texcoord);
}
1
`

```

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

### JavaScript: Full Example Setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-emulating-palette-based-graphics-in-webgl.html

Sets up the WebGL context, creates and uses a shader program, and configures texture units for the image and palette. Assumes `twgl.js` is available for `createProgramFromScripts`.

```javascript
var canvas = document.getElementById("c");
var gl = canvas.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_textureIndex"]);
gl.useProgram(program);
var imageLoc = gl.getUniformLocation(program, "u_image");
var paletteLoc = gl.getUniformLocation(program, "u_palette");
// tell it to use texture units 0 and 1 for the image and palette
gl.uniform1i(imageLoc, 0);
gl.uniform1i(paletteLoc, 1);
// Setup a unit quad
var positions = [
1, 1,
-1, 1,
-1, -1,
1, 1,
-1, -1,
1, -1,
1
<script src="https://twgljs.org/dist/twgl.min.js"></script>
1
canvas { border: 1px solid black; }
WebGLFundamentals
Export To: 
jsGist Codepen JSFiddle Stack Overflow
Copy and paste the text below into a stack overflow question.
```

```

click here to open in a separate window
```

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

### Full Example Setup with WebGL and Canvas 2D

Source: https://webglfundamentals.org/webgl/lessons/webgl-text-canvas2d.html

Initializes WebGL context, retrieves the 2D context for text rendering, and sets up shaders.

```javascript
"use strict";
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// look up the text canvas.
var textCanvas = document.querySelector("#text");
// make a 2D context for it
var ctx = textCanvas.getContext("2d");
// 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 colorLocation = gl.getAttribLocation(program, "a_color");

```

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

### Basic WebGL Setup

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

Standard setup for a WebGL application, including getting the canvas context, creating a shader program, and looking up attribute and uniform locations.

```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 texcoordLocation = gl.getAttribLocation(program, "a_texcoord");
// lookup uniforms
var projectionLocation = gl.getUniformLocation(program, "u_projection");
var worldViewLocation = gl.getUniformLocation(program, "u_worldView");
var textureLocation = gl.getUniformLocation(program, "u_texture");
var fogColorLocation = gl.getUniformLocation(program, "u_fogColor");
var fogNearLocation = gl.getUniformLocation(program, "u_fogNear");
```

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

### Complete WebGL Example Setup

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

Provides the full HTML, JavaScript, and GLSL code for rendering a circle of points without explicit vertex data 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)
void main() {
float u = vertexId / numVerts; // goes from 0 to 1
float angle = u * PI * 2.0; // goes from 0 to 2PI
float radius = 0.8;
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);
gl_PointSize = 5.0;
}
`;
1
<canvas id="c"></canvas>
1
@import url("https://webglfundamentals.org/webgl/resources/webgl-tutorials.css");
WebGLFundamentals
Export To: 

```

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

### WebGL Setup for 3D Textures

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

Basic WebGL setup including getting the context, creating a shader program, and looking up attribute and uniform locations for vertex and fragment shaders.

```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 = webutils.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 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 for positions
var positionBuffer = gl.createBuffer();

```

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

### Full WebGL Setup with Indexed Vertices

Source: https://webglfundamentals.org/webgl/lessons/webgl-indexed-vertices.html

This is a complete WebGL example demonstrating the setup of a program, attribute and uniform locations, and buffer creation for drawing with indexed vertices. It includes boilerplate code for context and program creation.

```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"]);
// look up where the vertex data needs to go.
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
// look up uniform locations
var resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");
var colorUniformLocation = gl.getUniformLocation(program, "u_color");
// Create a buffer to put three 2d clip space points in
var positionBuffer = gl.createBuffer();
}
```

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

### Setup WebGL Program and Buffers (Deep Screen Example)

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

Initializes WebGL context, creates a shader program, and sets up buffers for vertex attributes. This snippet is part of an example demonstrating textures on polygons that recede deeply into the screen.

```javascript
"use strict";
var zDepth = 50;
function main() {
// Get A WebGL context
var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl", {antialias: false});
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");

```

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

### Basic WebGL Setup and Primitive Creation

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

This snippet shows the fundamental setup for a WebGL application, including getting the context and creating basic geometry buffers using a utility function.

```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 WebGL Program and Get Locations

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

Initializes the WebGL context, creates a GLSL program, and retrieves attribute and uniform locations for vertex and fragment shaders. This is a standard setup for most WebGL applications.

```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 with Heightmap Loading

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-import-a-heightmap-in-webgl.html

This snippet shows the WebGL context and shader setup, similar to the flat grid example, but intended for use after loading a heightmap image.

```javascript
function run() {
const gl = document.querySelector('canvas').getContext('webgl');
const vs = `
attribute vec4 position;
uniform mat4 matrix;
void main() {
gl_Position = matrix * position;
}
`;
const fs = `
precision highp float;
void main() {
gl_FragColor = vec4(0, 1, 0, 1);
}
`;
const program = twgl.createProgram(gl, [vs, fs]);
const positionLoc = gl.getAttribLocation(program, 'position');

```

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

### Full WebGL Setup and Drawing with Translation

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

This is a complete JavaScript example setting up a WebGL context, compiling shaders, creating buffers, and drawing a shape with translation. It highlights how translation is handled by uniforms, making the drawing code simpler.

```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 positionLocation = gl.getAttribLocation(program, "a_position");

  // lookup uniforms
  var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
  var colorLocation = gl.getUniformLocation(program, "u_color");
  var translationLocation = gl.getUniformLocation(program, "u_translation");

  // Create a buffer to put positions in
  1
  <canvas id="canvas"></canvas>
  1
  @import url("https://webglfundamentals.org/webgl/resources/webgl-tutorials.css");
  WebGLFundamentals
  Export To: 
  jsGist Codepen JSFiddle Stack Overflow
  Copy and paste the text below into a stack overflow question.
  
  
  click here to open in a separate window

```

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

### Setup WebGL Program and Get Locations

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

Initializes the WebGL context, creates a GLSL program from scripts, and retrieves attribute and uniform locations for vertex data and transformation matrices.

```javascript
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 colorLocation = gl.getAttribLocation(program, "a_color");
// lookup uniforms
var matrixLocation = gl.getUniformLocation(program, "u_matrix");
// Create a buffer to put positions in
var positionBuffer = gl.createBuffer();
// Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
```

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

### Complete GPGPU Example (HTML/JS/CSS)

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

A self-contained example demonstrating WebGL GPGPU, including HTML structure, JavaScript logic, and CSS for presentation.

```html
'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;
1
<!--
1
@import url("https://webglfundamentals.org/webgl/resources/webgl-tutorials.css");
WebGLFundamentals
Export To: 
jsGist Codepen JSFiddle Stack Overflow
Copy and paste the text below into a stack overflow question.
```

```

click here to open in a separate window
Some notes about the code above.
```

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

### Basic WebGL Setup (JavaScript)

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

Standard setup for a WebGL context, program, and buffer, including attribute 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-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();

```

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

### Basic WebGL Setup with Canvas Element

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

Initializes WebGL context and sets up a basic GLSL program. This snippet is part of a larger example demonstrating canvas resizing.

```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();

```

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

### Minimal WebGL Setup

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

Basic setup for WebGL context, vertex shader, and fragment shader. This forms the foundation for minimal WebGL programs.

```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 Fundamentals Example Setup

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-prevent-texture-bleeding-with-a-texture-atlas.html

This JavaScript code sets up the WebGL context, creates sprite elements, and generates both unpadded and padded textures for demonstration. It uses the `twgl.js` library for texture creation and management.

```javascript
const numSprites = 3;
const spriteSize = 16;
const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl');
const spriteElem = makeSprites();
log('sprites');
document.body.appendChild(spriteElem);
const paddedSpriteElem = padSprites(spriteElem);
log('padded sprites');
document.body.appendChild(paddedSpriteElem);
const unpaddedTex = twgl.createTexture(gl, {src: spriteElem, wrap: gl.CLAMP_TO_EDGE, minMax: gl.LINEAR});
const paddedTex = twgl.createTexture(gl, {src: paddedSpriteElem, wrap: gl.CLAMP_TO_EDGE, minMax: gl.LINEAR});
const vs = `
attribute vec4 position;
attribute vec2 texcoord;
varying vec2 v_texcoord;
uniform mat4 matrix;
void main() {
gl_Position = matrix * position;
v_texcoord = texcoord;
}`
```

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

### Setup GLSL Program

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

This is a placeholder comment indicating where a GLSL program setup would typically occur.

```javascript
// setup GLSL program
1
```

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

### Setup WebGL Context and Program

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

Initializes the WebGL context and compiles GLSL shaders to create a rendering program. This is a standard setup for most WebGL applications.

```javascript
'use strict';
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');
if (!gl) {
return;
}
// setup GLSL programs
// compiles shaders, links program, looks up locations
const programInfo = webglUtils.createProgramInfo(gl, ['vertex-shader-3d', 'fragment-shader-3d']);
// create buffers and fill with data for a 3D 'F'
const bufferInfo = primitives.create3DFBufferInfo(gl);
function degToRad(d) {
return d * Math.PI / 180;
}
const settings = {
rotation: 150, // in degrees

```

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

### Setup WebGL Program and Get Locations

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

Initializes WebGL context, creates a GLSL program from scripts, and looks up attribute and uniform locations for vertex data, resolution, color, translation, and rotation.

```javascript
/** @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");
// lookup uniforms
var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
var colorLocation = gl.getUniformLocation(program, "u_color");
var translationLocation = gl.getUniformLocation(program, "u_translation");
var rotationLocation = gl.getUniformLocation(program, "u_rotation");
```

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

### Basic WebGL Setup with TWGL

Source: https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-load-images-in-the-background-with-no-jank.html

Sets up a WebGL rendering context and a 2D canvas context, along with basic vertex and fragment shaders using the TWGL library. This is a common starting point for WebGL applications.

```javascript
const m4 = twgl.m4;
const gl = document.querySelector('#webgl').getContext('webgl');
const ctx = document.querySelector('#graph').getContext('2d');
let update = true;
document.querySelector('#update').addEventListener('change', function() {
update = this.checked;
});
const vs = `
attribute vec4 position;
uniform mat4 matrix;
varying vec2 v_texcoord;
void main() {
gl_Position = matrix * position;
v_texcoord = position.xy;
}
`
const fs = `
precision mediump float;
varying vec2 v_texcoord;
uniform sampler2D tex;
void main() {

```

```javascript
const m4 = twgl.m4;
const gl = document.querySelector('#webgl').getContext('webgl');
const ctx = document.querySelector('#graph').getContext('2d');
const vs = `
attribute vec4 position;
uniform mat4 matrix;
varying vec2 v_texcoord;
void main() {
gl_Position = matrix * position;
v_texcoord = position.xy;
}
`
const fs = `
precision mediump float;
varying vec2 v_texcoord;
uniform sampler2D tex;
void main() {
gl_FragColor = texture2D(tex, v_texcoord);
}
`;
const program = twgl.createProgram(gl, [vs, fs]);

```

```javascript
const m4 = twgl.m4;
const gl = document.querySelector('#webgl').getContext('webgl');
const ctx = document.querySelector('#graph').getContext('2d');
const vs = `
attribute vec4 position;
uniform mat4 matrix;
varying vec2 v_texcoord;
void main() {
gl_Position = matrix * position;
v_texcoord = position.xy;
}
`
const fs = `
precision mediump float;
varying vec2 v_texcoord;
uniform sampler2D tex;
void main() {
gl_FragColor = texture2D(tex, v_texcoord);
}
`;

```

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

### Install Servez via npm

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

Install the 'servez' web server globally using npm. This is a common way to serve local files for web development.

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

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

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

### JavaScript Setup for WebGL Program

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

Initializes the WebGL program and retrieves locations for attributes and uniforms. This setup is necessary before rendering can begin.

```javascript
  * // setup GLSL program
  * const program = webglUtils.createProgramFromSources(gl, [vs, fs]);
  * const vertexIdLoc = gl.getAttribLocation(program, 'vertexId');
  * const numVertsLoc = gl.getUniformLocation(program, 'numVerts');
  * const resolutionLoc = gl.getUniformLocation(program, 'resolution');
  * const timeLoc = gl.getUniformLocation(program, 'time');
```

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

### Full WebGL Image Rendering Example

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

A complete JavaScript example demonstrating how to set up WebGL, load an image, create a texture, and render the image to a canvas.

```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");
WebGLFundamentals
Export To: 
jsGist Codepen JSFiddle Stack Overflow
Copy and paste the text below into a stack overflow question.



click here to open in a separate window
Not too exciting so let's manipulate that image. How about just swapping red and blue?



  * ...
  * gl_FragColor = texture2D(u_image, v_texCoord).bgra;
  * ...


And now red and blue are swapped.
JS HTML CSS Export Result Run
WebGLFundamentals
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
"use strict";

```

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

### Setup and Render a Cube with Lights using OpenGL (not ES)

Source: https://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

Illustrates setting up the viewport, projection, modelview matrices, clear color, depth test, lighting, and defining two point lights for rendering a cube.

```c
// Setup
glViewport(0, 0, width, height);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(70.0, width / height, 1, 1000);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();

glClearColor(0.0, 0.0, 0.0, 0.0);
glEnable(GL_DEPTH_TEST);
glShadeModel(GL_SMOOTH);
glEnable(GL_LIGHTING);

// Setup 2 lights
glEnable(GL_LIGHT0);
glEnable(GL_LIGHT1);
float light0_position[] = { 200, 100, 300, };
float light1_position[] = { -200, 100, 300, };
float light0_color[] = { 1, 0, 0.25, 1, };
float light1_color[] = { 0, 0.25, 1, 1, };
glVertlightfv(GL_LIGHT0, GL_DIFFUSE, light0_color);
glVertlightfv(GL_LIGHT1, GL_DIFFUSE, light1_color);
glVertlightfv(GL_LIGHT0, GL_POSITION, light0_position);
glVertlightfv(GL_LIGHT1, GL_POSITION, light1_position);
...

// Draw a cube.
static int count = 0;
++count;

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
double angle = count * 0.1;
glTranslatef(0, 0, -400);
glRotatef(angle, 0, 1, 0);

glBegin(GL_TRIANGLES);
glNormal3f(0, 0, 1);
glVertex3f(-100, -100, 100);
glVertex3f( 100, -100, 100);
glVertex3f(-100, 100, 100);
glVertex3f(-100, 100, 100);
glVertex3f( 100, -100, 100);
glVertex3f( 100, 100, 100);

/*
...
... repeat for 5 more faces of cube
...
*/

glEnd();
```

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

### Full WebGL Example with preserveDrawingBuffer

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

A complete WebGL setup demonstrating the use of `preserveDrawingBuffer: true` for context creation. This example includes basic setup for shaders, buffers, and attribute/uniform locations.

```javascript
"use strict";
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl", {preserveDrawingBuffer: true});
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 colorLocation = gl.getAttribLocation(program, "a_color");
// lookup uniforms
var matrixLocation = gl.getUniformLocation(program, "u_matrix");
// Create a buffer to put positions in
var positionBuffer = gl.createBuffer();
// Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)

```

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

### Main WebGL Setup

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

Initializes WebGL, creates the shader program, and sets up the canvas. This is the entry point for the WebGL application.

```javascript
"use strict";
function main() {
// Get A WebGL context
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
return;
}
// compiles and links the shaders, looks up attribute and uniform locations
var programInfo = webglUtils.createProgramInfo(gl, ["vs", "fs"]);
var arrays = {
position: {
numComponents: 2,
data: [
0, 1, // 0
0, -1, // 1
2, 1, // 2
2, -1, // 3
4, 1, // 4
4, -1, // 5
6, 1, // 6
6, -1, // 7
8, 1, // 8
8, -1, // 9
],
},
boneNdx: {
numComponents: 4,
data: [
0, 0, 0, 0, // 0
0, 0, 0, 0, // 1
0, 1, 0, 0, // 2
0, 1, 0, 0, // 3
1, 0, 0, 0, // 4
1, 0, 0, 0, // 5
1, 2, 0, 0, // 6
1, 2, 0, 0, // 7
2, 0, 0, 0, // 8
2, 0, 0, 0, // 9
],
},
weight: {
numComponents: 4,
data: [
1, 0, 0, 0, // 0
1, 0, 0, 0, // 1
.5,.5, 0, 0, // 2
.5,.5, 0, 0, // 3
1, 0, 0, 0, // 4
1, 0, 0, 0, // 5
.5,.5, 0, 0, // 6
.5,.5, 0, 0, // 7
1, 0, 0, 0, // 8
1, 0, 0, 0, // 9
],
},
};
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData
var bufferInfo = webglUtils.createBufferInfoFromArrays(gl, arrays);


// We can define our uniform values including a matrix for each bone
// 4 matrices, one for each bone
var numBones = 4;
var boneArray = new Float32Array(numBones * 16);

var uniforms = {
projection: m4.orthographic(-20, 20, -10, 10, -1, 1),
view: m4.translation(-6, 0, 0),
bones: boneArray,
color: [1, 0, 0, 1],
};


// We can make views into the boneArray, one for each matrix
// make views for each bone. This lets all the bones
// exist in 1 array for uploading but as separate
// arrays for using with the math functions
var boneMatrices = []; // the uniform data
var bones = []; // the value before multiplying by inverse bind matrix
var bindPose = []; // the bind matrix
for (var i = 0; i < numBones; ++i) {
boneMatrices.push(new Float32Array(boneArray.buffer, i * 4 * 16, 16));
bindPose.push(m4.identity()); // just allocate storage
bones.push(m4.identity()); // just allocate storage
}


// And some code to manipulate the bone matrices. We'll just rotate them in a hierarchy like the bones of a finger.
// rotate each bone by angle and simulate a hierarchy
function computeBoneMatrices(bones, angle) {
var m = m4.identity();
m4.zRotate(m, angle, bones[0]);
m4.translate(bones[0], 4, 0, 0, m);
m4.zRotate(m, angle, bones[1]);
m4.translate(bones[1], 4, 0, 0, m);
m4.zRotate(m, angle, bones[2]);
// bones[3] is not used
}


// Now call it once to generate their initial positions and use the result to compute the inverse bind pose matrices.
// compute the initial positions of each matrix
computeBoneMatrices(bindPose, 0);

// compute their inverses
var bindPoseInv = bindPose.map(function(m) {
return m4.inverse(m);
});


// Now we're ready to render
// First we animate the bones, computing a new world matrix for each
function render(time) {
time *= 0.001; // convert to seconds

var angle = Math.sin(time) * 0.8;
computeBoneMatrices(bones, angle);


// Then we multiply the result of each by the inverse bind pose to deal with the issue mentioned above
// multiply each by its bindPoseInverse
bones.forEach(function(bone, ndx) {
m4.multiply(bone, bindPoseInv[ndx], boneMatrices[ndx]);
});


webglUtils.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

var aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
var projection = m4.perspective(Math.PI * .25, aspect, 0.1, 2000);

var modelView = m4.lookAt([
0, 0, 100 * Math.cos(time * 0.1),
], [
0, 0, 0,
], [
0, 1, 0,
]);
modelView = m4.translate(modelView, 0, 0, 0);


var viewProjection = m4.multiply(projection, modelView);


uniforms.projection = viewProjection;


// Then all the normal stuff, setting up the attributes, setting the uniforms, and drawing.
gl.useProgram(programInfo.program);
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
webglUtils.setBuffersAndAttributes(gl, programInfo, bufferInfo);

// calls gl.uniformXXX, gl.activeTexture, gl.bindTexture
webglUtils.setUniforms(programInfo, uniforms);

// calls gl.drawArrays or gl.drawIndices
webglUtils.drawBufferInfo(gl, bufferInfo, gl.LINES);

requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
```

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

### JavaScript WebGL Setup

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

Basic setup for WebGL, including getting the context and defining the vertex shader source. This is boilerplate for most WebGL applications.

```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);
1
<canvas id="c"></canvas>
1
@import url("https://webglfundamentals.org/webgl/resources/webgl-tutorials.css");
WebGLFundamentals
Export To: 
jsGist Codepen JSFiddle Stack Overflow
Copy and paste the text below into a stack overflow question.



click here to open in a separate window
And if what if we wanted to draw multiple circles?
All we need to do is come up with a `circleId` which we can use to pick some position for each circle that is the same for all vertices in the circle.


  * float numVertsPerCircle = numSlices * 3.0;
  * float circleId = floor(vertexId / numVertsPerCircle);


For example let's draw a circle of circles.
First let's turn the code above into a function,


  * vec2 computeCircleTriangleVertex(float vertexId) {
  * 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);
  * return vec2(cos(angle), sin(angle)) * radius;
  * }


Now here's the original code we used to draw a circle of points at the top of this article.


  * float u = vertexId / numVerts; // goes from 0 to 1
  * float angle = u * PI * 2.0; // goes from 0 to 2PI
  * float radius = 0.8;
  *   * 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);


We just need to change it to use `circleId` instead of `vertexId` and to divide by the number of circles instead of the number of vertices.


  * void main() {
  * float circleId = floor(vertexId / numVertsPerCircle);
  * float numCircles = numVerts / numVertsPerCircle;
  *   * float u = vertexId / numVerts; // goes from 0 to 1
  * float u = circleId / numCircles; // goes from 0 to 1
  * float angle = u * PI * 2.0; // goes from 0 to 2PI
  * float radius = 0.8;
  *   * vec2 pos = vec2(cos(angle), sin(angle)) * radius;
  *   * vec2 triPos = computeCircleTriangleVertex(vertexId) * 0.1;
  *   * float aspect = resolution.y / resolution.x;
  * vec2 scale = vec2(aspect, 1);
  *   * gl_Position = vec4(pos * scale, 0, 1);
  * gl_Position = vec4((pos + triPos) * scale, 0, 1);
  * }


Then we just need to increase the number of vertices


  * const numVerts = 8 * 3;
  * const numVerts = 8 * 3 * 20;


And now we have a circle of 20 circles.
JS HTML CSS Export Result Run
WebGLFundamentals
1
2
3
4
5
6
7
8
9
10
11

```

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

### Full WebGL Example with Stencil Buffer

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

A complete WebGL example demonstrating the use of the stencil buffer for masking. It includes context creation, shader setup, and drawing operations.

```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');

```

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

### Main WebGL Setup and Rendering Function

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

Sets up the WebGL context, creates a shader program, and initiates image loading and rendering. This is the entry point for the WebGL application.

```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");

```

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

### Setup and Render a Cube with Lights using three.js

Source: https://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

Demonstrates setting up a WebGL renderer, camera, scene, a cube with phong material, and two point lights using the three.js library.

```javascript
var c = document.querySelector("#c");
renderer = new THREE.WebGLRenderer();
renderer.setSize(c.clientWidth, c.clientHeight);
c.appendChild(renderer.domElement);

camera = new THREE.PerspectiveCamera(
  70, c.clientWidth / c.clientHeight, 1, 1000);
camera.position.z = 400;
camera.updateProjectionMatrix();

scene = new THREE.Scene();

var geometry = new THREE.BoxGeometry(200, 200, 200);

var material = new THREE.MeshPhongMaterial({
  ambient: 0x555555,
  color: 0x555555,
  specular: 0xffffff,
  shininess: 50,
  shading: THREE.SmoothShading
});

mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

light1 = new THREE.PointLight(0xff0040, 2, 0);
light1.position.set(200, 100, 300);
scene.add(light1);

light2 = new THREE.PointLight(0x0040ff, 2, 0);
light2.position.set(-200, 100, 300);
scene.add(light2);
```