class VolumeApplet extends PixApplet { constructor(canvas) { super(canvas); this.R = Math.min(this.W, this.H) / 2; this.skip = 0.02; // Buffers for front-to-back compositing this.D = Array.from({ length: this.W }, () => new Float32Array(this.H)); this.M = Array.from({ length: this.W }, () => new Float32Array(this.H).fill(1)); this.T = Array.from({ length: this.W }, () => new Float32Array(this.H).fill(1)); // Lighting parameters this.ambient = 1.0; this.diffuse = 0.7; this.lightDir = [0.5, 0.5, 1]; // simple directional light this.normalize(this.lightDir); } density(x, y, z) { // Example: simple moving cloud const r = Math.sqrt(x*x + y*y + z*z); return Math.max(0, 0.5 - r*r + 0.1 * Math.sin(5*(x+y+z))); } normalize(v) { const len = Math.sqrt(v[0]*v[0]+v[1]*v[1]+v[2]*v[2]); if(len>0) { v[0]/=len; v[1]/=len; v[2]/=len; } } lighting(normal) { // Simple Lambertian diffuse const dot = Math.max(0, normal[0]*this.lightDir[0] + normal[1]*this.lightDir[1] + normal[2]*this.lightDir[2]); return this.ambient + this.diffuse * dot; } setPix(frame) { const t = frame * 0.02; const dscale = 5; const fov = 3.0; const bg = { r: 135, g: 206, b: 235 }; // sky blue // Reset buffers for (let x = 0; x < this.W; x++) { for (let y = 0; y < this.H; y++) { this.D[x][y] = 0; this.M[x][y] = 1; this.T[x][y] = 1; } } // Front-to-back compositing: slice by slice for (let z = -2; z < 2; z += this.skip) { const Z = z + t; for (let y = 0; y < this.H; y++) { const Y = ((y - this.H / 2) / this.R) * fov; for (let x = 0; x < this.W; x++) { const X = ((x - this.W / 2) / this.R) * fov; // Compute density const d = Math.max(0, Math.min(0.99, this.density(X, Y, Z))); // Compute transparency of this voxel const transparency = Math.exp(-d/dscale); // Approximate normal using finite differences let dx = 0, dy = 0, dz = 0; if(x>0) dx = this.D[x-1][y] - d; if(y>0) dy = this.D[x][y-1] - d; if(z > -1) dz = 0 - d; // approximate previous slice density = 0 let normal = [dx, dy, dz]; this.normalize(normal); // Compute shaded contribution let shade = this.lighting(normal); const contrib = this.T[x][y] * (1 - transparency) * shade * this.M[x][y]; // Accumulate grayscale (or RGB later) this.D[x][y] += contrib; // Update transparency and shadow mask this.T[x][y] *= transparency; const lightOffsetX = -1; // pixels left const lightOffsetY = 1; // pixels up let ox = x + lightOffsetX; let oy = y + lightOffsetY; if (ox >= 0 && ox < this.W && oy >= 0 && oy < this.H) { this.M[ox][oy] *= Math.exp(-d/dscale); } // this.M[x][y] *= transparency; // Optional: early exit if fully opaque if(this.T[x][y] < 0.01) continue; } } } // Write final pixels /* let i = 0; for (let y = 0; y < this.H; y++) { for (let x = 0; x < this.W; x++) { const alpha = 1 - this.T[x][y]; const c = Math.min(255, 255 * this.D[x][y]); const r = c + this.T[x][y] * bg.r; const g = c + this.T[x][y] * bg.g; const b = c + this.T[x][y] * bg.b; if(c > 200) { this.pack(i, 255, 0, 0); } else { this.pack(i, r, g, b); } i += 4; } } */ let i = 0; for (let y = 0; y < this.H; y++) { for (let x = 0; x < this.W; x++) { const alpha = 1 - this.T[x][y]; // how opaque the cloud is const c = this.D[x][y]; // density-based brightness in [0,1] /* const r = c * alpha * 255 + (1 - alpha) * bg.r; const g = 0 * alpha * 255 + (1 - alpha) * bg.g; const b = 0 * alpha * 255 + (1 - alpha) * bg.b; */ const r = this.gamma_correct_composite(c, bg.r, alpha) * 255 const g = this.gamma_correct_composite(c, bg.g, alpha) * 255 const b = this.gamma_correct_composite(c, bg.b, alpha) * 255 /* if(alpha == 0) { this.pack(i, 255, 0, 0); } else if (c == 1) { this.pack(i, 0, 255, 0); } else if (alpha == 1) { this.pack(i, 0, 0, 255); } else {*/ this.pack(i, r, g, b); /* }*/ i += 4; } } } gamma_correct_composite(c, bg, alpha) { const gamma = 2.2; // for sRGB let bg_linear = Math.pow(bg/255, gamma); let c_linear = Math.pow(c, 0.3); let output_linear = c_linear * alpha + (1.0 - alpha) * bg_linear; let output = Math.pow(output_linear, 1.0/gamma); return output; } }