From a34fb98ba57762092e992ef4f83cbfe00c9bf402 Mon Sep 17 00:00:00 2001 From: min Date: Mon, 5 Aug 2024 23:29:12 -0400 Subject: [PATCH] initial commit --- fragment.glsl | 3 +++ index.html | 25 ++++++++++++++++++++++ main.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 18 ++++++++++++++++ vertex.glsl | 7 ++++++ 5 files changed, 112 insertions(+) create mode 100644 fragment.glsl create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css create mode 100644 vertex.glsl diff --git a/fragment.glsl b/fragment.glsl new file mode 100644 index 0000000..18cf875 --- /dev/null +++ b/fragment.glsl @@ -0,0 +1,3 @@ +void main() { + gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..10048e2 --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + gl canvas test + + + + + + + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..308d1af --- /dev/null +++ b/main.js @@ -0,0 +1,59 @@ +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. +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..92ec650 --- /dev/null +++ b/style.css @@ -0,0 +1,18 @@ +* { + margin: 0; + padding: 0; + + box-sizing: border-box; +} + +body { + /* overflow: hidden; */ +} + +canvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} diff --git a/vertex.glsl b/vertex.glsl new file mode 100644 index 0000000..2559f9a --- /dev/null +++ b/vertex.glsl @@ -0,0 +1,7 @@ +attribute vec4 aVertexPosition; +uniform mat4 uModelViewMatrix; +uniform mat4 uProjectionMatrix; + +void main() { + gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; +}