min
/
glcanvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

drawing cube

This commit is contained in:
minish 2024-09-17 21:45:26 -04:00
parent a34fb98ba5
commit 52f489c5b2
Signed by: min
GPG Key ID: FEECFF24EF0CE9E9
10 changed files with 290 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
fragment.glsl
View File

@ -1,3 +0,0 @@
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}

35
index.html
View File

@ -1,25 +1,28 @@
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<head>
<link rel="stylesheet" href="/style.css" />
<meta name="darkreader-lock" />
<meta name="color-scheme" content="only light" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>gl canvas test</title>
<meta name="darkreader-lock" />
<meta name="color-scheme" content="only light" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js" integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ==" crossorigin="anonymous" defer></script>
<title>gl canvas test</title>
<script>
0;
</script>
</head>
<script src="/js/webgl.js"></script>
<script src="/js/glmatrix.js"></script>
<script src="/js/main.js" type="module" defer></script>
<script>
0;
</script>
</head>
<body>
<canvas></canvas>
</body>
<body>
<canvas></canvas>
<script src="/main.js"></script>
</body>
</html>

28
js/glmatrix.js Normal file
View File

File diff suppressed because one or more lines are too long

161
js/main.js Normal file
View File

@ -0,0 +1,161 @@
/* Canvas set-up */
const canvas = document.getElementsByTagName("canvas")[0];
const gl = canvas.getContext("webgl", { antialias: false, preserveDrawingBuffer: false });
var projectionMatrix = mat4.create();
const resizeCanvas = () => {
var width = gl.canvas.clientWidth;
var height = gl.canvas.clientHeight;
if (gl.canvas.width != width || gl.canvas.height != height) {
gl.canvas.width = width;
gl.canvas.height = height;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
mat4.perspective(
projectionMatrix,
(45 * Math.PI) / 180,
gl.canvas.clientWidth / gl.canvas.clientHeight,
0.1, 100.0
);
}
}
resizeCanvas();
/* Load shaders */
const fetchText = async url => (await fetch(url)).text();
const vsSrc = await fetchText("/shader/my.vert");
const fsSrc = await fetchText("/shader/my.frag");
const program = compile(gl, vsSrc, fsSrc);
gl.useProgram(program);
/* WebGL set-up */
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
/* Geometry */
var verts = new Float32Array([
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, -1.0, -1.0,
1.0, 1.0, -1.0,
-1.0, 1.0, -1.0,
-1.0, -1.0, -1.0,
]);
// var makeVerts = (szX, szZ) => {
// var fverts = new Float32Array([]);
// var findices = new Uint16Array([]);
// for (var x = 0; x <= szX; x += 1) {
// for (var z = 0; z <= szZ; z += 1) {
// var cverts = new Float32Array([
// 1.0, 1.0, 1.0,
// -1.0, 1.0, 1.0,
// -1.0, 0.0, 1.0,
// 1.0, 0.0, 1.0,
// 1.0, 0.0, -1.0,
// 1.0, 1.0, -1.0,
// -1.0, 1.0, -1.0,
// -1.0, 0.0, -1.0,
// ]);
// var cindices = new Uint8Array([
// 0, 1, 2, 0, 2, 3, // front
// 0, 3, 4, 0, 4, 5, // right
// 0, 5, 6, 0, 6, 1, // up
// 1, 6, 7, 1, 7, 2, // left
// 7, 4, 3, 7, 3, 2, // down
// 4, 7, 6, 4, 6, 5 // back
// ]).map;
// }
// }
// };
// var myVerts = makeVerts(5, 5);
// Indices of the vertices for each triangle
var indices = new Uint8Array([
0, 1, 2, 0, 2, 3, // front
0, 3, 4, 0, 4, 5, // right
0, 5, 6, 0, 6, 1, // up
1, 6, 7, 1, 7, 2, // left
7, 4, 3, 7, 3, 2, // down
4, 7, 6, 4, 6, 5 // back
]);
const modelViewMatrix = mat4.create();
mat4.translate(
modelViewMatrix,
modelViewMatrix,
[0.0, 0.0, -5.0]
);
/* Get attribs/uniforms */
var a_position = gl.getAttribLocation(program, 'a_position');
var u_projectionMtx = gl.getUniformLocation(program, 'u_projectionMtx');
var u_modelViewMtx = gl.getUniformLocation(program, 'u_modelViewMtx');
var u_clock = gl.getUniformLocation(program, 'u_clock');
/* Create buffers */
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, verts.BYTES_PER_ELEMENT * 3, 0);
gl.enableVertexAttribArray(a_position);
/* Utility function */
const rotate3D = (mtx, x, y, z) => {
mat4.rotate(
mtx, mtx,
x,
[1, 0, 0]
);
mat4.rotate(
mtx, mtx,
y,
[0, 1, 0]
);
mat4.rotate(
mtx, mtx,
z,
[0, 0, 1]
);
};
/* Render */
var lastDraw = performance.now();
const draw = () => {
requestAnimationFrame(draw);
// Resize if needed
resizeCanvas(gl);
// Rotate camera
var delta = performance.now() - lastDraw + 0.001;
lastDraw = performance.now();
var r1 = 1 / delta;
var r2 = r1 * 2;
r1 = (r1 * Math.PI) / 180;
r2 = (r1 * Math.PI) / 180;
// rotate3D(modelViewMatrix, r1, r2, r1);
// Set uniforms
gl.uniformMatrix4fv(u_projectionMtx, false, projectionMatrix);
gl.uniformMatrix4fv(u_modelViewMtx, false, modelViewMatrix);
gl.uniform1f(u_clock, performance.now() % 16384);
// Draw triangles
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_BYTE, 0);
}
/* Start */
requestAnimationFrame(draw);

