Compare commits
2 Commits
a34fb98ba5
...
eee4bbfc15
| Author | SHA1 | Date |
|---|---|---|
 minish
|
eee4bbfc15
|
|
|
minish
|
52f489c5b2
|
|
|
@ -1,3 +0,0 @@
|
|||
void main() {
|
||||
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
|
||||
}
|
||||
20
index.html
20
index.html
|
|
@ -1,6 +1,7 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
|
|
@ -11,15 +12,20 @@
|
|||
|
||||
<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 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>
|
||||
|
||||
<script>
|
||||
0;
|
||||
</script>
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <canvas width="320" height="180"></canvas> -->
|
||||
<canvas width="640" height="360"></canvas>
|
||||
<!-- <canvas width="1920" height="1080"></canvas> -->
|
||||
</body>
|
||||
|
||||
<body>
|
||||
<canvas></canvas>
|
||||
<script src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||
|
|
@ -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),
|
||||
]
|
||||
}
|
||||
|
|
@ -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
59
main.js
|
|
@ -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.
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
precision mediump float;
|
||||
|
||||
uniform float u_clock;
|
||||
|
||||
void main() {
|
||||
gl_FragColor = vec4(.9215, .8588, .698, 1.0);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
13
style.css
13
style.css
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
attribute vec4 aVertexPosition;
|
||||
uniform mat4 uModelViewMatrix;
|
||||
uniform mat4 uProjectionMatrix;
|
||||
|
||||
void main() {
|
||||
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
|
||||
}
|
||||
Loading…
Reference in New Issue