[Breaking] Quad render class, drawQuadWithShader refactor, Camera render events moved.

examples/webgpu-temp/one.html

@@ -27,6 +27,7 @@
         import { Shader } from '../../src/platform/graphics/shader.js';
         import { Texture } from '../../src/platform/graphics/texture.js';
         import { RenderTarget } from '../../src/platform/graphics/render-target.js';
+        import { drawQuadWithShader } from '../../src/scene/graphics/quad-render-utils.js';
         import {
             DEVICETYPE_WEBGL, DEVICETYPE_WEBGPU,
             SEMANTIC_TEXCOORD0, SEMANTIC_POSITION, CULLFACE_NONE,
@@ -43,6 +44,7 @@
         import { StandardMaterial } from "../../src/scene/materials/standard-material.js";
         import { BLEND_ADDITIVE, BLEND_SUBTRACTIVE, BLEND_SCREEN, BLEND_NORMAL, BLEND_NONE } from "../../src/scene/constants.js";
 
+        import { createShaderFromCode } from '../../src/scene/shader-lib/utils.js';
         import { Material } from "../../src/scene/materials/material.js";
         import { BasicMaterial } from "../../src/scene/materials/basic-material.js";
         import { RenderComponentSystem } from '../../src/framework/components/render/system.js';
@@ -167,6 +169,7 @@
 
             // Create the shader definition and shader from the vertex and fragment shaders
             const shaderDefinition = {
+                name: 'OneExampleTestShader',
                 attributes: {
                     vertex_position: SEMANTIC_POSITION,
                     vertex_texCoord0: SEMANTIC_TEXCOORD0
@@ -236,21 +239,21 @@
             const worldLayer = app.scene.layers.getLayerByName("World");
             const skyboxLayer = app.scene.layers.getLayerByName("Skybox");
 
-            const textureCamera = new Entity("TextureCamera");
-            textureCamera.addComponent("camera", {
-                clearColor: new Color(0.2, 0.2, 0.4),
+            // const textureCamera = new Entity("TextureCamera");
+            // textureCamera.addComponent("camera", {
+            //     clearColor: new Color(0.2, 0.2, 0.4),
 
-                layers: [worldLayer.id, skyboxLayer.id],
+            //     layers: [worldLayer.id, skyboxLayer.id],
 
-                // set the priority of textureCamera to lower number than the priority of the main camera (which is at default 0)
-                // to make it rendered first each frame
-                priority: -1,
+            //     // set the priority of textureCamera to lower number than the priority of the main camera (which is at default 0)
+            //     // to make it rendered first each frame
+            //     priority: -1,
 
-                // this camera renders into texture target
-                renderTarget: renderTarget
-            });
-            app.root.addChild(textureCamera);
-            textureCamera.setLocalPosition(0, 0, 12);
+            //     // this camera renders into texture target
+            //     renderTarget: renderTarget
+            // });
+            // app.root.addChild(textureCamera);
+            // textureCamera.setLocalPosition(0, 0, 12);
 
             /////////////// skinning - commented out as it is still not functional
 
@@ -301,6 +304,21 @@
             app.root.addChild(lightDir);
 
 
+            const textureBlitVertexShader = `
+                attribute vec2 vertex_position;
+                void main(void) {
+                    gl_Position = vec4(vertex_position, 0.5, 1.0);
+                }`;
+
+            const textureBlitFragmentShader = `
+                void main(void) {
+                    gl_FragColor = vec4(1, 0, 0, 1);
+                }`;
+
+
+
+            // console.log("create shadewr !!!!!!!!");
+            const blitShader = createShaderFromCode(app.graphicsDevice, textureBlitVertexShader, textureBlitFragmentShader, `blitShader`);
 
 
             let time = 0;
@@ -328,8 +346,18 @@
                 camera.setLocalPosition(20 * Math.cos(time * 0.2), 2, 20 * Math.sin(time * 0.2));
                 camera.lookAt(Vec3.ZERO);
 
-                textureCamera.setLocalPosition(20 * Math.cos(time * 0.2), 2, 20 * Math.sin(time * 0.2));
-                textureCamera.lookAt(Vec3.ZERO);
+                // textureCamera.setLocalPosition(20 * Math.cos(time * 0.2), 2, 20 * Math.sin(time * 0.2));
+                // textureCamera.lookAt(Vec3.ZERO);
+
+
+
+
+                drawQuadWithShader(app.graphicsDevice, renderTarget, blitShader);
+
+
+
+
+
 
                 app.drawTexture(0.6, -0.7, 0.6, 0.3, assets.rocks.resource);
                 app.drawTexture(-0.6, -0.7, 0.6, 0.5, renderTexture);

src/deprecated/deprecated.js

@@ -35,11 +35,11 @@ import {
     TYPE_INT8, TYPE_UINT8, TYPE_INT16, TYPE_UINT16, TYPE_INT32, TYPE_UINT32, TYPE_FLOAT32
 } from '../platform/graphics/constants.js';
 import { begin, end, fogCode, gammaCode, skinCode, tonemapCode } from '../scene/shader-lib/programs/common.js';
-import { drawQuadWithShader } from '../platform/graphics/simple-post-effect.js';
+import { drawQuadWithShader } from '../scene/graphics/quad-render-utils.js';
 import { shaderChunks } from '../scene/shader-lib/chunks/chunks.js';
 import { GraphicsDevice } from '../platform/graphics/graphics-device.js';
 import { IndexBuffer } from '../platform/graphics/index-buffer.js';
-import { createFullscreenQuad, drawFullscreenQuad, PostEffect } from '../scene/graphics/post-effect.js';
+import { drawFullscreenQuad, PostEffect } from '../scene/graphics/post-effect.js';
 import { PostEffectQueue } from '../framework/components/camera/post-effect-queue.js';
 import { ProgramLibrary } from '../scene/shader-lib/program-library.js';
 import { getProgramLibrary, setProgramLibrary } from '../scene/shader-lib/get-program-library.js';
@@ -436,7 +436,9 @@ export const gfx = {
 };
 
 export const posteffect = {
-    createFullscreenQuad: createFullscreenQuad,
+    createFullscreenQuad: (device) => {
+        return device.quadVertexBuffer;
+    },
     drawFullscreenQuad: drawFullscreenQuad,
     PostEffect: PostEffect,
     PostEffectQueue: PostEffectQueue

src/framework/lightmapper/lightmapper.js

@@ -16,7 +16,7 @@ import {
 } from '../../platform/graphics/constants.js';
 import { DebugGraphics } from '../../platform/graphics/debug-graphics.js';
 import { RenderTarget } from '../../platform/graphics/render-target.js';
-import { drawQuadWithShader } from '../../platform/graphics/simple-post-effect.js';
+import { drawQuadWithShader } from '../../scene/graphics/quad-render-utils.js';
 import { Texture } from '../../platform/graphics/texture.js';
 
 import { MeshInstance } from '../../scene/mesh-instance.js';

src/index.js

@@ -58,7 +58,6 @@ export * from './platform/audio/constants.js';
 // PLATFORM / GRAPHICS
 export * from './platform/graphics/constants.js';
 export { createGraphicsDevice } from './platform/graphics/graphics-device-create.js';
-export { drawQuadWithShader, drawTexture } from './platform/graphics/simple-post-effect.js';
 export { GraphicsDevice } from './platform/graphics/graphics-device.js';
 export { IndexBuffer } from './platform/graphics/index-buffer.js';
 export { RenderTarget } from './platform/graphics/render-target.js';
@@ -102,6 +101,7 @@ export { SoundInstance3d } from './platform/sound/instance3d.js';
 // SCENE
 export * from './scene/constants.js';
 export { calculateNormals, calculateTangents, createBox, createCapsule, createCone, createCylinder, createMesh, createPlane, createSphere, createTorus } from './scene/procedural.js';
+export { drawQuadWithShader, drawTexture } from './scene/graphics/quad-render-utils.js';
 export { BasicMaterial } from './scene/materials/basic-material.js';
 export { Batch } from './scene/batching/batch.js';
 export { BatchGroup } from './scene/batching/batch-group.js';
@@ -124,6 +124,7 @@ export { Morph } from './scene/morph.js';
 export { MorphInstance } from './scene/morph-instance.js';
 export { MorphTarget } from './scene/morph-target.js';
 export { ParticleEmitter } from './scene/particle-system/particle-emitter.js';
+export { QuadRender } from './scene/graphics/quad-render.js';
 export { Scene } from './scene/scene.js';
 export { Skin } from './scene/skin.js';
 export { SkinInstance } from './scene/skin-instance.js';

src/platform/graphics/constants.js

@@ -1177,8 +1177,9 @@ export const SHADERSTAGE_FRAGMENT = 2;
 export const SHADERSTAGE_COMPUTE = 4;
 
 // indices of commonly used bind groups
-export const BINDGROUP_VIEW = 0;
-export const BINDGROUP_MESH = 1;
+// sorted in a way that any trailing bind groups can be unused in any render pass
+export const BINDGROUP_MESH = 0;
+export const BINDGROUP_VIEW = 1;
 
 // name of the default uniform buffer slot in a bind group
 export const UNIFORM_BUFFER_DEFAULT_SLOT_NAME = 'default';

src/platform/graphics/graphics-device.js

@@ -4,9 +4,12 @@ import { platform } from '../../core/platform.js';
 import { now } from '../../core/time.js';
 
 import {
-    PRIMITIVE_POINTS, PRIMITIVE_TRIFAN
+    BUFFER_STATIC,
+    PRIMITIVE_POINTS, PRIMITIVE_TRIFAN, SEMANTIC_POSITION, TYPE_FLOAT32
 } from './constants.js';
 import { ScopeSpace } from './scope-space.js';
+import { VertexBuffer } from './vertex-buffer.js';
+import { VertexFormat } from './vertex-format.js';
 
 const EVENT_RESIZE = 'resizecanvas';
 
@@ -124,6 +127,14 @@ class GraphicsDevice extends EventHandler {
       */
     textureHalfFloatRenderable;
 
+    /**
+     * A vertex buffer representing a quad.
+     *
+     * @type {VertexBuffer}
+     * @ignore
+     */
+    quadVertexBuffer;
+
     constructor(canvas) {
         super();
 
@@ -188,6 +199,19 @@ class GraphicsDevice extends EventHandler {
         this.textureBias.setValue(0.0);
     }
 
+    /**
+     * Function that executes after the device has been created.
+     */
+    postInit() {
+
+        // create quad vertex buffer
+        const vertexFormat = new VertexFormat(this, [
+            { semantic: SEMANTIC_POSITION, components: 2, type: TYPE_FLOAT32 }
+        ]);
+        const positions = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+        this.quadVertexBuffer = new VertexBuffer(this, vertexFormat, 4, BUFFER_STATIC, positions);
+    }
+
     /**
      * Fired when the canvas is resized.
      *
@@ -203,6 +227,9 @@ class GraphicsDevice extends EventHandler {
         // fire the destroy event.
         // textures and other device resources may destroy themselves in response.
         this.fire('destroy');
+
+        this.quadVertexBuffer?.destroy();
+        this.quadVertexBuffer = null;
     }
 
     onDestroyShader(shader) {
@@ -232,6 +259,12 @@ class GraphicsDevice extends EventHandler {
         this.renderTarget = null;
     }
 
+    initializeRenderState() {
+        // Cached viewport and scissor dimensions
+        this.vx = this.vy = this.vw = this.vh = 0;
+        this.sx = this.sy = this.sw = this.sh = 0;
+    }
+
     /**
      * Sets the specified render target on the device. If null is passed as a parameter, the back
      * buffer becomes the current target for all rendering operations.

src/platform/graphics/render-pass.js

@@ -123,23 +123,33 @@ class RenderPass {
      */
     fullSizeClearRect = true;
 
+    /**
+     * Custom function that is called before the pass has started.
+     *
+     * @type {Function}
+     */
+    before;
+
+    /**
+     * Custom function that is called after the pass has fnished.
+     *
+     * @type {Function}
+     */
+    after;
+
     /**
      * Creates an instance of the RenderPass.
      *
      * @param {import('../graphics/graphics-device.js').GraphicsDevice} graphicsDevice - The
      * graphics device.
      * @param {Function} execute - Custom function that is called when the pass needs to be
      * rendered.
-     * @param {Function} [after] - Custom function that is called after the pass has fnished.
      */
-    constructor(graphicsDevice, execute, after = null) {
+    constructor(graphicsDevice, execute) {
         this.device = graphicsDevice;
 
         /** @type {Function} */
         this.execute = execute;
-
-        /** @type {Function} */
-        this.after = after;
     }
 
     /**
@@ -211,6 +221,8 @@ class RenderPass {
         const realPass = this.renderTarget !== undefined;
         DebugGraphics.pushGpuMarker(device, `Pass:${this.name}`);
 
+        this.before?.();
+
         if (realPass) {
             device.startPass(this);
         }

src/platform/graphics/shader-processor-options.js

@@ -1,5 +1,10 @@
 import { BINDGROUP_VIEW } from "./constants.js";
 
+/**
+ * Options to drive shader processing to add support for bind groups and uniform buffers.
+ *
+ * @ignore
+ */
 class ShaderProcessorOptions {
     /** @type {import('./uniform-buffer-format.js').UniformBufferFormat[]} */
     uniformFormats = [];
@@ -10,9 +15,9 @@ class ShaderProcessorOptions {
     /**
      * Constructs shader processing options, used to process the shader for uniform buffer support.
      *
-     * @param {import('./uniform-buffer-format.js').UniformBufferFormat} viewUniformFormat - Format
+     * @param {import('./uniform-buffer-format.js').UniformBufferFormat} [viewUniformFormat] - Format
      * of the uniform buffer.
-     * @param {import('./bind-group-format.js').BindGroupFormat} viewBindGroupFormat - Format of
+     * @param {import('./bind-group-format.js').BindGroupFormat} [viewBindGroupFormat] - Format of
      * the bind group.
      */
     constructor(viewUniformFormat, viewBindGroupFormat) {
@@ -32,7 +37,7 @@ class ShaderProcessorOptions {
 
         for (let i = 0; i < this.uniformFormats.length; i++) {
             const uniformFormat = this.uniformFormats[i];
-            if (uniformFormat.get(name)) {
+            if (uniformFormat?.get(name)) {
                 return true;
             }
         }
@@ -50,13 +55,24 @@ class ShaderProcessorOptions {
 
         for (let i = 0; i < this.bindGroupFormats.length; i++) {
             const groupFormat = this.bindGroupFormats[i];
-            if (groupFormat.getTexture(name)) {
+            if (groupFormat?.getTexture(name)) {
                 return true;
             }
         }
 
         return false;
     }
+
+    /**
+     * Generate unique key represending the processing options.
+     *
+     * @returns {string} - Returns the key.
+     */
+    generateKey() {
+        // TODO: Optimize. Uniform and BindGroup formats should have their keys evaluated in their
+        // constructors, and here we should simply concatenate those.
+        return JSON.stringify(this);
+    }
 }
 
 export { ShaderProcessorOptions };

src/platform/graphics/shader-processor.js

@@ -297,7 +297,9 @@ class ShaderProcessor {
         });
 
         // and also for generated mesh format, which is at the slot 0 of the bind group
-        code += meshUniformBufferFormat.getShaderDeclaration(BINDGROUP_MESH, 0);
+        if (meshUniformBufferFormat) {
+            code += meshUniformBufferFormat.getShaderDeclaration(BINDGROUP_MESH, 0);
+        }
 
         // generate code for textures
         processingOptions.bindGroupFormats.forEach((format, bindGroupIndex) => {