Ray Tracing TemplateMandelbrot SetWebGL2: GLSLVectors and vector AlgebraBarycentric CoordinatesRayRay-Box intersectionRay-Sphere (in 2D) intersectionUniform Grid AccelerationWebGL Volume RenderingSpecular lighting ModelDiffuse lighting: Lambert Cosine Model.Ray-Scene (2D) intersectionRay Tracing Template for 3D Scalar Field RenderingSampling DiscSamplingRandom Number Generator Testing.Schlick's approximationRendering 2D Scalar FieldBounds and IntersectionsRay Intersection Point on a triangular approximation of a curved surfaceNumerical Integration/QuadratureThin Lens in Ray TracingSampling: Deterministic, Random, Stratified, QuasiRandomPing Pong Approach for Progressive Rendering
Ray Tracing AABB
{
let count = 0;
let cameraAt = [0, 0, 0];
let cameraUp = [0, 1, 0];
let M = twgl.m4.axisRotation(cameraUp, deg2rad(1));
let cameraU = [1, 0, 0],
cameraV = [0, 1, 0],
cameraW = [0, 0, 1];
const computeUVW = () => {
cameraW = twgl.v3.normalize([
cameraEye[0] - cameraAt[0],
cameraEye[1] - cameraAt[1],
cameraEye[2] - cameraAt[2]
]);
cameraU = twgl.v3.normalize(twgl.v3.cross(cameraUp, cameraW));
cameraV = twgl.v3.normalize(twgl.v3.cross(cameraW, cameraU));
};
const rotateCamera = () => {
mutable cameraEye = twgl.m4.transformDirection(M, cameraEye);
computeUVW();
return count++;
};
computeUVW();
render();
function render() {
gl.clear(gl.COLOR_BUFFER_BIT);
const uniforms = {
Background: hex2rgb(backgroundColor),
resolution: [gl.canvas.width, gl.canvas.height],
cameraU: cameraU,
cameraV: cameraV,
cameraW: cameraW,
cameraEye: cameraEye,
fov: deg2rad(30),
minBound: [-0.5, -0.5, -0.5],
maxBound: [0.5, 0.5, 0.5]
};
gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.setUniforms(programInfo, uniforms);
twgl.drawBufferInfo(gl, bufferInfo);
return count++;
}
while (rotate) {
render();
yield Promises.delay(1000 / 30, rotateCamera());
}
return md`### WebGL Render code`;
}
deg2rad = deg => (deg * Math.PI) / 180
md`### Leave the following code unchanged.`
bufferInfo = twgl.createBufferInfoFromArrays(gl, {
position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0]
})
programInfo = {
errorBlock.style.display = "none";
return twgl.createProgramInfo(gl, [shaders.vs, shaders.fs], message => {
errorBlock.style.display = "block";
errorBlock.innerHTML = message;
});
}
shaders = ({
fs: `#version 300 es
precision highp float;
out vec4 fragColor;
//-------You Code appears below this line--------------------------
${pixelColorCode.join("\n//----------------")}
//-------You Code appears above this line--------------------------
void main() {
fragColor = vec4(pixelColor(gl_FragCoord.xy),1.0);
}`,
vs: `#version 300 es
precision highp float;
in vec4 position;
void main() {
gl_Position = position;
}`
})
gl = {
const gl = canvas.getContext("webgl2", {
antialias: true,
preserveDrawingBuffer: true
});
gl.clearColor(0, 0, 0, 1); // Choose a clear color
gl.clear(gl.COLOR_BUFFER_BIT);
return gl;
}
height = 256
width = 512
md`### Local Helper Functions`
hex2rgb = hex =>
(hex = hex.replace('#', ''))
.match(new RegExp('(.{' + hex.length / 3 + '})', 'g'))
.map(l => parseInt(hex.length % 2 ? l + l : l, 16) / 255)
md`### External Libraries and Functions (imports)`
import { color, checkbox } from "@jashkenas/inputs"
twgl = require("twgl.js")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
