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

Compare commits

base: min:a34fb98ba57762092e992ef4f83cbfe00c9bf402
Branches Tags
min:main
..
compare: min:eee4bbfc15200be4b99d2cd6042417dc2e71de01
Branches Tags
min:main

2 Commits
a34fb98ba5 ... eee4bbfc15

Author SHA1 Message Date
minish eee4bbfc15
hi 2024-09-21 02:15:41 -04:00
minish 52f489c5b2
drawing cube 2024-09-17 21:45:26 -04:00
11 changed files with 305 additions and 92 deletions
Show Stats 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);
}

40
index.html
View File

@ -1,25 +1,31 @@
<!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/obj.js"></script>
<script src="/js/main.js" type="module" defer></script>
<body>
<canvas></canvas>
<script src="/main.js"></script>
</body>
</html>
<script>
0;
</script>
</head>
<body>
<!-- <canvas width="320" height="180"></canvas> -->
<canvas width="640" height="360"></canvas>
<!-- <canvas width="1920" height="1080"></canvas> -->
</body>
</html>

28
js/glmatrix.js Normal file
View File

File diff suppressed because one or more lines are too long

122
js/main.js Normal file
View File

@ -0,0 +1,122 @@
/* Canvas set-up */
const canvas = document.getElementsByTagName("canvas")[0];
const gl = canvas.getContext("webgl", { antialias: false, preserveDrawingBuffer: false });
var projectionMatrix = mat4.create();
mat4.perspective(
projectionMatrix,
(45 * Math.PI) / 180,
gl.drawingBufferWidth / gl.drawingBufferHeight,
0.1, 100.0
);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
/* 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(.1137, .1254, .1294, 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,
// ]);
// // 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 mdlSrc = await fetchText("/model/Shinji.obj");
const [verts, normals, indices] = parseObj(mdlSrc);
console.log(verts, normals, indices)
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 */
buffer(gl, verts, program, 'a_position', 3, gl.FLOAT);
buffer(gl, normals, program, 'a_normal', 3, gl.FLOAT);
/* Indices */
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
/* 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]
);
};
rotate3D(modelViewMatrix, 0.4, 0, 0);
/* Render */
var lastDraw = performance.now();
const draw = () => {
requestAnimationFrame(draw);
// 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 = (r2 * Math.PI) / 180;
rotate3D(modelViewMatrix, 0, r1, 0);
// Set uniforms
gl.uniformMatrix4fv(u_projectionMtx, false, projectionMatrix);
gl.uniformMatrix4fv(u_modelViewMtx, false, modelViewMatrix);
gl.uniform1f(u_clock, performance.now() % 4096);
// Draw triangles
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
}
/* Start */
requestAnimationFrame(draw);

60
js/obj.js Normal file
View File

@ -0,0 +1,60 @@
function parseObj(docStr) {
const positions = [];
const normals = [];
const indices = [];
const ops = {
v(str) {
var xyz = str.match(/[0-9.-]+/g).map(Number);
positions.push(xyz);
},
vn(str) {
var xyz = str.match(/[0-9.-]+/g).map(Number);
normals.push(xyz);
},
f(str) {
const ind = [];
for (var faceStr of str.split(" ")) {
var [iV, iVt, iVn] = faceStr.split("/").map(Number);
/* obj uses 1-based indices */
iV--; iVt--; iVn--;
ind.push({
iV: iV,
// iVt: iVt,
iVn: iVn,
});
}
/* triangulate. */
for (var i = 0; i < ind.length - 2; i++) {
indices.push(
ind[0].iV,
ind[i + 1].iV,
ind[i + 2].iV,
);
}
}
};
for (var line of docStr.split("\n")) { /* if you use crlf that sucks lol */
if (line == "" || line.startsWith("#")) {
continue;
}
var tks = line.split(" ");
var op = tks.shift();
var cont = tks.join(" ");
var opFunc = ops[op];
if (opFunc) opFunc(cont);
}
return [
new Float32Array(positions.flat()),
new Float32Array(normals.flat()),
new Uint16Array(indices),
]
}

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

7
shader/my.frag Normal file
View File

@ -0,0 +1,7 @@
precision mediump float;
uniform float u_clock;
void main() {
gl_FragColor = vec4(.9215, .8588, .698, 1.0);
}

11
shader/my.vert Normal file
View File

@ -0,0 +1,11 @@
precision mediump float;
attribute vec4 a_position;
uniform mat4 u_projectionMtx;
uniform mat4 u_modelViewMtx;
uniform float u_clock;
void main() {
gl_Position = u_projectionMtx * u_modelViewMtx * a_position;
}

15
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%);
min-height: 100vh;
min-width: 100vw;
box-sizing: border-box;
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;
}