topazcube 0.1.33 → 0.1.35

package/src/renderer/rendering/passes/FogPass.js

@@ -37,6 +37,7 @@ class FogPass extends BasePass {
     get fogAlpha() { return this.settings?.environment?.fog?.alpha ?? [0.0, 0.3, 0.8] }
     get fogHeightFade() { return this.settings?.environment?.fog?.heightFade ?? [-10, 100] }
     get fogBrightResist() { return this.settings?.environment?.fog?.brightResist ?? 0.8 }
+    get fogDebug() { return this.settings?.environment?.fog?.debug ?? 0 }  // 0=off, 1=show fogAlpha, 2=show distance, 3=show heightFactor
 
     /**
      * Set the input texture (HDR lighting output)
@@ -134,6 +135,8 @@ class FogPass extends BasePass {
                     brightResist: f32,           // float 47
                     heightFade: vec2f,           // floats 48-49
                     screenSize: vec2f,           // floats 50-51
+                    debug: f32,                  // float 52: 0=off, 1=fogAlpha, 2=distance, 3=heightFactor
+                    _pad: vec3f,                 // floats 53-55
                 }
 
                 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
@@ -262,6 +265,26 @@ class FogPass extends BasePass {
                     let brightnessResist = clamp((luminance - 1.0) / 2.0, 0.0, 1.0);
                     fogAlpha *= (1.0 - brightnessResist * uniforms.brightResist);
 
+                    // Debug output
+                    let debugMode = i32(uniforms.debug);
+                    if (debugMode == 1) {
+                        // Show fog alpha as grayscale
+                        return vec4f(vec3f(fogAlpha), 1.0);
+                    } else if (debugMode == 2) {
+                        // Show distance (normalized to 0-100m range)
+                        let normDist = clamp(cameraDistance / 100.0, 0.0, 1.0);
+                        return vec4f(vec3f(normDist), 1.0);
+                    } else if (debugMode == 3) {
+                        // Show height factor
+                        return vec4f(vec3f(heightFactor), 1.0);
+                    } else if (debugMode == 4) {
+                        // Show distance fog (before height fade)
+                        return vec4f(vec3f(distanceFog), 1.0);
+                    } else if (debugMode == 5) {
+                        // Show the actual fog color being used (to verify it matches particles)
+                        return vec4f(uniforms.fogColor, 1.0);
+                    }
+
                     // Apply fog
                     let foggedColor = mix(color.rgb, uniforms.fogColor, fogAlpha);
 
@@ -363,6 +386,9 @@ class FogPass extends BasePass {
         uniformData[50] = this.width
         uniformData[51] = this.height
 
+        // debug (float 52) + padding (floats 53-55)
+        uniformData[52] = this.fogDebug
+
         device.queue.writeBuffer(this.uniformBuffer, 0, uniformData)
 
         // Render fog pass

package/src/renderer/rendering/passes/GBufferPass.js

@@ -293,7 +293,8 @@ class GBufferPass extends BasePass {
         const isSkinned = mesh.hasSkin && mesh.skin
         const meshId = mesh.uid || mesh.geometry?.uid || 'default'
         const forceEmissive = mesh.material?.forceEmissive ? '_emissive' : ''
-        return `${mesh.material.uid}_${meshId}${isSkinned ? '_skinned' : ''}${forceEmissive}`
+        const doubleSided = mesh.material?.doubleSided ? '_dbl' : ''
+        return `${mesh.material.uid}_${meshId}${isSkinned ? '_skinned' : ''}${forceEmissive}${doubleSided}`
     }
 
     /**
@@ -341,6 +342,7 @@ class GBufferPass extends BasePass {
             renderTarget: this.gbuffer,
             skin: isSkinned ? mesh.skin : null,
             noiseTexture: this.noiseTexture,
+            doubleSided: mesh.material?.doubleSided ?? false,
         }).then(pipeline => {
             // Move from pending to ready
             this.pendingPipelines.delete(key)
@@ -386,6 +388,7 @@ class GBufferPass extends BasePass {
             renderTarget: this.gbuffer,
             skin: isSkinned ? mesh.skin : null,
             noiseTexture: this.noiseTexture,
+            doubleSided: mesh.material?.doubleSided ?? false,
         })
         // Mark as warming up - needs 2 frames to stabilize
         pipeline._warmupFrames = 2
@@ -418,6 +421,11 @@ class GBufferPass extends BasePass {
         const emissionFactor = this.settings?.environment?.emissionFactor ?? [1.0, 1.0, 1.0, 4.0]
         const mipBias = this.settings?.rendering?.mipBias ?? options.mipBias ?? 0
 
+        // Use absolute time for scene-loaded skins (same as entity animations)
+        // This ensures consistent timing regardless of frame rate fluctuations
+        const animationSpeed = this.settings?.animation?.speed ?? 1.0
+        const globalAnimTime = (performance.now() / 1000) * animationSpeed
+
         stats.drawCalls = 0
         stats.triangles = 0
 
@@ -432,15 +440,25 @@ class GBufferPass extends BasePass {
         let commandEncoder = null
         let passEncoder = null
 
+        // Track which skins have been updated this frame (avoids duplicate updates)
+        const updatedSkins = new Set()
+
         // New system: render batches from InstanceManager
         if (batches && batches.size > 0) {
             for (const [modelId, batch] of batches) {
                 const mesh = batch.mesh
                 if (!mesh) continue
 
-                // Update skin animation if skinned (skip if externally managed)
-                if (batch.hasSkin && batch.skin && !batch.skin.externallyManaged) {
-                    batch.skin.update(dt)
+                // Update skin animation if skinned (skip if externally managed or already updated)
+                // Use absolute time (same as entities) for consistent animation speed
+                if (batch.hasSkin && batch.skin && !batch.skin.externallyManaged && !updatedSkins.has(batch.skin)) {
+                    // Track animation start time per skin for absolute timing
+                    if (batch.skin._animStartTime === undefined) {
+                        batch.skin._animStartTime = globalAnimTime
+                    }
+                    const skinAnimTime = globalAnimTime - batch.skin._animStartTime
+                    batch.skin.updateAtTime(skinAnimTime)
+                    updatedSkins.add(batch.skin)
                 }
 
                 const pipeline = await this._getOrCreatePipeline(mesh)
@@ -598,9 +616,15 @@ class GBufferPass extends BasePass {
 
                 this.legacyCullingStats.rendered++
 
-                // Update skin animation (skip if externally managed - already updated by RenderGraph)
-                if (mesh.skin && mesh.hasSkin && !mesh.skin.externallyManaged) {
-                    mesh.skin.update(dt)
+                // Update skin animation using absolute time (skip if externally managed or already updated)
+                if (mesh.skin && mesh.hasSkin && !mesh.skin.externallyManaged && !updatedSkins.has(mesh.skin)) {
+                    // Track animation start time per skin for absolute timing
+                    if (mesh.skin._animStartTime === undefined) {
+                        mesh.skin._animStartTime = globalAnimTime
+                    }
+                    const skinAnimTime = globalAnimTime - mesh.skin._animStartTime
+                    mesh.skin.updateAtTime(skinAnimTime)
+                    updatedSkins.add(mesh.skin)
                 }
 
                 // Ensure pipeline geometry matches mesh geometry

package/src/renderer/rendering/passes/HiZPass.js

@@ -84,6 +84,10 @@ class HiZPass extends BasePass {
 
         // Flag to prevent operations during destruction
         this._destroyed = false
+
+        // Warmup frames - occlusion is disabled until scene has rendered for a few frames
+        // This prevents false occlusion on engine creation when depth buffer is not yet populated
+        this._warmupFramesRemaining = 5
     }
 
     /**
@@ -94,6 +98,20 @@ class HiZPass extends BasePass {
         this.depthTexture = depth
     }
 
+    /**
+     * Invalidate occlusion culling data and reset warmup period.
+     * Call this after engine creation, scene loading, or major camera changes
+     * to prevent incorrect occlusion culling with stale data.
+     */
+    invalidate() {
+        this.hasValidHistory = false
+        this.hizDataReady = false
+        this._warmupFramesRemaining = 5  // Wait 5 frames before enabling occlusion
+        // Reset camera tracking to avoid false invalidations
+        vec3.set(this.lastCameraPosition, 0, 0, 0)
+        vec3.set(this.lastCameraDirection, 0, 0, 0)
+    }
+
     async _init() {
         const { device, canvas } = this.engine
         await this._createResources(canvas.width, canvas.height)
@@ -207,6 +225,7 @@ class HiZPass extends BasePass {
         this._destroyed = false
         this.hizDataReady = false
         this.pendingReadback = null
+        this._warmupFramesRemaining = 5  // Wait a few frames after resize before enabling occlusion
     }
 
     /**
@@ -263,6 +282,11 @@ class HiZPass extends BasePass {
         // Increment frame counter
         this._frameCounter++
 
+        // Decrement warmup counter - occlusion is disabled until this reaches 0
+        if (this._warmupFramesRemaining > 0) {
+            this._warmupFramesRemaining--
+        }
+
         // Check if occlusion culling is enabled
         if (!this.settings?.occlusionCulling?.enabled) {
             return
@@ -468,6 +492,12 @@ class HiZPass extends BasePass {
     testSphereOcclusion(bsphere, viewProj, near, far, cameraPos) {
         this.debugStats.tested++
 
+        // Warmup period - disable occlusion for first few frames after creation/reset
+        // This ensures the depth buffer has valid geometry before we use it for culling
+        if (this._warmupFramesRemaining > 0) {
+            return false  // Still warming up - assume visible
+        }
+
         // Safety checks
         if (!this.hizDataReady || !this.hasValidHistory) {
             return false  // No valid data - assume visible

package/src/renderer/rendering/passes/LightingPass.js

@@ -734,6 +734,20 @@ class LightingPass extends BasePass {
     getOutputTexture() {
         return this.outputTexture
     }
+
+    /**
+     * Get the light buffer for volumetric fog
+     */
+    getLightBuffer() {
+        return this.lightBuffer
+    }
+
+    /**
+     * Get the current light count
+     */
+    getLightCount() {
+        return this.lights?.length ?? 0
+    }
 }
 
 export { LightingPass }

package/src/renderer/rendering/passes/ParticlePass.js

@@ -718,10 +718,10 @@ class ParticlePass extends BasePass {
         uniformData[85] = fogAlphas[1]
         uniformData[86] = fogAlphas[2]
         uniformData[87] = 0.0  // padding
-        // fogHeightFade (vec2f) + fogPad2 (vec2f) - floats 88-91
+        // fogHeightFade (vec2f) + fogDebug (f32) + fogPad2 (f32) - floats 88-91
         uniformData[88] = fogHeightFade[0]  // bottomY
         uniformData[89] = fogHeightFade[1]  // topY
-        uniformData[90] = 0.0  // padding
+        uniformData[90] = fogSettings.debug ?? 0  // fogDebug (0=off, 2=show distance)
         uniformData[91] = 0.0  // padding
 
         // Update emitter render settings buffer (lit, emissive, softness, zOffset per emitter)
@@ -774,11 +774,14 @@ class ParticlePass extends BasePass {
         const hasAdditive = emitters.some(e => e.blendMode === 'additive')
 
         // Draw alpha-blended particles first (back-to-front would be ideal, but we draw all)
+        // NOTE: Must submit each pass separately because writeBuffer is immediate
+        // but render passes execute when command buffer is submitted
         if (hasAlpha) {
             uniformData[48] = 0.0  // blendMode = alpha
             device.queue.writeBuffer(this.renderUniformBuffer, 0, uniformData)
 
-            const renderPass = commandEncoder.beginRenderPass({
+            const alphaEncoder = device.createCommandEncoder({ label: 'Particle Alpha Pass' })
+            const renderPass = alphaEncoder.beginRenderPass({
                 colorAttachments: [{
                     view: this.outputTexture.view,
                     loadOp: 'load',
@@ -795,6 +798,7 @@ class ParticlePass extends BasePass {
             renderPass.setBindGroup(0, renderBindGroup)
             renderPass.draw(6, maxParticles, 0, 0)
             renderPass.end()
+            device.queue.submit([alphaEncoder.finish()])
         }
 
         // Draw additive particles (order doesn't matter for additive)
@@ -802,7 +806,8 @@ class ParticlePass extends BasePass {
             uniformData[48] = 1.0  // blendMode = additive
             device.queue.writeBuffer(this.renderUniformBuffer, 0, uniformData)
 
-            const renderPass = commandEncoder.beginRenderPass({
+            const additiveEncoder = device.createCommandEncoder({ label: 'Particle Additive Pass' })
+            const renderPass = additiveEncoder.beginRenderPass({
                 colorAttachments: [{
                     view: this.outputTexture.view,
                     loadOp: 'load',
@@ -819,6 +824,7 @@ class ParticlePass extends BasePass {
             renderPass.setBindGroup(0, renderBindGroup)
             renderPass.draw(6, maxParticles, 0, 0)
             renderPass.end()
+            device.queue.submit([additiveEncoder.finish()])
         }
     }
 

package/src/renderer/rendering/passes/PostProcessPass.js

@@ -26,6 +26,16 @@ class PostProcessPass extends BasePass {
         this.guiCanvas = null          // 2D canvas for GUI overlay
         this.guiTexture = null         // GPU texture for GUI
         this.guiSampler = null
+
+        // CRT support: intermediate texture when CRT is enabled
+        this.intermediateTexture = null
+        this._outputWidth = 0
+        this._outputHeight = 0
+        this._lastOutputToTexture = false  // Track output mode changes
+
+        // Store resize dimensions for runtime texture creation
+        this._resizeWidth = 0
+        this._resizeHeight = 0
     }
 
     // Convenience getter for exposure setting
@@ -38,11 +48,19 @@ class PostProcessPass extends BasePass {
     get ditheringEnabled() { return this.settings?.dithering?.enabled ?? true }
     get colorLevels() { return this.settings?.dithering?.colorLevels ?? 32 }
 
+    // Tonemap mode: 0=ACES, 1=Reinhard, 2=None/Linear
+    get tonemapMode() { return this.settings?.rendering?.tonemapMode ?? 0 }
+
     // Convenience getters for bloom settings
     get bloomEnabled() { return this.settings?.bloom?.enabled ?? true }
     get bloomIntensity() { return this.settings?.bloom?.intensity ?? 1.0 }
     get bloomRadius() { return this.settings?.bloom?.radius ?? 5 }
 
+    // CRT settings (determines if we output to intermediate texture)
+    get crtEnabled() { return this.settings?.crt?.enabled ?? false }
+    get crtUpscaleEnabled() { return this.settings?.crt?.upscaleEnabled ?? false }
+    get shouldOutputToTexture() { return this.crtEnabled || this.crtUpscaleEnabled }
+
     /**
      * Set the input texture (HDR image from LightingPass)
      * @param {Texture} texture - Input HDR texture
@@ -86,6 +104,71 @@ class PostProcessPass extends BasePass {
         this.guiCanvas = canvas
     }
 
+    /**
+     * Get the output texture (for CRT pass to use)
+     * Returns null if outputting directly to canvas
+     */
+    getOutputTexture() {
+        return this.shouldOutputToTexture ? this.intermediateTexture : null
+    }
+
+    /**
+     * Create or resize the intermediate texture for CRT
+     */
+    async _createIntermediateTexture(width, height) {
+        if (!this.shouldOutputToTexture) {
+            // Destroy if no longer needed
+            if (this.intermediateTexture?.texture) {
+                this.intermediateTexture.texture.destroy()
+                this.intermediateTexture = null
+            }
+            return
+        }
+
+        // Skip if size hasn't changed
+        if (this._outputWidth === width && this._outputHeight === height && this.intermediateTexture) {
+            return
+        }
+
+        const { device } = this.engine
+
+        // Destroy old texture
+        if (this.intermediateTexture?.texture) {
+            this.intermediateTexture.texture.destroy()
+        }
+
+        // Create intermediate texture (SDR format for CRT input)
+        const texture = device.createTexture({
+            label: 'PostProcess Intermediate',
+            size: [width, height, 1],
+            format: 'rgba8unorm',
+            usage: GPUTextureUsage.TEXTURE_BINDING |
+                   GPUTextureUsage.RENDER_ATTACHMENT |
+                   GPUTextureUsage.COPY_SRC,
+        })
+
+        const sampler = device.createSampler({
+            label: 'PostProcess Intermediate Sampler',
+            minFilter: 'nearest',
+            magFilter: 'nearest',
+        })
+
+        this.intermediateTexture = {
+            texture,
+            view: texture.createView(),
+            sampler,
+            width,
+            height,
+            format: 'rgba8unorm',  // Required by Pipeline.create()
+        }
+
+        this._outputWidth = width
+        this._outputHeight = height
+        this._needsRebuild = true
+
+        console.log(`PostProcessPass: Created intermediate texture ${width}x${height} for CRT`)
+    }
+
     async _init() {
         // Create dummy 1x1 black bloom texture for when bloom is disabled
         // This ensures shader bindings are always valid
@@ -169,6 +252,11 @@ class PostProcessPass extends BasePass {
 
         const hasBloom = this.bloomTexture && this.bloomEnabled
 
+        // Determine render target: intermediate texture (for CRT) or canvas
+        const renderTarget = this.shouldOutputToTexture && this.intermediateTexture
+            ? this.intermediateTexture
+            : null
+
         this.pipeline = await Pipeline.create(this.engine, {
             label: 'postProcess',
             wgslSource: postProcessingWGSL,
@@ -176,17 +264,41 @@ class PostProcessPass extends BasePass {
             textures: textures,
             uniforms: () => ({
                 noiseParams: [this.noiseSize, this.noiseAnimated ? Math.random() : 0, this.noiseAnimated ? Math.random() : 0, this.fxaa ? 1.0 : 0.0],
-                ditherParams: [this.ditheringEnabled ? 1.0 : 0.0, this.colorLevels, 0, 0],
+                ditherParams: [this.ditheringEnabled ? 1.0 : 0.0, this.colorLevels, this.tonemapMode, 0],
                 bloomParams: [hasBloom ? 1.0 : 0.0, this.bloomIntensity, this.bloomRadius, effectiveBloomTexture?.mipCount ?? 1]
             }),
-            // No renderTarget = output to canvas
+            renderTarget: renderTarget,
         })
 
         this._needsRebuild = false
     }
 
     async _execute(context) {
-        const { device } = this.engine
+        const { device, canvas } = this.engine
+
+        // Check if CRT state changed (need to switch between canvas/texture output)
+        const needsOutputToTexture = this.shouldOutputToTexture
+        const hasIntermediateTexture = !!this.intermediateTexture
+
+        // Detect output mode change
+        if (needsOutputToTexture !== this._lastOutputToTexture) {
+            this._lastOutputToTexture = needsOutputToTexture
+            this._needsRebuild = true
+
+            if (needsOutputToTexture && !hasIntermediateTexture) {
+                // CRT was just enabled - create intermediate texture at stored resize dimensions
+                // Use resize dimensions (render-scaled), not canvas dimensions (full resolution)
+                const w = this._resizeWidth || canvas.width
+                const h = this._resizeHeight || canvas.height
+                await this._createIntermediateTexture(w, h)
+            } else if (!needsOutputToTexture && hasIntermediateTexture) {
+                // CRT was just disabled - destroy intermediate texture
+                if (this.intermediateTexture?.texture) {
+                    this.intermediateTexture.texture.destroy()
+                    this.intermediateTexture = null
+                }
+            }
+        }
 
         // Update GUI texture from canvas if available
         if (this.guiCanvas && this.guiCanvas.width > 0 && this.guiCanvas.height > 0) {
@@ -249,7 +361,7 @@ class PostProcessPass extends BasePass {
         // Update uniforms each frame
         this.pipeline.uniformValues.set({
             noiseParams: [this.noiseSize, this.noiseAnimated ? Math.random() : 0, this.noiseAnimated ? Math.random() : 0, this.fxaa ? 1.0 : 0.0],
-            ditherParams: [this.ditheringEnabled ? 1.0 : 0.0, this.colorLevels, 0, 0],
+            ditherParams: [this.ditheringEnabled ? 1.0 : 0.0, this.colorLevels, this.tonemapMode, 0],
             bloomParams: [hasBloom ? 1.0 : 0.0, this.bloomIntensity, this.bloomRadius, effectiveBloomTexture?.mipCount ?? 1]
         })
 
@@ -258,6 +370,13 @@ class PostProcessPass extends BasePass {
     }
 
     async _resize(width, height) {
+        // Store resize dimensions for runtime texture creation
+        this._resizeWidth = width
+        this._resizeHeight = height
+
+        // Create intermediate texture for CRT if enabled
+        await this._createIntermediateTexture(width, height)
+
         // Pipeline needs rebuild since canvas size changed
         this._needsRebuild = true
     }
@@ -276,6 +395,10 @@ class PostProcessPass extends BasePass {
             this.dummyGuiTexture.texture.destroy()
             this.dummyGuiTexture = null
         }
+        if (this.intermediateTexture?.texture) {
+            this.intermediateTexture.texture.destroy()
+            this.intermediateTexture = null
+        }
     }
 }
 

package/src/renderer/rendering/passes/SSGIPass.js

@@ -148,8 +148,9 @@ class SSGIPass extends BasePass {
             return
         }
 
-        // Update uniforms
-        this._updateUniforms(ssgiSettings, canvas.width, canvas.height)
+        // Update uniforms - use render dimensions (this.width/height are half-res)
+        // Don't use canvas dimensions as they may differ from render dimensions
+        this._updateUniforms(ssgiSettings, this.width * 2, this.height * 2)
 
         // Create bind group
         const bindGroup = device.createBindGroup({

package/src/renderer/rendering/passes/SSGITilePass.js

@@ -35,6 +35,10 @@ class SSGITilePass extends BasePass {
         this.tileCountX = 0
         this.tileCountY = 0
 
+        // Stored render dimensions (from resize)
+        this.renderWidth = 0
+        this.renderHeight = 0
+
         // Input textures
         this.prevHDRTexture = null
         this.emissiveTexture = null
@@ -75,6 +79,10 @@ class SSGITilePass extends BasePass {
     async _createResources(width, height) {
         const { device } = this.engine
 
+        // Store render dimensions for use in _execute
+        this.renderWidth = width
+        this.renderHeight = height
+
         // Calculate tile grid dimensions
         this.tileCountX = Math.ceil(width / TILE_SIZE)
         this.tileCountY = Math.ceil(height / TILE_SIZE)
@@ -160,7 +168,7 @@ class SSGITilePass extends BasePass {
     }
 
     async _execute(context) {
-        const { device, canvas } = this.engine
+        const { device } = this.engine
 
         // Check if SSGI is enabled
         const ssgiSettings = this.settings?.ssgi
@@ -168,9 +176,9 @@ class SSGITilePass extends BasePass {
             return
         }
 
-        // Rebuild if needed
+        // Rebuild if needed (use stored render dimensions, not canvas)
         if (this._needsRebuild) {
-            await this._createResources(canvas.width, canvas.height)
+            await this._createResources(this.renderWidth, this.renderHeight)
         }
 
         // Check required textures
@@ -182,8 +190,9 @@ class SSGITilePass extends BasePass {
             return
         }
 
-        const width = canvas.width
-        const height = canvas.height
+        // Use stored render dimensions, not canvas dimensions
+        const width = this.renderWidth
+        const height = this.renderHeight
         const emissiveBoost = ssgiSettings.emissiveBoost ?? 2.0
         const maxBrightness = ssgiSettings.maxBrightness ?? 4.0