WebChuGL brings ChuGL, the real-time graphics framework for the ChucK programming language, to the web browser! ChuGL's C++ source code has been compiled with Emscripten to WebAssembly (WASM) to render via the WebGPU API and run audio through an AudioWorkletNode.
WebChuGL builds on WebChucK by adding ChuGL’s scenegraph, materials, textures, shaders, post-processing, and the full GGen (graphics generator) ecosystem — all tightly synchronized to ChucK’s strongly-timed audio engine.
To learn more about WebChuGL and what it can do, check out https://chuck.stanford.edu/webchugl/.
Install WebChuGL via npm:
npm install webchugl
import ChuGL from 'webchugl';
// Initialize WebChuGL with a canvas
const ck = await ChuGL.init({
canvas: document.getElementById('canvas'),
});
// Run ChucK + ChuGL code
ck.runCode(`
GPlane plane --> GG.scene();
while (true) GG.nextFrame() => now;
`);You can also embed WebChuGL as a JavaScript module into your index.html.
<html>
<head>
<script type="module" defer>
import ChuGL from 'https://cdn.jsdelivr.net/npm/webchugl/+esm';
let ck; // global variable
document.getElementById('action').addEventListener('click', async () => {
// Initialize WebChuGL
if (ck === undefined) {
ck = await ChuGL.init({
canvas: document.getElementById('canvas'),
});
}
// Run ChucK + ChuGL code
ck.runCode(`
GPlane plane --> GG.scene();
while (true) GG.nextFrame() => now;
`);
});
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<button id="action">Start</button>
</body>
</html>ck contains the ChucK Virtual Machine for running code, loading files, syncing global variables, and more! Read the documentation for the full API reference.
WebChuGL full documentation and API reference: here