noe/3d
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

001 done, platform is exists

Browse source
This commit is contained in:
41666 2023-10-01 01:46:47 -04:00
parent 3e2e41b86a
commit 3c91f0b639
9 changed files with 302 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

25
generators/work.html.template
View file

@ -2,20 +2,21 @@
<meta charset="utf-8" />
<title>com.mekanoe.art // ##name##</title>
<style>
canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: -1;
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="index.css" />
<main>
<canvas id="canvas"></canvas>
<canvas id="canvas" width="1280" height="720"></canvas>
</main>
<script src="/platform.js"></script>
<script src="/##name##.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.min.js"
integrity="sha512-cR3oS5mKRWD+38vYi1CNJk1DLpi104ovuQBuVv9p7nNxeqzSNiHzlboK2BZQybmpTi1QNnQ5unYajpURcMjeZQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/##name##.js" type="module"></script>

25
html/001-platform-provenance.html
View file

@ -2,20 +2,21 @@
<meta charset="utf-8" />
<title>com.mekanoe.art // 001-platform-provenance</title>
<style>
canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: -1;
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="index.css" />
<main>
<canvas id="canvas"></canvas>
<canvas id="canvas" width="1280" height="720"></canvas>
</main>
<script src="/platform.js"></script>
<script src="/001-platform-provenance.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.min.js"
integrity="sha512-cR3oS5mKRWD+38vYi1CNJk1DLpi104ovuQBuVv9p7nNxeqzSNiHzlboK2BZQybmpTi1QNnQ5unYajpURcMjeZQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/001-platform-provenance.js" type="module"></script>

58
html/001-platform-provenance.js
View file

@ -1,3 +1,57 @@
main(() => {
console.log("Hello, world!");
import { main } from "./platform.js";
import { Shader } from "./shader.js";
import { BasicPlane } from "./basic-plane.js";
main((gl, core) => {
const shader = new Shader(gl)
.attach(
gl.VERTEX_SHADER,
`
attribute vec4 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
varying highp vec2 vTextureCoord;
void main() {
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
vTextureCoord = aTextureCoord;
}
`
)
.attach(
gl.FRAGMENT_SHADER,
`
uniform lowp float uTime;
uniform lowp float uSinTime;
uniform lowp float uCosTime;
varying highp vec2 vTextureCoord;
void main() {
lowp float slowedSinTime = sin(uTime*0.001)*0.5+0.5;
gl_FragColor = vec4(vTextureCoord, slowedSinTime, 1.0);
}
`
)
.link();
const plane = new BasicPlane(gl, core);
plane.attachShader(shader);
const render = () => {
core.clear();
plane.draw2D();
if (gl.getError() !== gl.NO_ERROR) {
throw new Error("WebGL error");
}
requestAnimationFrame(render);
};
requestAnimationFrame(render);
});

22
html/basic-plane.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>com.mekanoe.art // basic-plane</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="index.css" />
<main>
<canvas id="canvas" width="1280" height="720"></canvas>
</main>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.min.js"
integrity="sha512-cR3oS5mKRWD+38vYi1CNJk1DLpi104ovuQBuVv9p7nNxeqzSNiHzlboK2BZQybmpTi1QNnQ5unYajpURcMjeZQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/basic-plane.js" type="module"></script>

62
html/basic-plane.js Normal file
View file

@ -0,0 +1,62 @@
export class BasicPlane {
constructor(gl, core) {
this.gl = gl;
this.core = core;
this.vertexPositions = new Float32Array([
-1.0, -1.0, +1.0, -1.0, -1.0, +1.0, +1.0, +1.0,
]);
this.positionBuffer = this.initBuffer(this.vertexPositions);
this.textureBuffer = this.initBuffer(
new Float32Array([0, 0, 1, 0, 0, 1, 1, 1])
);
}
initBuffer(data, draw = this.gl.STATIC_DRAW) {
const buffer = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(data), draw);
return buffer;
}
attachShader(shader) {
this.shader = shader;
this.vertexPosition = shader.location("aVertexPosition");
this.textureCoord = shader.location("aTextureCoord");
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
this.gl.vertexAttribPointer(
this.vertexPosition,
2,
this.gl.FLOAT,
false,
0,
0
);
this.gl.enableVertexAttribArray(this.vertexPosition);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.textureBuffer);
this.gl.vertexAttribPointer(
this.textureCoord,
2,
this.gl.FLOAT,
false,
0,
0
);
this.gl.enableVertexAttribArray(this.textureCoord);
return this;
}
draw2D() {
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
this.shader.activate(this.core.projectionMatrix, this.core.modelViewMatrix);
this.gl.drawArrays(
this.gl.TRIANGLE_STRIP,
0,
this.vertexPositions.length / 2
);
}
}

4
html/index.html
View file

@ -51,7 +51,9 @@
</header>
<section id="works">
<ul>
<li><a href="/001-platform-provenance">./001-platform-provenance</a></li>
<li><a href="/shader">./shader</a></li>
<li><a href="/001-platform-provenance">./001-platform-provenance</a></li>
<li><a href="/basic-plane">./basic-plane</a></li>
</ul>
</section>
</main>

44
html/platform.js
View file

@ -1,5 +1,11 @@
function main(next) {
export const clear = (gl) => {};
export const main = (next) => {
const canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Initialize the GL context
const gl = canvas.getContext("webgl");
@ -11,10 +17,34 @@ function main(next) {
return;
}
// Set clear color to black, fully opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
gl.clear(gl.COLOR_BUFFER_BIT);
const core = renderingCore(gl);
core.clear();
next();
}
next(gl, core);
};
const renderingCore = (gl) => {
const fieldOfView = (10 * Math.PI) / 180; // in radians
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const zNear = 0.1;
const zFar = 100.0;
const projectionMatrix = glMatrix.mat4.create();
glMatrix.mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
const modelViewMatrix = glMatrix.mat4.create();
glMatrix.mat4.translate(modelViewMatrix, modelViewMatrix, [-0.0, 0.0, -6.0]);
return {
projectionMatrix,
modelViewMatrix,
clear() {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
gl.clearDepth(1.0); // Clear everything
gl.enable(gl.DEPTH_TEST); // Enable depth testing
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
},
};
};
export const glMatrix = window.glMatrix;

22
html/shader.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>com.mekanoe.art // shader</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="index.css" />
<main>
<canvas id="canvas" width="1280" height="720"></canvas>
</main>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.min.js"
integrity="sha512-cR3oS5mKRWD+38vYi1CNJk1DLpi104ovuQBuVv9p7nNxeqzSNiHzlboK2BZQybmpTi1QNnQ5unYajpURcMjeZQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/shader.js" type="module"></script>

74
html/shader.js Normal file
View file

@ -0,0 +1,74 @@
export class Shader {
constructor(gl) {
this.gl = gl;
this.program = gl.createProgram();
this.startTime = Date.now();
}
attach(type, source) {
console.log("attaching shader", { type, source });
const shader = this.gl.createShader(type);
this.gl.shaderSource(shader, source);
this.gl.compileShader(shader);
if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
throw new Error(
"An error occurred compiling the shaders: " +
this.gl.getShaderInfoLog(shader)
);
}
this.gl.attachShader(this.program, shader);
return this;
}
link() {
this.gl.linkProgram(this.program);
if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
throw new Error(
"Unable to initialize the shader program: " +
this.gl.getProgramInfoLog(this.program)
);
}
console.log("shader linked");
return this;
}
location(name) {
if (name[0] === "a") {
return this.gl.getAttribLocation(this.program, name);
} else if (name[0] === "u") {
return this.gl.getUniformLocation(this.program, name);
}
}
updateTime() {
const now = Date.now();
const time = now - this.startTime;
const sinTime = Math.sin(time);
const cosTime = Math.cos(time);
this.gl.uniform1f(this.location("uTime"), time);
this.gl.uniform1f(this.location("uSinTime"), sinTime);
this.gl.uniform1f(this.location("uCosTime"), cosTime);
}
activate(projectionMatrix, modelViewMatrix) {
this.gl.useProgram(this.program);
this.gl.uniformMatrix4fv(
this.location("uProjectionMatrix"),
false,
projectionMatrix
);
this.gl.uniformMatrix4fv(
this.location("uModelViewMatrix"),
false,
modelViewMatrix
);
this.updateTime();
}
}