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

hi

This commit is contained in:
minish 2024-09-21 02:15:41 -04:00
parent 52f489c5b2
commit eee4bbfc15
Signed by: min
GPG Key ID: FEECFF24EF0CE9E9
6 changed files with 111 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -14,6 +14,7 @@
<script src="/js/webgl.js"></script> <script src="/js/webgl.js"></script>
<script src="/js/glmatrix.js"></script> <script src="/js/glmatrix.js"></script>
<script src="/js/obj.js"></script>
<script src="/js/main.js" type="module" defer></script> <script src="/js/main.js" type="module" defer></script>
<script> <script>
@ -22,7 +23,9 @@
</head> </head>
<body> <body>
<canvas></canvas> <!-- <canvas width="320" height="180"></canvas> -->
<canvas width="640" height="360"></canvas>
<!-- <canvas width="1920" height="1080"></canvas> -->
</body> </body>
</html> </html>

93
js/main.js
View File

@ -3,26 +3,14 @@ const canvas = document.getElementsByTagName("canvas")[0];
const gl = canvas.getContext("webgl", { antialias: false, preserveDrawingBuffer: false }); const gl = canvas.getContext("webgl", { antialias: false, preserveDrawingBuffer: false });
var projectionMatrix = mat4.create(); var projectionMatrix = mat4.create();
const resizeCanvas = () => { mat4.perspective(
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, projectionMatrix,
(45 * Math.PI) / 180, (45 * Math.PI) / 180,
gl.canvas.clientWidth / gl.canvas.clientHeight, gl.drawingBufferWidth / gl.drawingBufferHeight,
0.1, 100.0 0.1, 100.0
); );
}
}
resizeCanvas(); gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
/* Load shaders */ /* Load shaders */
const fetchText = async url => (await fetch(url)).text(); const fetchText = async url => (await fetch(url)).text();
@ -33,60 +21,35 @@ const program = compile(gl, vsSrc, fsSrc);
gl.useProgram(program); gl.useProgram(program);
/* WebGL set-up */ /* WebGL set-up */
gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearColor(.1137, .1254, .1294, 1.0);
gl.enable(gl.DEPTH_TEST); gl.enable(gl.DEPTH_TEST);
/* Geometry */ // /* Geometry */
var verts = new Float32Array([ // 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, 1.0, 1.0, // -1.0, 1.0, 1.0,
// -1.0, 0.0, 1.0, // -1.0, -1.0, 1.0,
// 1.0, 0.0, 1.0, // 1.0, -1.0, 1.0,
// 1.0, 0.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, 0.0, -1.0, // -1.0, -1.0, -1.0,
// ]); // ]);
// var cindices = new Uint8Array([ // // Indices of the vertices for each triangle
// var indices = new Uint8Array([
// 0, 1, 2, 0, 2, 3, // front // 0, 1, 2, 0, 2, 3, // front
// 0, 3, 4, 0, 4, 5, // right // 0, 3, 4, 0, 4, 5, // right
// 0, 5, 6, 0, 6, 1, // up // 0, 5, 6, 0, 6, 1, // up
// 1, 6, 7, 1, 7, 2, // left // 1, 6, 7, 1, 7, 2, // left
// 7, 4, 3, 7, 3, 2, // down // 7, 4, 3, 7, 3, 2, // down
// 4, 7, 6, 4, 6, 5 // back // 4, 7, 6, 4, 6, 5 // back
// ]).map; // ]);
// }
// }
// };
// var myVerts = makeVerts(5, 5); const mdlSrc = await fetchText("/model/Shinji.obj");
const [verts, normals, indices] = parseObj(mdlSrc);
// Indices of the vertices for each triangle console.log(verts, normals, indices)
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(); const modelViewMatrix = mat4.create();
mat4.translate( mat4.translate(
@ -102,14 +65,13 @@ var u_modelViewMtx = gl.getUniformLocation(program, 'u_modelViewMtx');
var u_clock = gl.getUniformLocation(program, 'u_clock'); var u_clock = gl.getUniformLocation(program, 'u_clock');
/* Create buffers */ /* Create buffers */
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); buffer(gl, verts, program, 'a_position', 3, gl.FLOAT);
gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW); buffer(gl, normals, program, 'a_normal', 3, gl.FLOAT);
/* Indices */
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer()); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); 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 */ /* Utility function */
const rotate3D = (mtx, x, y, z) => { const rotate3D = (mtx, x, y, z) => {
mat4.rotate( mat4.rotate(
@ -129,14 +91,13 @@ const rotate3D = (mtx, x, y, z) => {
); );
}; };
rotate3D(modelViewMatrix, 0.4, 0, 0);
/* Render */ /* Render */
var lastDraw = performance.now(); var lastDraw = performance.now();
const draw = () => { const draw = () => {
requestAnimationFrame(draw); requestAnimationFrame(draw);
// Resize if needed
resizeCanvas(gl);
// Rotate camera // Rotate camera
var delta = performance.now() - lastDraw + 0.001; var delta = performance.now() - lastDraw + 0.001;
lastDraw = performance.now(); lastDraw = performance.now();
@ -144,17 +105,17 @@ const draw = () => {
var r1 = 1 / delta; var r1 = 1 / delta;
var r2 = r1 * 2; var r2 = r1 * 2;
r1 = (r1 * Math.PI) / 180; r1 = (r1 * Math.PI) / 180;
r2 = (r1 * Math.PI) / 180; r2 = (r2 * Math.PI) / 180;
// rotate3D(modelViewMatrix, r1, r2, r1); rotate3D(modelViewMatrix, 0, r1, 0);
// Set uniforms // Set uniforms
gl.uniformMatrix4fv(u_projectionMtx, false, projectionMatrix); gl.uniformMatrix4fv(u_projectionMtx, false, projectionMatrix);
gl.uniformMatrix4fv(u_modelViewMtx, false, modelViewMatrix); gl.uniformMatrix4fv(u_modelViewMtx, false, modelViewMatrix);
gl.uniform1f(u_clock, performance.now() % 16384); gl.uniform1f(u_clock, performance.now() % 4096);
// Draw triangles // Draw triangles
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_BYTE, 0); gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
} }
/* Start */ /* Start */

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),
]
}

10
shader/my.frag
View File

@ -2,14 +2,6 @@ precision mediump float;
uniform float u_clock; 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() { void main() {
float color = mod(u_clock, 4096.0) / 4096.0; gl_FragColor = vec4(.9215, .8588, .698, 1.0);
gl_FragColor = vec4(hsv2rgb(vec3(color, 0.8, 1.0)), 1.0);
} }

4
shader/my.vert
View File

@ -7,7 +7,5 @@ uniform mat4 u_modelViewMtx;
uniform float u_clock; uniform float u_clock;
void main() { void main() {
float v = u_clock / 4096.0; gl_Position = u_projectionMtx * u_modelViewMtx * a_position;
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);
} }

6
style.css
View File

@ -14,8 +14,8 @@ canvas {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 100vw; min-height: 100vh;
height: auto; min-width: 100vw;
aspect-ratio: 16/9; box-sizing: border-box;
image-rendering: pixelated; image-rendering: pixelated;
} }