45
js/webgl.js Normal file
View File

@ -0,0 +1,45 @@
// Compile a WebGL program from a vertex shader and a fragment shader
compile = (gl, vshader, fshader) => {
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, vshader);
gl.compileShader(vs);
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, fshader);
gl.compileShader(fs);
var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.useProgram(program);
console.log('vertex shader:', gl.getShaderInfoLog(vs) || 'OK');
console.log('fragment shader:', gl.getShaderInfoLog(fs) || 'OK');
console.log('program:', gl.getProgramInfoLog(program) || 'OK');
return program;
}
// Bind a data buffer to an attribute, fill it with data and enable it
buffer = (gl, data, program, attribute, size, type) => {
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
var a = gl.getAttribLocation(program, attribute);
gl.vertexAttribPointer(a, size, type, false, 0, 0);
gl.enableVertexAttribArray(a);
}
// Draw a box
drawBox = (gl, n, viewProjMatrix, u_MvpMatrix, u_NormalMatrix) => {
// Compute mvp matrix
g_mvpMatrix.set(viewProjMatrix);
g_mvpMatrix.multiply(g_modelMatrix);
gl.uniformMatrix4fv(u_MvpMatrix, false, g_mvpMatrix.elements);
// Compute inverse transform
g_normalMatrix.setInverseOf(g_modelMatrix);
g_normalMatrix.transpose();
gl.uniformMatrix4fv(u_NormalMatrix, false, g_normalMatrix.elements);
// Draw
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}

59
main.js
View File

@ -1,59 +0,0 @@
const canvas = document.getElementsByTagName("canvas")[0];
const gl = canvas.getContext("webgl");
function render() {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
requestAnimationFrame(render);
}
function makeShader(type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.log("shader compile failed:\n" + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
function makeShaderProgram(vertexSource, fragmentSource) {
const vertexShader = makeShader(gl.VERTEX_SHADER, vertexSource);
const fragmentShader = makeShader(gl.FRAGMENT_SHADER, fragmentSource);
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.log("program link failed:\n" + gl.getProgramInfoLog(shaderProgram));
gl.deleteProgram(shaderProgram);
return null;
}
return shaderProgram;
}
async function startWebGl() {
const vertexShader = await fetch("/vertex.glsl", (r) => r.text());
const fragmentShader = await fetch("/fragment.glsl", (r) => r.text());
const program = makeShaderProgram(vertexShader, fragmentShader);
requestAnimationFrame(render);
}
if (gl) {
await startWebGl();
} else {
console.log("no webgl");
// and use a static background probably.
}

15
shader/my.frag Normal file
View File

@ -0,0 +1,15 @@
precision mediump float;
uniform float u_clock;
vec3 hsv2rgb(vec3 c) {
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
void main() {
float color = mod(u_clock, 4096.0) / 4096.0;
gl_FragColor = vec4(hsv2rgb(vec3(color, 0.8, 1.0)), 1.0);
}

13
shader/my.vert Normal file
View File

@ -0,0 +1,13 @@
precision mediump float;
attribute vec4 a_position;
uniform mat4 u_projectionMtx;
uniform mat4 u_modelViewMtx;
uniform float u_clock;
void main() {
float v = u_clock / 4096.0;
gl_Position = u_projectionMtx * u_modelViewMtx * a_position * vec4(1.0, mix(1.0, v, step(0.0, a_position.y)), 1.0, 1.0);
}

13
style.css
View File

@ -6,13 +6,16 @@
}
body {
/* overflow: hidden; */
overflow: hidden;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100vw;
height: auto;
aspect-ratio: 16/9;
image-rendering: pixelated;
}

7
vertex.glsl
View File

@ -1,7 +0,0 @@
attribute vec4 aVertexPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main() {
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
}