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 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-Scene (2D) intersection
viewof N = slider({ min: 1, max: 200, step: 1, value: 20 })
md`### Visualization related definitions`
scale = (p)=>[xScale(p[0]),yScale(p[1])]
scale([2, 3])
windowAspect = width / height
yScale = d3.scaleLinear().domain([-10, 10]).range([height, 0])
xScale = d3.scaleLinear().domain([-10*windowAspect, 10*windowAspect]).range([0, width])
scene.spheres.map(d => ({
txt: `translate(${xScale(d.x)},${yScale(d.y)})`,
r: xScale(d.x + d.r) - xScale(d.x)
}))
scene.spheres
md`### External Libraries and Tools`
arrowhead
import { arrowhead} from "@harrystevens/linear-algebra"
//import {rangeSlider, themes} from '@mootari/range-slider'
import { slider } from "@jashkenas/inputs"
d3 = require("d3")
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.
