2023-09-11 21:09:31 +00:00
|
|
|
import { Color, DirectionalLight, Mesh, Node, PerspectiveCamera, PointLight, Quaternion, Scene, Submesh, Vector3 } from "../src/data/index";
|
2023-08-16 19:42:38 +00:00
|
|
|
import { Renderer, degToRad } from "../src/oktaeder";
|
2023-08-15 20:18:08 +00:00
|
|
|
import "./style.css";
|
|
|
|
|
|
|
|
new EventSource("/esbuild").addEventListener("change", () => location.reload());
|
|
|
|
|
|
|
|
const canvas = document.createElement("canvas");
|
|
|
|
window.addEventListener("resize", onResize);
|
|
|
|
onResize.call(window);
|
|
|
|
|
|
|
|
const renderer = await Renderer.init(canvas);
|
|
|
|
|
|
|
|
const camera = new PerspectiveCamera({
|
2023-08-16 19:42:38 +00:00
|
|
|
verticalFovRad: degToRad(50),
|
2023-08-15 20:18:08 +00:00
|
|
|
nearPlane: 0.001,
|
|
|
|
farPlane: Infinity,
|
|
|
|
});
|
|
|
|
|
|
|
|
const vertexBuffer = renderer.createVertexBuffer({ vertexCount: 6 });
|
|
|
|
vertexBuffer.writeTypedArray(0, {
|
|
|
|
position: new Float32Array([
|
|
|
|
-1, 0, 0,
|
|
|
|
1, 0, 0,
|
|
|
|
0, -1, 0,
|
|
|
|
0, 1, 0,
|
|
|
|
0, 0, -1,
|
|
|
|
0, 0, 1,
|
|
|
|
]),
|
|
|
|
});
|
|
|
|
|
|
|
|
const indexBuffer = renderer.createIndexBuffer({ indexCount: 24, indexFormat: "uint16" });
|
|
|
|
indexBuffer.writeArray(0, [
|
|
|
|
0, 4, 3,
|
|
|
|
4, 1, 3,
|
|
|
|
1, 5, 3,
|
|
|
|
5, 0, 3,
|
|
|
|
4, 0, 2,
|
|
|
|
1, 4, 2,
|
|
|
|
5, 1, 2,
|
|
|
|
0, 5, 2,
|
|
|
|
]);
|
|
|
|
|
|
|
|
const submesh: Submesh = { start: 0, length: 24 };
|
|
|
|
|
|
|
|
const mesh = new Mesh({ vertexBuffer, indexBuffer, submeshes: [submesh] });
|
|
|
|
|
2023-09-11 21:09:31 +00:00
|
|
|
const material = renderer.createMaterial({
|
2023-08-15 20:18:08 +00:00
|
|
|
baseColor: Color.white(),
|
|
|
|
roughness: 0.5,
|
2023-08-16 19:42:38 +00:00
|
|
|
metallic: 1,
|
2023-08-15 20:18:08 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const node = new Node({ mesh, materials: [material] });
|
|
|
|
|
|
|
|
const scene = new Scene({
|
|
|
|
nodes: [
|
|
|
|
node,
|
|
|
|
new Node({
|
|
|
|
translation: new Vector3(-1, 1, 0),
|
|
|
|
light: new PointLight({ color: new Color(1, 0, 0) }),
|
|
|
|
}),
|
|
|
|
new Node({
|
|
|
|
translation: new Vector3(0, 1, -1),
|
|
|
|
light: new PointLight({ color: new Color(0, 1, 0) }),
|
|
|
|
}),
|
|
|
|
new Node({
|
|
|
|
translation: new Vector3(1, 1, 0),
|
|
|
|
light: new PointLight({ color: new Color(0, 0, 1) }),
|
|
|
|
}),
|
|
|
|
new Node({
|
|
|
|
translation: new Vector3(0, 1, 1),
|
|
|
|
light: new PointLight({ color: new Color(1, 1, 0) }),
|
|
|
|
}),
|
2023-08-16 19:42:38 +00:00
|
|
|
new Node({
|
|
|
|
rotation: Quaternion.fromRotationYZ(degToRad(-90)),
|
|
|
|
light: new DirectionalLight({ color: new Color(0.5, 0.5, 0.5) }),
|
|
|
|
}),
|
2023-08-15 20:18:08 +00:00
|
|
|
new Node({
|
|
|
|
translation: new Vector3(0, 0.8, -3),
|
2023-08-16 19:42:38 +00:00
|
|
|
rotation: Quaternion.fromRotationYZ(degToRad(15)),
|
2023-08-15 20:18:08 +00:00
|
|
|
camera,
|
|
|
|
}),
|
|
|
|
],
|
|
|
|
ambientLight: new Color(0.01, 0.01, 0.01),
|
|
|
|
});
|
|
|
|
|
|
|
|
function onResize(this: Window) {
|
|
|
|
canvas.width = this.innerWidth;
|
|
|
|
canvas.height = this.innerHeight;
|
|
|
|
}
|
|
|
|
|
2023-08-16 19:42:38 +00:00
|
|
|
const _quaternion = Quaternion.identity();
|
2023-08-15 20:18:08 +00:00
|
|
|
|
2023-08-16 19:42:38 +00:00
|
|
|
function draw(timeMs: number) {
|
|
|
|
const time = 0.001 * timeMs;
|
|
|
|
node.setRotation(_quaternion.setRotationZX(-0.5 * time));
|
2023-08-15 20:18:08 +00:00
|
|
|
|
|
|
|
renderer.render(scene, camera);
|
|
|
|
requestAnimationFrame(draw);
|
|
|
|
}
|
|
|
|
|
|
|
|
requestAnimationFrame(draw);
|
|
|
|
|
|
|
|
document.body.appendChild(canvas);
|