Skip to content

Instantly share code, notes, and snippets.

@haehn

haehn/taichijs.html

Created December 1, 2023 15:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save haehn/7164c13d4389aade5dbf9d4ad34f047f to your computer and use it in GitHub Desktop.
Save haehn/7164c13d4389aade5dbf9d4ad34f047f to your computer and use it in GitHub Desktop.
Download ZIP
Hello Triangle Taichi.js!
Raw
taichijs.html
<html>
<head>
<title>Taichi.js</title>
<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
#c { width: 100%; height: 100%; }
</style>
<script src="https://unpkg.com/taichi.js/dist/taichi.umd.js"></script>
<script>
window.onload = async function() {
await ti.init();
let htmlCanvas = document.getElementById('c');
htmlCanvas.width = 720;
htmlCanvas.height = 360;
let VBO = ti.field(ti.types.vector(ti.f32, 3), 3);
let IBO = ti.field(ti.i32, 3);
let aspectRatio = htmlCanvas.width / htmlCanvas.height;
let target = ti.canvasTexture(htmlCanvas);
let depth = ti.depthTexture([htmlCanvas.width, htmlCanvas.height]);
ti.addToKernelScope({ VBO, target, IBO, aspectRatio, depth });
await VBO.fromArray([
[-1, 0, 0],
[1, 0, 0],
[0, 1, 0]
]);
await IBO.fromArray([
0, 1, 2
]);
let render = ti.kernel(() => {
let center = [0., 0., 0.];
let eye = [0, 0, 3];
let view = ti.lookAt(eye, center, [0.0, 1.0, 0.0]);
let proj = ti.perspective(70.0, aspectRatio, 0.1, 100);
let mvp = proj.matmul(view);
ti.clearColor(target, [0., 0., 0., 1]);
ti.useDepth(depth);
for (let v of ti.inputVertices(VBO, IBO)) {
let pos = mvp.matmul([v.x, v.y, v.z, 1.0]);
ti.outputPosition(pos);
ti.outputVertex(v);
}
for (let f of ti.inputFragments()) {
ti.outputColor(target, [1.,0.,0.,1.]);
}
});
async function frame() {
render();
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
};
</script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment