Created
September 26, 2022 19:54
-
-
Save greggman/cf0a31e2e7e28dced8dfcefa7cad09ca to your computer and use it in GitHub Desktop.
WebGL2 with twgl, no scaling as the user resizes, orthographic projection
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://webgl2fundamentals.org/webgl/resources/webgl-tutorials.css"); | |
body { | |
margin: 0; | |
} | |
canvas { | |
width: 100vw; | |
height: 100vh; | |
display: block; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<canvas id="canvas"></canvas> | |
<div id="uiContainer"> | |
<div id="ui"> | |
<div id="x"></div> | |
<div id="y"></div> | |
<div id="z"></div> | |
<div id="angleX"></div> | |
<div id="angleY"></div> | |
<div id="angleZ"></div> | |
<div id="scaleX"></div> | |
<div id="scaleY"></div> | |
<div id="scaleZ"></div> | |
</div> | |
</div> | |
<!-- | |
for most samples webgl-utils only provides shader compiling/linking and | |
canvas resizing because why clutter the examples with code that's the same in every sample. | |
See https://webgl2fundamentals.org/webgl/lessons/webgl-boilerplate.html | |
and https://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html | |
for webgl-utils, m3, m4, and webgl-lessons-ui. | |
--> | |
<script src="https://webgl2fundamentals.org/webgl/resources/webgl-lessons-ui.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// WebGL2 - 3D Step 6 - Use Depth Buffer | |
// from https://webgl2fundamentals.org/webgl/webgl-3d-step6.html | |
import 'https://greggman.github.io/webgl-lint/webgl-lint.js'; | |
import * as twgl from 'https://twgljs.org/dist/5.x/twgl-full.module.js'; | |
const m4 = twgl.m4; | |
const vertexShaderSource = `#version 300 es | |
in vec4 position; | |
in vec4 color; | |
uniform mat4 u_matrix; | |
out vec4 v_color; | |
void main() { | |
gl_Position = u_matrix * position; | |
v_color = color; | |
} | |
`; | |
const fragmentShaderSource = `#version 300 es | |
precision highp float; | |
in vec4 v_color; | |
out vec4 outColor; | |
void main() { | |
outColor = v_color; | |
} | |
`; | |
function main() { | |
// Get A WebGL context | |
/** @type {HTMLCanvasElement} */ | |
const canvas = document.querySelector("#canvas"); | |
const gl = canvas.getContext("webgl2"); | |
if (!gl) { | |
return; | |
} | |
const programInfo = twgl.createProgramInfo(gl, [vertexShaderSource, fragmentShaderSource]); | |
const bufferInfo = twgl.createBufferInfoFromArrays(gl, { | |
position: getPositions(), | |
color: { data: getColors(), numComponents: 3, }, | |
}); | |
function radToDeg(r) { | |
return r * 180 / Math.PI; | |
} | |
function degToRad(d) { | |
return d * Math.PI / 180; | |
} | |
// First let's make some variables | |
// to hold the translation, | |
var translation = [45, 100, 0]; | |
var rotation = [degToRad(28), degToRad(25), degToRad(325)]; | |
var scale = [1, 1, 1]; | |
// Setup a ui. | |
webglLessonsUI.setupSlider("#x", {value: translation[0], slide: updatePosition(0), max: gl.canvas.width }); | |
webglLessonsUI.setupSlider("#y", {value: translation[1], slide: updatePosition(1), max: gl.canvas.height}); | |
webglLessonsUI.setupSlider("#z", {value: translation[2], slide: updatePosition(2), max: gl.canvas.height}); | |
webglLessonsUI.setupSlider("#angleX", {value: radToDeg(rotation[0]), slide: updateRotation(0), max: 360}); | |
webglLessonsUI.setupSlider("#angleY", {value: radToDeg(rotation[1]), slide: updateRotation(1), max: 360}); | |
webglLessonsUI.setupSlider("#angleZ", {value: radToDeg(rotation[2]), slide: updateRotation(2), max: 360}); | |
webglLessonsUI.setupSlider("#scaleX", {value: scale[0], slide: updateScale(0), min: -5, max: 5, step: 0.01, precision: 2}); | |
webglLessonsUI.setupSlider("#scaleY", {value: scale[1], slide: updateScale(1), min: -5, max: 5, step: 0.01, precision: 2}); | |
webglLessonsUI.setupSlider("#scaleZ", {value: scale[2], slide: updateScale(2), min: -5, max: 5, step: 0.01, precision: 2}); | |
function updatePosition(index) { | |
return function(event, ui) { | |
translation[index] = ui.value; | |
}; | |
} | |
function updateRotation(index) { | |
return function(event, ui) { | |
var angleInDegrees = ui.value; | |
var angleInRadians = degToRad(angleInDegrees); | |
rotation[index] = angleInRadians; | |
}; | |
} | |
function updateScale(index) { | |
return function(event, ui) { | |
scale[index] = ui.value; | |
}; | |
} | |
// Draw the scene. | |
function drawScene() { | |
twgl.resizeCanvasToDisplaySize(gl.canvas); | |
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); | |
gl.clearColor(0, 0, 0, 0); | |
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); | |
gl.enable(gl.DEPTH_TEST); | |
gl.enable(gl.CULL_FACE); | |
gl.cullFace(gl.FRONT); // becase we're flipping the Y axis | |
let matrix = m4.ortho(0, gl.canvas.clientWidth, gl.canvas.clientHeight, 0, -400, 400); | |
matrix = m4.translate(matrix, translation); | |
matrix = m4.rotateX(matrix, rotation[0]); | |
matrix = m4.rotateY(matrix, rotation[1]); | |
matrix = m4.rotateZ(matrix, rotation[2]); | |
matrix = m4.scale(matrix, scale); | |
gl.useProgram(programInfo.program); | |
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo); | |
twgl.setUniforms(programInfo, {u_matrix: matrix}); | |
twgl.drawBufferInfo(gl, bufferInfo); | |
requestAnimationFrame(drawScene); | |
} | |
requestAnimationFrame(drawScene); | |
} | |
function getPositions(gl) { | |
return new Float32Array([ | |
// left column front | |
0, 0, 0, | |
0, 150, 0, | |
30, 0, 0, | |
0, 150, 0, | |
30, 150, 0, | |
30, 0, 0, | |
// top rung front | |
30, 0, 0, | |
30, 30, 0, | |
100, 0, 0, | |
30, 30, 0, | |
100, 30, 0, | |
100, 0, 0, | |
// middle rung front | |
30, 60, 0, | |
30, 90, 0, | |
67, 60, 0, | |
30, 90, 0, | |
67, 90, 0, | |
67, 60, 0, | |
// left column back | |
0, 0, 30, | |
30, 0, 30, | |
0, 150, 30, | |
0, 150, 30, | |
30, 0, 30, | |
30, 150, 30, | |
// top rung back | |
30, 0, 30, | |
100, 0, 30, | |
30, 30, 30, | |
30, 30, 30, | |
100, 0, 30, | |
100, 30, 30, | |
// middle rung back | |
30, 60, 30, | |
67, 60, 30, | |
30, 90, 30, | |
30, 90, 30, | |
67, 60, 30, | |
67, 90, 30, | |
// top | |
0, 0, 0, | |
100, 0, 0, | |
100, 0, 30, | |
0, 0, 0, | |
100, 0, 30, | |
0, 0, 30, | |
// top rung right | |
100, 0, 0, | |
100, 30, 0, | |
100, 30, 30, | |
100, 0, 0, | |
100, 30, 30, | |
100, 0, 30, | |
// under top rung | |
30, 30, 0, | |
30, 30, 30, | |
100, 30, 30, | |
30, 30, 0, | |
100, 30, 30, | |
100, 30, 0, | |
// between top rung and middle | |
30, 30, 0, | |
30, 60, 30, | |
30, 30, 30, | |
30, 30, 0, | |
30, 60, 0, | |
30, 60, 30, | |
// top of middle rung | |
30, 60, 0, | |
67, 60, 30, | |
30, 60, 30, | |
30, 60, 0, | |
67, 60, 0, | |
67, 60, 30, | |
// right of middle rung | |
67, 60, 0, | |
67, 90, 30, | |
67, 60, 30, | |
67, 60, 0, | |
67, 90, 0, | |
67, 90, 30, | |
// bottom of middle rung. | |
30, 90, 0, | |
30, 90, 30, | |
67, 90, 30, | |
30, 90, 0, | |
67, 90, 30, | |
67, 90, 0, | |
// right of bottom | |
30, 90, 0, | |
30, 150, 30, | |
30, 90, 30, | |
30, 90, 0, | |
30, 150, 0, | |
30, 150, 30, | |
// bottom | |
0, 150, 0, | |
0, 150, 30, | |
30, 150, 30, | |
0, 150, 0, | |
30, 150, 30, | |
30, 150, 0, | |
// left side | |
0, 0, 0, | |
0, 0, 30, | |
0, 150, 30, | |
0, 0, 0, | |
0, 150, 30, | |
0, 150, 0, | |
]); | |
} | |
// Fill the current ARRAY_BUFFER buffer with colors for the 'F'. | |
function getColors(gl) { | |
return new Uint8Array([ | |
// left column front | |
200, 70, 120, | |
200, 70, 120, | |
200, 70, 120, | |
200, 70, 120, | |
200, 70, 120, | |
200, 70, 120, | |
// top rung front | |
200, 70, 120, | |
200, 70, 120, | |
200, 70, 120, | |
200, 70, 120, | |
200, 70, 120, | |
200, 70, 120, | |
// middle rung front | |
200, 70, 120, | |
200, 70, 120, | |
200, 70, 120, | |
200, 70, 120, | |
200, 70, 120, | |
200, 70, 120, | |
// left column back | |
80, 70, 200, | |
80, 70, 200, | |
80, 70, 200, | |
80, 70, 200, | |
80, 70, 200, | |
80, 70, 200, | |
// top rung back | |
80, 70, 200, | |
80, 70, 200, | |
80, 70, 200, | |
80, 70, 200, | |
80, 70, 200, | |
80, 70, 200, | |
// middle rung back | |
80, 70, 200, | |
80, 70, 200, | |
80, 70, 200, | |
80, 70, 200, | |
80, 70, 200, | |
80, 70, 200, | |
// top | |
70, 200, 210, | |
70, 200, 210, | |
70, 200, 210, | |
70, 200, 210, | |
70, 200, 210, | |
70, 200, 210, | |
// top rung right | |
200, 200, 70, | |
200, 200, 70, | |
200, 200, 70, | |
200, 200, 70, | |
200, 200, 70, | |
200, 200, 70, | |
// under top rung | |
210, 100, 70, | |
210, 100, 70, | |
210, 100, 70, | |
210, 100, 70, | |
210, 100, 70, | |
210, 100, 70, | |
// between top rung and middle | |
210, 160, 70, | |
210, 160, 70, | |
210, 160, 70, | |
210, 160, 70, | |
210, 160, 70, | |
210, 160, 70, | |
// top of middle rung | |
70, 180, 210, | |
70, 180, 210, | |
70, 180, 210, | |
70, 180, 210, | |
70, 180, 210, | |
70, 180, 210, | |
// right of middle rung | |
100, 70, 210, | |
100, 70, 210, | |
100, 70, 210, | |
100, 70, 210, | |
100, 70, 210, | |
100, 70, 210, | |
// bottom of middle rung. | |
76, 210, 100, | |
76, 210, 100, | |
76, 210, 100, | |
76, 210, 100, | |
76, 210, 100, | |
76, 210, 100, | |
// right of bottom | |
140, 210, 80, | |
140, 210, 80, | |
140, 210, 80, | |
140, 210, 80, | |
140, 210, 80, | |
140, 210, 80, | |
// bottom | |
90, 130, 110, | |
90, 130, 110, | |
90, 130, 110, | |
90, 130, 110, | |
90, 130, 110, | |
90, 130, 110, | |
// left side | |
160, 160, 220, | |
160, 160, 220, | |
160, 160, 220, | |
160, 160, 220, | |
160, 160, 220, | |
160, 160, 220, | |
]); | |
} | |
main(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"name":"WebGL2 with twgl, no scaling as the user resizes, orthographic projection","settings":{},"filenames":["index.html","index.css","index.js"]} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment