nevermind, statics don't rly suck
This commit is contained in:
parent
adc3a38395
commit
428246706f
13 changed files with 532 additions and 5 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -173,5 +173,3 @@ dist
|
|||
|
||||
# Finder (MacOS) folder config
|
||||
.DS_Store
|
||||
|
||||
html
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import indexTemplate from "./generators/index.html.txt";
|
||||
import workTemplate from "./generators/work.html.txt";
|
||||
import readmeTemplate from "./generators/README.md.txt";
|
||||
import indexTemplate from "./templates/index.html.txt";
|
||||
import workTemplate from "./templates/work.html.txt";
|
||||
import readmeTemplate from "./templates/README.md.txt";
|
||||
import chalk from "chalk";
|
||||
|
||||
export const generate = async (works: string[]) => {
|
||||
|
|
|
|||
31
html/001-platform-provenance/index.html
Normal file
31
html/001-platform-provenance/index.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>com.mekanoe.art // 001-platform-provenance</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="work.css" />
|
||||
<main>
|
||||
<canvas id="canvas" width="1280" height="720"></canvas>
|
||||
<div id="telemetry">XX.X FPS (XX.X ms)</div>
|
||||
</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="/001-platform-provenance/main.js" type="module"></script>
|
||||
62
html/001-platform-provenance/main.js
Normal file
62
html/001-platform-provenance/main.js
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import {
|
||||
App,
|
||||
BasicPlane,
|
||||
Shader
|
||||
} from "../chunk-2775206da9dea9ea.js";
|
||||
|
||||
// src/001-platform-provenance/main.ts
|
||||
var app2 = new App({ fov: 20 });
|
||||
var gl = app2.gl;
|
||||
var shader2 = new Shader(app2).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, `
|
||||
precision highp float;
|
||||
|
||||
uniform float uTime;
|
||||
uniform float uSinTime;
|
||||
uniform float uCosTime;
|
||||
|
||||
varying highp vec2 vTextureCoord;
|
||||
|
||||
vec3 rgb2hsv(vec3 c) {
|
||||
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
|
||||
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
|
||||
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
|
||||
|
||||
float d = q.x - min(q.w, q.y);
|
||||
float e = 1.0e-10;
|
||||
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
|
||||
}
|
||||
|
||||
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() {
|
||||
float zComponent = uSinTime * 0.001 * 0.5 + 0.5;
|
||||
vec3 hsv = rgb2hsv(vec3(vTextureCoord, zComponent));
|
||||
hsv.x += uTime * 0.0001;
|
||||
hsv.y = 1.0;
|
||||
hsv.z = 1.0;
|
||||
vec3 rgb = hsv2rgb(hsv);
|
||||
|
||||
gl_FragColor = vec4(rgb, 1.0);
|
||||
gl_FragColor = clamp(gl_FragColor, 0.0, 1.0);
|
||||
}
|
||||
`).link();
|
||||
var plane = new BasicPlane(app2);
|
||||
plane.attachShader(shader2);
|
||||
app2.loop();
|
||||
31
html/002-enter-the-third/index.html
Normal file
31
html/002-enter-the-third/index.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>com.mekanoe.art // 002-enter-the-third</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="work.css" />
|
||||
<main>
|
||||
<canvas id="canvas" width="1280" height="720"></canvas>
|
||||
<div id="telemetry">XX.X FPS (XX.X ms)</div>
|
||||
</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="/002-enter-the-third/main.js" type="module"></script>
|
||||
27
html/002-enter-the-third/main.js
Normal file
27
html/002-enter-the-third/main.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import {
|
||||
App,
|
||||
BasicPlane,
|
||||
Shader
|
||||
} from "../chunk-2775206da9dea9ea.js";
|
||||
|
||||
// src/002-enter-the-third/main.ts
|
||||
var app2 = new App({ fov: 20 });
|
||||
var gl = app2.gl;
|
||||
var shader2 = new Shader(app2).attach(gl.VERTEX_SHADER, `
|
||||
attribute vec4 aVertexPosition;
|
||||
attribute vec2 aTextureCoord;
|
||||
|
||||
uniform mat4 uModelViewMatrix;
|
||||
uniform mat4 uProjectionMatrix;
|
||||
|
||||
void main() {
|
||||
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
|
||||
}
|
||||
`).attach(gl.FRAGMENT_SHADER, `
|
||||
void main() {
|
||||
gl_FragColor = vec4(1.0);
|
||||
}
|
||||
`).link();
|
||||
var plane = new BasicPlane(app2);
|
||||
plane.attachShader(shader2);
|
||||
app2.loop();
|
||||
225
html/chunk-2775206da9dea9ea.js
Normal file
225
html/chunk-2775206da9dea9ea.js
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
// src/shader.js
|
||||
class Shader {
|
||||
constructor(app) {
|
||||
this.gl = app.gl;
|
||||
this.app = app;
|
||||
this.program = this.gl.createProgram();
|
||||
}
|
||||
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 time = this.app.now();
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
// src/object.js
|
||||
class Object {
|
||||
constructor(app) {
|
||||
this.gl = app.gl;
|
||||
this.app = app;
|
||||
this.vertexPositions = new Float32Array([]);
|
||||
this.positionBuffer = null;
|
||||
this.textureBuffer = null;
|
||||
}
|
||||
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.app.projectionMatrix, this.app.modelViewMatrix);
|
||||
this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, this.vertexPositions.length / 2);
|
||||
}
|
||||
draw3D() {
|
||||
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
|
||||
this.shader.activate(this.app.projectionMatrix, this.app.modelViewMatrix);
|
||||
this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, this.vertexPositions.length / 3);
|
||||
}
|
||||
}
|
||||
|
||||
// src/basic-plane.js
|
||||
class BasicPlane extends Object {
|
||||
constructor(app) {
|
||||
super(app);
|
||||
this.vertexPositions = new Float32Array([
|
||||
-1,
|
||||
-1,
|
||||
1,
|
||||
-1,
|
||||
-1,
|
||||
1,
|
||||
1,
|
||||
1
|
||||
]);
|
||||
this.positionBuffer = this.initBuffer(this.vertexPositions);
|
||||
this.textureBuffer = this.initBuffer(new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]));
|
||||
this.app.onUpdate(() => this.draw2D());
|
||||
}
|
||||
}
|
||||
|
||||
// src/telemetry.js
|
||||
class Telemetry {
|
||||
constructor(app, selector = "#telemetry") {
|
||||
this.app = app;
|
||||
this.el = document.querySelector(selector);
|
||||
if (this.el && location.search.includes("telemetry")) {
|
||||
this.el.style.display = "block";
|
||||
this.app.onAfterUpdate(() => this.onAfterUpdate());
|
||||
}
|
||||
this.frameTimes = [];
|
||||
this.maxFrameTimes = 100;
|
||||
this.lastFrameTime = 0;
|
||||
}
|
||||
insertTime(time) {
|
||||
this.frameTimes.push(time);
|
||||
if (this.frameTimes.length > this.maxFrameTimes) {
|
||||
this.frameTimes.shift();
|
||||
}
|
||||
}
|
||||
onAfterUpdate() {
|
||||
const frameTime = this.app.now() - this.lastFrameTime;
|
||||
this.insertTime(frameTime);
|
||||
const averageFrameTime = this.frameTimes.reduce((a, b) => a + b, 0) / this.frameTimes.length;
|
||||
const framesPerSecond = 1000 / averageFrameTime;
|
||||
this.el.innerHTML = `
|
||||
${framesPerSecond.toFixed(1)} FPS (${averageFrameTime.toFixed(3)} ms)<br />
|
||||
bU: ${this.app.registry.onBeforeUpdate.length} | U: ${this.app.registry.onUpdate.length} | aU: ${this.app.registry.onAfterUpdate.length}
|
||||
`;
|
||||
this.lastFrameTime = this.app.now();
|
||||
}
|
||||
}
|
||||
|
||||
// src/app.js
|
||||
class App {
|
||||
constructor(config = {
|
||||
fov: 45
|
||||
}) {
|
||||
this._now = 0;
|
||||
this.registry = {
|
||||
onStart: [],
|
||||
onUpdate: [],
|
||||
onBeforeUpdate: [],
|
||||
onAfterUpdate: []
|
||||
};
|
||||
this.config = config;
|
||||
this.canvas = document.querySelector("canvas");
|
||||
this.canvas.width = window.innerWidth;
|
||||
this.canvas.height = window.innerHeight;
|
||||
this.gl = this.canvas.getContext("webgl2");
|
||||
if (this.gl === null) {
|
||||
document.querySelector("main").innerHTML = `<div><i>your browser didn't let me set up webgl</i></div>`;
|
||||
throw new Error("Unable to initialize WebGL. Your browser or machine may not support it.");
|
||||
}
|
||||
const gl = this.gl;
|
||||
const fieldOfView = this.config.fov * Math.PI / 180;
|
||||
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
|
||||
const zNear = 0.1;
|
||||
const zFar = 100;
|
||||
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, -6]);
|
||||
this.projectionMatrix = projectionMatrix;
|
||||
this.modelViewMatrix = modelViewMatrix;
|
||||
this.clear();
|
||||
this.onBeforeUpdate(() => this.clear());
|
||||
this.telemetry = new Telemetry(this);
|
||||
}
|
||||
clear() {
|
||||
const gl = this.gl;
|
||||
gl.clearColor(0, 0, 0, 1);
|
||||
gl.clearDepth(1);
|
||||
gl.enable(gl.DEPTH_TEST);
|
||||
gl.depthFunc(gl.LEQUAL);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
}
|
||||
onStart(fn) {
|
||||
this.registry.onStart.push(fn);
|
||||
}
|
||||
onUpdate(fn) {
|
||||
this.registry.onUpdate.push(fn);
|
||||
}
|
||||
onBeforeUpdate(fn) {
|
||||
this.registry.onBeforeUpdate.push(fn);
|
||||
}
|
||||
onAfterUpdate(fn) {
|
||||
this.registry.onAfterUpdate.push(fn);
|
||||
}
|
||||
start() {
|
||||
this.registry.onStart.forEach((fn) => fn(this));
|
||||
}
|
||||
update() {
|
||||
this.registry.onBeforeUpdate.forEach((fn) => fn(this));
|
||||
this.registry.onUpdate.forEach((fn) => fn(this));
|
||||
this.registry.onAfterUpdate.forEach((fn) => fn(this));
|
||||
}
|
||||
oneShot() {
|
||||
requestAnimationFrame((now) => {
|
||||
this._now = now;
|
||||
this.start();
|
||||
this.update();
|
||||
});
|
||||
}
|
||||
loop() {
|
||||
const run = (now) => {
|
||||
this._now = now;
|
||||
this.update();
|
||||
requestAnimationFrame(run);
|
||||
};
|
||||
requestAnimationFrame(run);
|
||||
}
|
||||
now() {
|
||||
return this._now;
|
||||
}
|
||||
}
|
||||
|
||||
export { Shader, BasicPlane, App };
|
||||
52
html/index.css
Normal file
52
html/index.css
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
font-size: 2.5rem;
|
||||
align-items: center;
|
||||
|
||||
& .subtext {
|
||||
font-size: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
color: hsl(39, 68.6%, 31.2%);
|
||||
& a:hover {
|
||||
color: hsl(39, 100%, 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-left: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
& a {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: hsl(39, 100%, 80%);
|
||||
& a {
|
||||
text-decoration-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "▸";
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
89
html/index.html
Normal file
89
html/index.html
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>com.mekanoe.art //</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
font-family: "Atkinson Hyperlegible", sans-serif;
|
||||
background-color: hsl(32, 19%, 14%);
|
||||
color: hsl(39, 75%, 51%);
|
||||
line-height: 1.5;
|
||||
text-shadow: 1px 1px 3px hsl(38, 45%, 22%);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
font-size: 2.5rem;
|
||||
align-items: center;
|
||||
|
||||
& .subtext {
|
||||
font-size: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
color: hsl(39, 68.6%, 31.2%);
|
||||
& a:hover {
|
||||
color: hsl(39, 100%, 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-left: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
& a {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: hsl(39, 100%, 80%);
|
||||
& a {
|
||||
text-decoration-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "â¸";
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<header>
|
||||
<div>com.mekanoe.art //</div>
|
||||
<div class="subtext">
|
||||
<< noeidelon >>
|
||||
<a href="https://github.com/mekanoe/noeidelon">[github]</a>
|
||||
<a href="https://sapphic.engineer/noe" rel="me">[fedi]</a>
|
||||
<br />a collection of 3D works
|
||||
</div>
|
||||
</header>
|
||||
<section id="works">
|
||||
<ul>
|
||||
<li><a href="/002-enter-the-third">./002-enter-the-third</a></li>
|
||||
<li><a href="/001-platform-provenance">./001-platform-provenance</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
12
html/work.css
Normal file
12
html/work.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
#telemetry {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
font: monospace;
|
||||
z-index: 100;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
display: none;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue