@bigmistqke/view.gl 0.2.0 → 0.4.0

package/dev/dist/assets/ray-casting-modules-Dkfw4tdc.js

@@ -0,0 +1,765 @@
+import { c as compile, u as uniform, g as glsl } from './tag-C0Vskpp8.js';
+import { d as dom } from './utils-2dzuv_bW.js';
+
+const NUM_SPHERES = 8;
+const NUM_BOXES = 3;
+const NUM_TORI = 4;
+const RAY_MARCH_ITERATIONS = 129;
+const RAY_HIT_THRESHOLD = 1e-3;
+const NORMAL_EPSILON = 1e-3;
+const SPHERE_FLOAT_ARRAYS = {
+  positions: new Float32Array(
+    [
+      [0, 0, 0, 1.2],
+      [1.5, 0.5, -1, 1],
+      [-1.5, -0.5, 0.5, 1],
+      [0.5, 1.5, -0.5, 0.9],
+      [-1, -1.5, 1, 0.8],
+      [2, -1, -1.5, 0.7],
+      [-2, 1, 1.5, 0.9],
+      [0, -0.5, -2, 1]
+    ].flat()
+  ),
+  colors: new Float32Array(
+    [
+      [1, 0.3, 0.3],
+      // Red
+      [0.3, 1, 0.3],
+      // Green
+      [0.3, 0.3, 1],
+      // Blue
+      [1, 1, 0.3],
+      // Yellow
+      [1, 0.3, 1],
+      // Magenta
+      [0.3, 1, 1],
+      // Cyan
+      [1, 0.7, 0.3],
+      // Orange
+      [0.7, 0.3, 1]
+      // Purple
+    ].flat()
+  )
+};
+const BOX_FLOAT_ARRAYS = {
+  positions: new Float32Array(
+    [
+      [1, 0, -0.5, 0.9],
+      [-1, 0, 0.5, 0.8],
+      [0, -1, -1, 0.9]
+    ].flat()
+  ),
+  colors: new Float32Array(
+    [
+      [0.8, 0.8, 0.2],
+      // Yellow-green
+      [0.2, 0.8, 0.8],
+      // Cyan
+      [0.8, 0.2, 0.8]
+      // Magenta
+    ].flat()
+  )
+};
+const TORUS_FLOAT_ARRAYS = {
+  positions: new Float32Array(
+    [
+      [0, 1.5, 0],
+      [-1.5, 0, 0],
+      [1.5, -0.5, -0.5],
+      [0, -1.5, 1]
+    ].flat()
+  ),
+  radii: new Float32Array(
+    [
+      [0.8, 0.3],
+      [0.6, 0.2],
+      [0.7, 0.25],
+      [0.5, 0.2]
+    ].flat()
+  ),
+  colors: new Float32Array(
+    [
+      [0.9, 0.5, 0.2],
+      // Orange
+      [0.2, 0.9, 0.5],
+      // Green
+      [0.5, 0.2, 0.9],
+      // Purple
+      [0.9, 0.9, 0.2]
+      // Yellow
+    ].flat()
+  )
+};
+let SHAPE_COUNTER = 0;
+class Camera {
+  theta = 0;
+  // Horizontal angle
+  phi = Math.PI / 4;
+  // Vertical angle
+  targetTheta = 0;
+  targetPhi = Math.PI / 4;
+  radius = 6;
+  isDragging = false;
+  lastX = 0;
+  lastY = 0;
+  position = [0, 0, 0];
+  direction = [0, 0, -1];
+  up = [0, 1, 0];
+  right = [1, 0, 0];
+  template = glsl`
+${uniform.vec3("u_cameraPos")}
+${uniform.vec3("u_cameraDir")}
+${uniform.vec3("u_cameraUp")}
+${uniform.vec3("u_cameraRight")}`;
+  view;
+  startDrag(x, y) {
+    this.isDragging = true;
+    this.lastX = x;
+    this.lastY = y;
+  }
+  drag(x, y) {
+    if (!this.isDragging) return;
+    const deltaX = x - this.lastX;
+    const deltaY = y - this.lastY;
+    this.targetTheta += deltaX * 0.01;
+    this.targetPhi = Math.max(0.1, Math.min(Math.PI - 0.1, this.targetPhi - deltaY * 0.01));
+    this.lastX = x;
+    this.lastY = y;
+  }
+  endDrag() {
+    this.isDragging = false;
+  }
+  zoom(delta) {
+    this.radius = Math.max(2, Math.min(15, this.radius + delta * 0.01));
+  }
+  update() {
+    this.theta += (this.targetTheta - this.theta) * 0.1;
+    this.phi += (this.targetPhi - this.phi) * 0.1;
+    const x = this.radius * Math.sin(this.phi) * Math.cos(this.theta);
+    const y = this.radius * Math.cos(this.phi);
+    const z = this.radius * Math.sin(this.phi) * Math.sin(this.theta);
+    this.position = [x, y, z];
+    const target = [0, 0, 0];
+    const dir = [
+      target[0] - this.position[0],
+      target[1] - this.position[1],
+      target[2] - this.position[2]
+    ];
+    const dirLength = Math.sqrt(dir[0] ** 2 + dir[1] ** 2 + dir[2] ** 2);
+    this.direction = [dir[0] / dirLength, dir[1] / dirLength, dir[2] / dirLength];
+    const up = [0, 1, 0];
+    this.right = [
+      this.direction[1] * up[2] - this.direction[2] * up[1],
+      this.direction[2] * up[0] - this.direction[0] * up[2],
+      this.direction[0] * up[1] - this.direction[1] * up[0]
+    ];
+    this.up = [
+      this.right[1] * this.direction[2] - this.right[2] * this.direction[1],
+      this.right[2] * this.direction[0] - this.right[0] * this.direction[2],
+      this.right[0] * this.direction[1] - this.right[1] * this.direction[0]
+    ];
+    if (this.view) {
+      this.view.uniforms.u_cameraPos.set(this.position[0], this.position[1], this.position[2]);
+      this.view.uniforms.u_cameraDir.set(this.direction[0], this.direction[1], this.direction[2]);
+      this.view.uniforms.u_cameraUp.set(this.up[0], this.up[1], this.up[2]);
+      this.view.uniforms.u_cameraRight.set(this.right[0], this.right[1], this.right[2]);
+    }
+  }
+}
+const controller = new AbortController();
+const canvas = dom("canvas", { parentElement: document.body });
+const gl = canvas.getContext("webgl2");
+let blendFactor = 0.8;
+class Shape {
+  id = SHAPE_COUNTER++;
+  view;
+  calculateIntersection = Symbol();
+  calculateColor = Symbol();
+  calculateSDF = Symbol();
+  u_data = Symbol();
+  u_colors = Symbol();
+  u_positions = Symbol();
+  u_radii = Symbol();
+  setData(data) {
+    this.view?.uniforms[this.u_data]?.set(data);
+    return this;
+  }
+  setColors(data) {
+    this.view?.uniforms[this.u_colors]?.set(data);
+    return this;
+  }
+}
+class Sphere extends Shape {
+  sphereIntersection = Symbol();
+  sphereNormal = Symbol();
+  sphereSDF = Symbol();
+  template = glsl`
+struct Sphere {
+	vec3 position;
+	float radius;
+	vec3 color;
+};
+
+${uniform.vec4(this.u_data, { size: NUM_SPHERES })}
+${uniform.vec3(this.u_colors, { size: NUM_SPHERES })}
+
+float ${this.sphereIntersection}(in vec3 rayOrigin, in vec3 rayDirection, in Sphere sphere)
+{
+	// We're shooting a ray from the camera and checking if it hits a sphere
+	// Think of it like shining a laser pointer at a ball
+	
+	vec3 rayToSphere = rayOrigin - sphere.position;
+	
+	// Step 1: Find the closest point on the ray to the sphere's position
+	// This is like finding where the laser beam passes nearest to the ball's position
+	float closestApproach = dot(rayToSphere, rayDirection);
+	
+	// Step 2: Check if we're already inside the sphere
+	// If negative, we're outside and pointing away from sphere position
+	float rayStartDistanceSquared = dot(rayToSphere, rayToSphere) - sphere.radius * sphere.radius;
+	
+	// Step 3: Use geometry to check if the ray can reach the sphere
+	// If this value is negative, the ray misses the sphere entirely
+	float canReachSphere = closestApproach * closestApproach - rayStartDistanceSquared;
+	
+	if(canReachSphere < 0.0) {
+		return -1.0; // Ray misses the sphere
+	}
+	
+	// Step 4: Calculate how far along the ray we hit the sphere
+	// We want the nearest intersection point (there can be two when ray goes through)
+	float hitDistance = -closestApproach - sqrt(canReachSphere);
+	
+	return hitDistance;
+}
+
+// Calculate normal vector at hit point on sphere surface
+vec3 ${this.sphereNormal}(in vec3 hitPosition, in Sphere sphere)
+{
+	return (hitPosition - sphere.position) / sphere.radius;
+}
+
+// Find closest sphere intersection, returns distance and sets hitIndex and hitType
+float ${this.calculateIntersection}(in vec3 rayOrigin, in vec3 rayDirection, in float maxDistance, out int hitIndex, out int hitType)
+{
+	float closestDistance = maxDistance;
+	hitIndex = -1;
+	hitType = -1;
+	
+	for(int i = 0; i < ${NUM_SPHERES}; i++) {
+		Sphere sphere = Sphere(${this.u_data}[i].xyz, ${this.u_data}[i].w, ${this.u_colors}[i]);
+		float distance = ${this.sphereIntersection}(rayOrigin, rayDirection, sphere);
+		
+		if(distance > 0.0 && distance < closestDistance) {
+			closestDistance = distance;
+			hitIndex = i;
+			hitType = ${this.id};
+		}
+	}
+	
+	return hitIndex >= 0 ? closestDistance : -1.0;
+}
+
+// Calculate sphere normal and color at hit point
+void ${this.calculateColor}(in vec3 hitPosition, in int hitIndex, out vec3 normal, out vec3 color)
+{
+	Sphere hitSphere = Sphere(${this.u_data}[hitIndex].xyz, ${this.u_data}[hitIndex].w, ${this.u_colors}[hitIndex]);
+	normal = ${this.sphereNormal}(hitPosition, hitSphere);
+	color = ${this.u_colors}[hitIndex];
+}
+
+// Signed distance function for sphere
+float ${this.sphereSDF}(in vec3 point, in vec3 center, in float radius)
+{
+	return length(point - center) - radius;
+}
+
+// Calculate SDF for all spheres
+float ${this.calculateSDF}(in vec3 point, out int nearestIndex, out float minDistance)
+{
+	minDistance = 1000.0;
+	nearestIndex = -1;
+	
+	for(int i = 0; i < ${NUM_SPHERES}; i++) {
+		float distance = ${this.sphereSDF}(point, ${this.u_data}[i].xyz, ${this.u_data}[i].w);
+		
+		if(distance < minDistance) {
+			minDistance = distance;
+			nearestIndex = i;
+		}
+	}
+	
+	return minDistance;
+}`;
+}
+class Box extends Shape {
+  boxIntersection = Symbol();
+  boxNormal = Symbol();
+  boxSDF = Symbol();
+  template = glsl`
+
+#define NUM_BOXES ${NUM_BOXES}
+
+struct Box {
+	vec3 position;
+	float size;
+	vec3 color;
+};
+
+${uniform.vec4(this.u_data, { size: NUM_BOXES })}
+${uniform.vec3(this.u_colors, { size: NUM_BOXES })}
+
+float ${this.boxIntersection}(in vec3 rayOrigin, in vec3 rayDirection, in Box box)
+{
+	// Ray-box intersection using slab method
+	// A box is defined by 6 planes, we find where the ray enters and exits each pair of parallel planes
+	
+	vec3 boxMin = box.position - vec3(box.size);
+	vec3 boxMax = box.position + vec3(box.size);
+	
+	// Calculate intersection distances for each axis
+	vec3 invDir = 1.0 / rayDirection;
+	vec3 t1 = (boxMin - rayOrigin) * invDir;
+	vec3 t2 = (boxMax - rayOrigin) * invDir;
+	
+	// Find the min and max for each axis (handles negative direction)
+	vec3 tMin = min(t1, t2);
+	vec3 tMax = max(t1, t2);
+	
+	// The ray enters the box at the maximum of all tMin values
+	float tNear = max(max(tMin.x, tMin.y), tMin.z);
+	
+	// The ray exits the box at the minimum of all tMax values  
+	float tFar = min(min(tMax.x, tMax.y), tMax.z);
+	
+	// If tNear > tFar, ray misses the box
+	// If tFar < 0, box is behind the ray
+	if(tNear > tFar || tFar < 0.0) {
+		return -1.0;
+	}
+	
+	// Return the nearest intersection (tNear, unless we're inside the box)
+	return tNear > 0.0 ? tNear : tFar;
+}
+
+// Calculate normal vector at hit point on box surface
+vec3 ${this.boxNormal}(in vec3 hitPosition, in Box box)
+{
+	// Find which face of the box we hit by checking which coordinate is closest to the box boundary
+	vec3 localPos = hitPosition - box.position;
+	vec3 absLocal = abs(localPos);
+	
+	// Return normal for the face that's closest to the box size
+	if(absLocal.x > absLocal.y && absLocal.x > absLocal.z) {
+		return vec3(sign(localPos.x), 0.0, 0.0);
+	} else if(absLocal.y > absLocal.z) {
+		return vec3(0.0, sign(localPos.y), 0.0);
+	} else {
+		return vec3(0.0, 0.0, sign(localPos.z));
+	}
+}
+
+// Find closest box intersection, returns distance and sets hitIndex and hitType
+float ${this.calculateIntersection}(in vec3 rayOrigin, in vec3 rayDirection, in float maxDistance, out int hitIndex, out int hitType)
+{
+	float closestDistance = maxDistance;
+	hitIndex = -1;
+	hitType = -1;
+	
+	for(int i = 0; i < ${NUM_BOXES}; i++) {
+		Box box = Box(${this.u_data}[i].xyz, ${this.u_data}[i].w, ${this.u_colors}[i]);
+		float distance = ${this.boxIntersection}(rayOrigin, rayDirection, box);
+		
+		if(distance > 0.0 && distance < closestDistance) {
+			closestDistance = distance;
+			hitIndex = i;
+			hitType = ${this.id};
+		}
+	}
+	
+	return hitIndex >= 0 ? closestDistance : -1.0;
+}
+
+// Calculate box normal and color at hit point
+void ${this.calculateColor}(in vec3 hitPosition, in int hitIndex, out vec3 normal, out vec3 color)
+{
+	Box hitBox = Box(${this.u_data}[hitIndex].xyz, ${this.u_data}[hitIndex].w, ${this.u_colors}[hitIndex]);
+	normal = ${this.boxNormal}(hitPosition, hitBox);
+	color = ${this.u_colors}[hitIndex];
+}
+
+// Signed distance function for box
+float ${this.boxSDF}(in vec3 point, in vec3 center, in float size)
+{
+	vec3 d = abs(point - center) - vec3(size);
+	return length(max(d, vec3(0.0))) + min(max(d.x, max(d.y, d.z)), 0.0);
+}
+
+// Calculate SDF for all boxes
+float ${this.calculateSDF}(in vec3 point, out int nearestIndex, out float minDistance)
+{
+	minDistance = 1000.0;
+	nearestIndex = -1;
+	
+	for(int i = 0; i < ${NUM_BOXES}; i++) {
+		float distance = ${this.boxSDF}(point, ${this.u_data}[i].xyz, ${this.u_data}[i].w);
+		
+		if(distance < minDistance) {
+			minDistance = distance;
+			nearestIndex = i;
+		}
+	}
+	
+	return minDistance;
+}
+`;
+}
+class Torus extends Shape {
+  torusIntersection = Symbol();
+  torusNormal = Symbol();
+  torusSDF = Symbol();
+  setData(positions, radii) {
+    this.view?.uniforms[this.u_positions]?.set(positions);
+    this.view?.uniforms[this.u_radii]?.set(radii);
+    return this;
+  }
+  template = glsl`
+
+#define NUM_TORI ${NUM_TORI}
+
+struct Torus {
+	vec3 position;
+	float majorRadius;
+	float minorRadius;
+	vec3 color;
+};
+
+${uniform.vec3(this.u_positions, { size: NUM_TORI })}
+${uniform.vec2(this.u_radii, { size: NUM_TORI })}
+${uniform.vec3(this.u_colors, { size: NUM_TORI })}
+
+// Signed distance function for torus
+float ${this.torusSDF}(in vec3 point, in vec3 center, in float majorRadius, in float minorRadius)
+{
+	vec3 p = point - center;
+	vec2 q = vec2(length(p.xz) - majorRadius, p.y);
+	return length(q) - minorRadius;
+}
+
+// Calculate SDF for all tori
+float ${this.calculateSDF}(in vec3 point, out int nearestIndex, out float minDistance)
+{
+	minDistance = 1000.0;
+	nearestIndex = -1;
+	
+	for(int i = 0; i < ${NUM_TORI}; i++) {
+		float distance = ${this.torusSDF}(point, ${this.u_positions}[i], ${this.u_radii}[i].x, ${this.u_radii}[i].y);
+		
+		if(distance < minDistance) {
+			minDistance = distance;
+			nearestIndex = i;
+		}
+	}
+	
+	return minDistance;
+}
+
+// Torus intersection for fallback rendering
+float ${this.torusIntersection}(in vec3 rayOrigin, in vec3 rayDirection, in Torus torus)
+{
+	// Simplified intersection - not exact but good enough for fallback
+	return ${this.torusSDF}(rayOrigin, torus.position, torus.majorRadius, torus.minorRadius);
+}
+
+// Calculate torus normal
+vec3 ${this.torusNormal}(in vec3 hitPosition, in Torus torus)
+{
+	vec3 p = hitPosition - torus.position;
+	float len = length(vec2(p.x, p.z));
+	vec3 d = vec3(p.x, 0.0, p.z) / len;
+	return normalize(p - d * torus.majorRadius);
+}
+
+// Find closest torus intersection
+float ${this.calculateIntersection}(in vec3 rayOrigin, in vec3 rayDirection, in float maxDistance, out int hitIndex, out int hitType)
+{
+	float closestDistance = maxDistance;
+	hitIndex = -1;
+	hitType = -1;
+	
+	for(int i = 0; i < ${NUM_TORI}; i++) {
+		Torus torus = Torus(${this.u_positions}[i], ${this.u_radii}[i].x, ${this.u_radii}[i].y, ${this.u_colors}[i]);
+		float distance = ${this.torusIntersection}(rayOrigin, rayDirection, torus);
+		
+		if(distance > 0.0 && distance < closestDistance) {
+			closestDistance = distance;
+			hitIndex = i;
+			hitType = ${this.id};
+		}
+	}
+	
+	return hitIndex >= 0 ? closestDistance : -1.0;
+}
+
+// Calculate torus normal and color at hit point
+void ${this.calculateColor}(in vec3 hitPosition, in int hitIndex, out vec3 normal, out vec3 color)
+{
+	Torus hitTorus = Torus(${this.u_positions}[hitIndex], ${this.u_radii}[hitIndex].x, ${this.u_radii}[hitIndex].y, ${this.u_colors}[hitIndex]);
+	normal = ${this.torusNormal}(hitPosition, hitTorus);
+	color = ${this.u_colors}[hitIndex];
+}
+`;
+}
+const box = new Box();
+const sphere = new Sphere();
+const torus = new Torus();
+const camera = new Camera();
+const shapes = [box, sphere, torus];
+const { program, view } = compile.toQuad(
+  gl,
+  glsl`#version 300 es
+precision mediump float;
+
+struct HitInfo {
+	bool hit;
+	float distance;
+	vec3 position;
+	vec3 normal;
+	vec3 color;
+};
+
+${shapes.map((shape) => shape.template)}
+
+${camera.template}
+${uniform.float("aspectRatio")}
+${uniform.float("u_blendFactor")}
+
+in vec2 v_uv;
+out vec4 fragColor;
+
+vec3 lightPos = vec3(5.0, 5.0, 5.0);
+
+// Smooth minimum function for blending SDFs
+float smoothMin(float a, float b, float k) {
+	float h = max(k - abs(a - b), 0.0);
+	return min(a, b) - h * h * 0.25 / k;
+}
+
+// Structure to hold shape contribution info
+struct ShapeContribution {
+	float distance;
+	int shapeType;
+	int index;
+	float weight;
+};
+
+// Combined SDF function that blends all shapes and calculates color weights
+float combinedSDF(in vec3 point, out vec3 blendedColor)
+{
+	ShapeContribution shapes[${shapes.length}];
+	float totalWeight = 0.0;
+	blendedColor = vec3(0.0);
+	
+	${shapes.map((shape, i) => {
+    const index = Symbol();
+    const minDist = Symbol();
+    return glsl`
+	int ${index};
+	float ${minDist};
+	shapes[${i}].distance = ${shape.calculateSDF}(point, ${index}, ${minDist});
+	shapes[${i}].shapeType = ${shape.id};
+	shapes[${i}].index = ${index};
+	`;
+  })}
+	
+	// Calculate blended distance using smooth minimum
+	float blendedDist = shapes[0].distance;
+	for(int i = 1; i < ${shapes.length}; i++) {
+		blendedDist = smoothMin(blendedDist, shapes[i].distance, u_blendFactor);
+	}
+	
+	// Calculate weights based on how close each shape is to the blended surface
+	for(int i = 0; i < ${shapes.length}; i++) {
+		float diff = abs(shapes[i].distance - blendedDist);
+		// Use exponential falloff with sharper cutoff for more vibrant colors
+		shapes[i].weight = exp(-diff * 20.0 / u_blendFactor);
+		totalWeight += shapes[i].weight;
+	}
+	
+	// Normalize weights and blend colors
+	if(totalWeight > 0.0) {
+		${shapes.map(
+    (shape, i) => glsl`
+		if(shapes[${i}].index >= 0) {
+			vec3 shapeColor = ${shape.u_colors}[shapes[${i}].index];
+			blendedColor += shapeColor * (shapes[${i}].weight / totalWeight);
+		}`
+  )}
+	}
+	
+	return blendedDist;
+}
+
+// Calculate normal using gradient of SDF
+vec3 calculateSDFNormal(in vec3 point) {
+	const float eps = ${NORMAL_EPSILON};
+	vec3 dummyColor;
+	
+	float center = combinedSDF(point, dummyColor);
+	float dx = combinedSDF(point + vec3(eps, 0.0, 0.0), dummyColor) - center;
+	float dy = combinedSDF(point + vec3(0.0, eps, 0.0), dummyColor) - center;
+	float dz = combinedSDF(point + vec3(0.0, 0.0, eps), dummyColor) - center;
+	
+	return normalize(vec3(dx, dy, dz));
+}
+
+vec3 calculateLighting(in vec3 position, in vec3 normal, in vec3 color)
+{
+	vec3 lightDirection = normalize(lightPos - position);
+	float diffuse = max(0.0, dot(normal, lightDirection));
+	return color * (diffuse * 0.8 + 0.2); // 80% diffuse + 20% ambient
+}
+
+// Raymarching with SDF
+bool raymarch(in vec3 rayOrigin, in vec3 rayDirection, out vec3 hitPosition, out vec3 hitColor)
+{
+	float t = 0.0;
+	for(int i = 0; i < ${RAY_MARCH_ITERATIONS}; i++) {
+		hitPosition = rayOrigin + t * rayDirection;
+		float dist = combinedSDF(hitPosition, hitColor);
+		
+		if(dist < ${RAY_HIT_THRESHOLD}) {
+			return true;
+		}
+		
+		t += dist;
+		
+		if(t > 100.0) {
+			break;
+		}
+	}
+	return false;
+}
+
+void main()
+{	
+	// Ray from camera through pixel using camera vectors
+	vec3 rayOrigin = u_cameraPos;
+	vec3 rayDirection = normalize(u_cameraDir + v_uv.x * u_cameraRight * aspectRatio + v_uv.y * u_cameraUp);
+	
+	vec3 color = vec3(0.1, 0.1, 0.2); // Background color
+	
+	vec3 hitPosition;
+	vec3 hitColor;
+	
+	if(raymarch(rayOrigin, rayDirection, hitPosition, hitColor)) {
+		// Calculate normal using SDF gradient
+		vec3 normal = calculateSDFNormal(hitPosition);
+		
+		// Use the blended color from raymarch
+		color = calculateLighting(hitPosition, normal, hitColor);
+	}
+	
+	// Gamma correction
+	// color = pow(color, vec3(1.0 / 2.2));
+	
+	fragColor = vec4(color, 1.0);
+}`
+);
+gl.useProgram(program);
+shapes.forEach((shape) => shape.view = view);
+view.attributes.a_quad.bind();
+sphere.setData(SPHERE_FLOAT_ARRAYS.positions).setColors(SPHERE_FLOAT_ARRAYS.colors);
+box.setData(BOX_FLOAT_ARRAYS.positions).setColors(BOX_FLOAT_ARRAYS.colors);
+torus.setData(TORUS_FLOAT_ARRAYS.positions, TORUS_FLOAT_ARRAYS.radii).setColors(TORUS_FLOAT_ARRAYS.colors);
+view.uniforms.aspectRatio.set(canvas.width / canvas.height);
+view.uniforms.u_blendFactor.set(blendFactor);
+camera.view = view;
+camera.update();
+function animate(timestamp) {
+  const time = timestamp / 1e3;
+  const pulseFactor = 1 + 0.3 * Math.sin(time * 2);
+  SPHERE_FLOAT_ARRAYS.positions[3] = pulseFactor;
+  const orbitRadius = 1.5;
+  SPHERE_FLOAT_ARRAYS.positions[4] = 1.5 + Math.cos(time * 0.4) * orbitRadius * 0.5;
+  SPHERE_FLOAT_ARRAYS.positions[5] = 0.5 + Math.sin(time * 0.6) * 0.8;
+  SPHERE_FLOAT_ARRAYS.positions[6] = -1 + Math.sin(time * 0.4) * orbitRadius * 0.5;
+  SPHERE_FLOAT_ARRAYS.positions[8] = -1.5 + Math.cos(time * 0.3 + Math.PI) * orbitRadius * 0.5;
+  SPHERE_FLOAT_ARRAYS.positions[9] = -0.5 + Math.cos(time * 0.5) * 0.6;
+  SPHERE_FLOAT_ARRAYS.positions[10] = 0.5 + Math.sin(time * 0.3 + Math.PI) * orbitRadius * 0.5;
+  SPHERE_FLOAT_ARRAYS.positions[13] = 1.5 + Math.sin(time * 0.8) * 0.5;
+  SPHERE_FLOAT_ARRAYS.positions[16] = -1 + Math.sin(time * 0.4) * 0.8;
+  SPHERE_FLOAT_ARRAYS.positions[17] = -1.5 + Math.sin(time * 0.6) * 0.5;
+  SPHERE_FLOAT_ARRAYS.positions[18] = 1 + Math.cos(time * 0.4) * 0.3;
+  SPHERE_FLOAT_ARRAYS.positions[20] = 2 + Math.cos(time * 0.3) * 0.7;
+  SPHERE_FLOAT_ARRAYS.positions[22] = -1.5 + Math.sin(time * 0.3) * 0.5;
+  SPHERE_FLOAT_ARRAYS.positions[23] = 0.7 + 0.2 * Math.sin(time * 2);
+  SPHERE_FLOAT_ARRAYS.positions[24] = -2 + Math.sin(time * 0.4) * 0.5;
+  SPHERE_FLOAT_ARRAYS.positions[25] = 1 + Math.sin(time * 0.6) * 0.4;
+  SPHERE_FLOAT_ARRAYS.positions[28] = Math.cos(time * 0.3) * 1.2;
+  SPHERE_FLOAT_ARRAYS.positions[29] = -0.5 + Math.sin(time * 0.3) * 0.3;
+  SPHERE_FLOAT_ARRAYS.colors[0] = 0.5 + 0.5 * Math.sin(time * 3);
+  SPHERE_FLOAT_ARRAYS.colors[4] = 0.5 + 0.5 * Math.cos(time * 2);
+  SPHERE_FLOAT_ARRAYS.colors[9] = 0.5 + 0.5 * Math.sin(time * 2.5);
+  SPHERE_FLOAT_ARRAYS.colors[15] = 0.3 + 0.7 * Math.abs(Math.sin(time * 1.8));
+  SPHERE_FLOAT_ARRAYS.colors[16] = 0.3 + 0.7 * Math.abs(Math.sin(time * 1.8));
+  SPHERE_FLOAT_ARRAYS.colors[17] = 0.3 + 0.7 * Math.abs(Math.sin(time * 1.8));
+  BOX_FLOAT_ARRAYS.positions[0] = 1 + Math.cos(time * 0.35) * 0.3;
+  BOX_FLOAT_ARRAYS.positions[2] = -0.5 + Math.sin(time * 0.35) * 0.3;
+  BOX_FLOAT_ARRAYS.positions[7] = 0.8 + 0.2 * Math.sin(time * 1.5);
+  BOX_FLOAT_ARRAYS.positions[9] = -1 + Math.sin(time * 0.4) * 0.3;
+  TORUS_FLOAT_ARRAYS.radii[0] = 0.8 + 0.2 * Math.sin(time * 1.2);
+  TORUS_FLOAT_ARRAYS.positions[3] = -1.5 + Math.cos(time * 0.5) * 0.5;
+  TORUS_FLOAT_ARRAYS.positions[5] = Math.sin(time * 0.5) * 0.5;
+  TORUS_FLOAT_ARRAYS.positions[7] = -0.5 + Math.sin(time * 0.7) * 0.3;
+  TORUS_FLOAT_ARRAYS.radii[7] = 0.2 + 0.1 * Math.sin(time * 2);
+  sphere.setData(SPHERE_FLOAT_ARRAYS.positions).setColors(SPHERE_FLOAT_ARRAYS.colors);
+  box.setData(BOX_FLOAT_ARRAYS.positions).setColors(BOX_FLOAT_ARRAYS.colors);
+  torus.setData(TORUS_FLOAT_ARRAYS.positions, TORUS_FLOAT_ARRAYS.radii).setColors(TORUS_FLOAT_ARRAYS.colors);
+  blendFactor = 0.5 + 0.4 * Math.sin(time * 0.3);
+  view.uniforms.u_blendFactor.set(blendFactor);
+}
+canvas.addEventListener("mousedown", (e) => {
+  camera.startDrag(e.clientX, e.clientY);
+});
+canvas.addEventListener("mousemove", (e) => {
+  camera.drag(e.clientX, e.clientY);
+});
+canvas.addEventListener("mouseup", () => {
+  camera.endDrag();
+});
+canvas.addEventListener("mouseleave", () => {
+  camera.endDrag();
+});
+canvas.addEventListener("wheel", (e) => {
+  e.preventDefault();
+  camera.zoom(e.deltaY);
+});
+canvas.addEventListener("touchstart", (e) => {
+  if (e.touches.length === 1) {
+    camera.startDrag(e.touches[0].clientX, e.touches[0].clientY);
+  }
+});
+canvas.addEventListener("touchmove", (e) => {
+  if (e.touches.length === 1) {
+    camera.drag(e.touches[0].clientX, e.touches[0].clientY);
+  }
+});
+canvas.addEventListener("touchend", () => {
+  camera.endDrag();
+});
+function draw(timestamp) {
+  if (controller.signal.aborted) return;
+  camera.update();
+  animate(timestamp);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  requestAnimationFrame(draw);
+}
+requestAnimationFrame(draw);
+new ResizeObserver(() => {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  gl.viewport(0, 0, canvas.width, canvas.height);
+  view.uniforms.aspectRatio.set(canvas.width / canvas.height);
+  draw(performance.now());
+}).observe(document.body);