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

initial commit

This commit is contained in:
minish 2024-08-05 23:29:12 -04:00
commit a34fb98ba5
Signed by: min
SSH Key Fingerprint: SHA256:NFjjdbkd6u7aoMlcrDCVvz6o2UBtlAuPm8IQ2vhZ3Fg
5 changed files with 112 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
fragment.glsl Normal file
View File

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

25
index.html Normal file
View File

@ -0,0 +1,25 @@
<!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" />
<meta name="darkreader-lock" />
<meta name="color-scheme" content="only light" />
<title>gl canvas test</title>
<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>
<script>
0;
</script>
</head>
<body>
<canvas></canvas>
<script src="/main.js"></script>
</body>
</html>

59
main.js Normal file
View File

@ -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.
}

18
style.css Normal file
View File

@ -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%;
}

7
vertex.glsl Normal file
View File

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