Ray Tracing TemplateMandelbrot SetWebGL2: GLSLVectors and vector AlgebraBarycentric CoordinatesRayRay-Box intersectionRay Tracing AABBRay-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 approximationBounds 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
Rendering 2D Scalar Field
slice = new Array(volume.width * volume.height).fill(0)
canvasImageData = ctx.createImageData(volume.width, volume.height)
mutable eyeVector = [0, 0, 1]
mutable uniforms = 0
deg2rad = deg => (deg * Math.PI) / 180
ctx = myCanvas.getContext("2d")
md`### Volume data and related functions`
volume = volumes[volChoice]
volumes = ({
bucky: buckyVolume,
skull: skullVolume,
foot: footVolume,
//frog: frogVolume,
//brain: brainVolume
})
footVolume = getVolumeFromRawData(
await FileAttachment("Foot.vol").arrayBuffer(),
125,
255,
183
)
new Uint8Array(await FileAttachment("Foot.vol").arrayBuffer()).slice(0, 28)
getVolumeFromRawData = (data, width, height, depth, offset) => ({
width,
height,
depth,
data: new Uint8Array(data.slice(offset === 0 ? 0 : 28))
})
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)
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.
