diff --git a/examples/thumbnails/graphics_outlines-colored_large.webp b/examples/thumbnails/graphics_outlines-colored_large.webp new file mode 100644 index 00000000000..da6c81ab05f Binary files /dev/null and b/examples/thumbnails/graphics_outlines-colored_large.webp differ diff --git a/examples/thumbnails/graphics_outlines-colored_small.webp b/examples/thumbnails/graphics_outlines-colored_small.webp new file mode 100644 index 00000000000..5ec6940458b Binary files /dev/null and b/examples/thumbnails/graphics_outlines-colored_small.webp differ diff --git a/src/framework/components/camera/component.js b/src/framework/components/camera/component.js index 2fb4e6a1108..3020ff19aa5 100644 --- a/src/framework/components/camera/component.js +++ b/src/framework/components/camera/component.js @@ -238,6 +238,8 @@ class CameraComponent extends Component { */ set renderPasses(passes) { this._camera.renderPasses = passes; + this.dirtyLayerCompositionCameras(); + this.system.app.scene.updateShaders = true; } /** @@ -254,6 +256,8 @@ class CameraComponent extends Component { * Sets the rendering parameters. If this is not null, the camera will use these rendering * parameters instead of those specified in the scene's rendering parameters * {@link Scene#rendering}. + * + * @type {RenderingParams|null} */ set rendering(value) { this._camera.renderingParams = value; diff --git a/src/platform/graphics/render-target.js b/src/platform/graphics/render-target.js index 1feeb822105..53958ec7c7b 100644 --- a/src/platform/graphics/render-target.js +++ b/src/platform/graphics/render-target.js @@ -136,7 +136,7 @@ class RenderTarget { this.id = id++; // device, from one of the buffers - const device = options.colorBuffer?.device || options.depthBuffer?.device || options.graphicsDevice; + const device = options.colorBuffer?.device ?? options.colorBuffers?.[0].device ?? options.depthBuffer?.device ?? options.graphicsDevice; Debug.assert(device, 'Failed to obtain the device, colorBuffer nor depthBuffer store it.'); this._device = device; diff --git a/src/platform/graphics/webgl/webgl-graphics-device.js b/src/platform/graphics/webgl/webgl-graphics-device.js index f38aba7e3b5..4abb92663ab 100644 --- a/src/platform/graphics/webgl/webgl-graphics-device.js +++ b/src/platform/graphics/webgl/webgl-graphics-device.js @@ -1149,14 +1149,14 @@ class WebglGraphicsDevice extends GraphicsDevice { */ startRenderPass(renderPass) { - DebugGraphics.pushGpuMarker(this, `Pass:${renderPass.name}`); - DebugGraphics.pushGpuMarker(this, 'START-PASS'); - // set up render target const rt = renderPass.renderTarget ?? this.backBuffer; this.renderTarget = rt; Debug.assert(rt); + DebugGraphics.pushGpuMarker(this, `Pass:${renderPass.name} RT:${rt.name}`); + DebugGraphics.pushGpuMarker(this, 'START-PASS'); + this.updateBegin(); // the pass always start using full size of the target diff --git a/src/platform/graphics/webgpu/webgpu-graphics-device.js b/src/platform/graphics/webgpu/webgpu-graphics-device.js index 120a20a82f9..b8b54e06008 100644 --- a/src/platform/graphics/webgpu/webgpu-graphics-device.js +++ b/src/platform/graphics/webgpu/webgpu-graphics-device.js @@ -649,7 +649,7 @@ class WebgpuGraphicsDevice extends GraphicsDevice { // create a new encoder for each pass this.commandEncoder = this.wgpu.createCommandEncoder(); - DebugHelper.setLabel(this.commandEncoder, `${renderPass.name}-Encoder`); + DebugHelper.setLabel(this.commandEncoder, `${renderPass.name}-CmdEncoder RT:${rt.name}`); // framebuffer is initialized at the start of the frame if (rt !== this.backBuffer) { @@ -676,10 +676,10 @@ class WebgpuGraphicsDevice extends GraphicsDevice { // start the pass this.passEncoder = this.commandEncoder.beginRenderPass(renderPassDesc); - DebugHelper.setLabel(this.passEncoder, renderPass.name); + DebugHelper.setLabel(this.passEncoder, `${renderPass.name}-PassEncoder RT:${rt.name}`); // push marker to the passEncoder - DebugGraphics.pushGpuMarker(this, `Pass:${renderPass.name}`); + DebugGraphics.pushGpuMarker(this, `Pass:${renderPass.name} RT:${rt.name}`); this.setupPassEncoderDefaults(); diff --git a/src/platform/graphics/webgpu/webgpu-render-target.js b/src/platform/graphics/webgpu/webgpu-render-target.js index dcaec6b76e2..a7c80f3d499 100644 --- a/src/platform/graphics/webgpu/webgpu-render-target.js +++ b/src/platform/graphics/webgpu/webgpu-render-target.js @@ -151,15 +151,6 @@ class WebgpuRenderTarget { */ constructor(renderTarget) { this.renderTarget = renderTarget; - - // color formats are based on the textures - if (renderTarget._colorBuffers) { - renderTarget._colorBuffers.forEach((colorBuffer, index) => { - this.setColorAttachment(index, undefined, colorBuffer.impl.format); - }); - } - - this.updateKey(); } /** @@ -259,6 +250,14 @@ class WebgpuRenderTarget { this.initDepthStencil(device, wgpu, renderTarget); // initialize color attachments + + // color formats are based on the textures + if (renderTarget._colorBuffers) { + renderTarget._colorBuffers.forEach((colorBuffer, index) => { + this.setColorAttachment(index, undefined, colorBuffer.impl.format); + }); + } + this.renderPassDescriptor.colorAttachments = []; const count = this.isBackbuffer ? 1 : (renderTarget._colorBuffers?.length ?? 0); for (let i = 0; i < count; ++i) { @@ -273,6 +272,8 @@ class WebgpuRenderTarget { } } + this.updateKey(); + this.initialized = true; WebgpuDebug.end(device, { renderTarget }); diff --git a/src/scene/graphics/render-pass-quad.js b/src/scene/graphics/render-pass-quad.js index 2ba23b0c815..a2e4899becb 100644 --- a/src/scene/graphics/render-pass-quad.js +++ b/src/scene/graphics/render-pass-quad.js @@ -17,7 +17,7 @@ class RenderPassQuad extends RenderPass { execute() { const { device } = this; - DebugGraphics.pushGpuMarker(device, 'drawQuadWithShader'); + DebugGraphics.pushGpuMarker(device, `${this.name}:${this.quad.shader.name}`); device.setCullMode(CULLFACE_NONE); device.setDepthState(DepthState.NODEPTH); diff --git a/src/scene/renderer/forward-renderer.js b/src/scene/renderer/forward-renderer.js index 1a5316e1fd4..8a4486eef18 100644 --- a/src/scene/renderer/forward-renderer.js +++ b/src/scene/renderer/forward-renderer.js @@ -794,10 +794,8 @@ class ForwardRenderer extends Renderer { if (renderParams.fog !== FOG_NONE) { - const scene = this.scene; - // color in linear space - tmpColor.linear(scene?.rendering.fogColor); + tmpColor.linear(renderParams.fogColor); const fogUniform = this.fogColor; fogUniform[0] = tmpColor.r; fogUniform[1] = tmpColor.g; @@ -805,10 +803,10 @@ class ForwardRenderer extends Renderer { this.fogColorId.setValue(fogUniform); if (renderParams.fog === FOG_LINEAR) { - this.fogStartId.setValue(scene.rendering.fogStart); - this.fogEndId.setValue(scene.rendering.fogEnd); + this.fogStartId.setValue(renderParams.fogStart); + this.fogEndId.setValue(renderParams.fogEnd); } else { - this.fogDensityId.setValue(scene.rendering.fogDensity); + this.fogDensityId.setValue(renderParams.fogDensity); } } }