Creating a scene
The goal of this section is to give a brief introduction to glre.js. We will start by setting up a scene, with a spinning cube.
- Based on: Ray marching cube minus sphere
- Result: glre rotate cube test2 - CodeSandbox
Before we started
Before you can use glre.js, you need somewhere to display it. Save the following HTML to a file on your computer.
<canvas id="myCanvas"></canvas>
<script type="module">
import self from 'https://cdn.skypack.dev/[email protected]'
// Our GLSL and Javascript will go here.
const frag = `
...
`
document.addEventListener('DOMContentLoaded', setup)
function setup() {
// ...
}
function draw() {
// ...
}
</script>
Creating Fragment Shader
precision highp float;
uniform vec2 iResolution; // canvas size
uniform vec3 up; // camera up direction
uniform vec3 eye; // camera position
uniform vec3 focus; // camera focus point
uniform float focal; // camera focal length
uniform float size; // object size
Creating Box
float boxSDF(vec3 p, float side) {
vec3 d = abs(p) - side;
return min(max(d.x, max(d.y, d.z)), 0.) + length(max(d, 0.));
}