add the hot reload pipeline (shader changes) + prerendered zbuffer 1/2 step

Author: jay19240

public/templates/prerendered/source/readme.txt

@@ -17,4 +17,6 @@ matrix[0][0] = matrix[0][0] * -1;
 matrix[1][0] = matrix[1][0] * -1;
 matrix[2][0] = matrix[2][0] * -1;
 matrix[3][0] = matrix[3][0] * -1;
-print(matrix);
+print(matrix);
+
+18 aout à 15h

public/templates/prerendered/zbuffer/scene-zbuffer.jsm

@@ -0,0 +1 @@
+{"Ident": "JSM", "NumVertices": 6, "Vertices": [45.2641, 5.3293, 17.9971, -3.0742, -27.035, 49.9269, 0.5249, 5.3293, 54.3556, 45.2641, 5.3293, 17.9971, 41.665, -27.035, 13.5684, -3.0742, -27.035, 49.9269], "Colors": [], "Normals": [-0.6211, 0.1736, -0.7643, -0.6211, 0.1736, -0.7643, -0.6211, 0.1736, -0.7643, -0.6211, 0.1736, -0.7643, -0.6211, 0.1736, -0.7643, -0.6211, 0.1736, -0.7643], "TextureCoords": [0.0, 0.0, 1.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0], "NumTextureCoords": 6, "NumNormals": 6, "NumColors": 0}

public/templates/prerendered/zbuffer/scene.room

@@ -7,7 +7,8 @@
   "MusicFile": "templates/prerendered/music.mp3",
   "MapFile": "templates/prerendered/zbuffer/scene.jsm",
   "MapTextureFile": "templates/prerendered/zbuffer/scene.png",
-  "MapZBufferFile": "templates/prerendered/zbuffer/scene-zbuffer.png",
+  "MapZBufferFile": "templates/prerendered/zbuffer/scene-zbuffer.jsm",
+  "MapZBufferTextureFile": "templates/prerendered/zbuffer/scene-zbuffer.png",
   "WalkmeshFile": "templates/prerendered/zbuffer/scene.jwm",
   "Camera": {
     "Matrix": [-7.762123107910156, 0.0, 6.306341648101807, 0.0, 1.0994617938995361, 9.847860336303711, 1.3532658815383911, 0.0, -6.209760665893555, 1.7436010837554932, -7.643247604370117, 0.0, -28.044504165649414, 2.4879045486450195, -26.32898712158203, 1.0],

src/boot_screen.js

@@ -22,6 +22,7 @@ import { TripleTriadScreen } from './templates/triple-triad/triple_triad_screen'
 import { VisualNovelScreen } from './templates/visual-novel/visual_novel_screen';
 import { PhysicsJoltScreen } from './templates/physics-jolt/physics_jolt_screen';
 import { PhysicsBox2DScreen } from './templates/physics-box2d/physics_box2d_screen';
+import { CarScreen } from './templates/car/car_screen';
 // ---------------------------------------------------------------------------------------
 import { CurveScreen } from './utils/curve/curve_screen';
 import { MenuRingScreen } from './utils/menu-ring/menu_ring_screen';
@@ -55,7 +56,7 @@ class BootScreen extends Screen {
     this.uiTemplates.add('2', '2D Fight');
     this.uiTemplates.add('3', '3D FPS');
     this.uiTemplates.add('4', '3D Isometric');
-    this.uiTemplates.add('5', '3D Pre-rendered Paint');
+    this.uiTemplates.add('5', '3D Pre-rendered (no z-buffer)');
     this.uiTemplates.add('6', '3D RPG');
     this.uiTemplates.add('7', '2D Shootem\'up');
     this.uiTemplates.add('8', '2D TCG');
@@ -68,7 +69,7 @@ class BootScreen extends Screen {
     this.uiTemplates.add('15', '2D Platformer');
     this.uiTemplates.add('16', '3D Physics With Jolt');
     this.uiTemplates.add('17', '2D Physics With Box2D');
-    this.uiTemplates.add('18', '3D Pre-rendered ZBuffer');
+    this.uiTemplates.add('18', '3D Pre-rendered (zbuffer)');
     this.uiTemplates.setVisible(false);
     uiManager.addWidget(this.uiTemplates, 'position:absolute; top:50%; left:50%; width:60%; transform:translate(-50%,-50%);');
 

src/lib/gfx3/gfx3_debug_shader.ts

@@ -23,7 +23,8 @@ export const PIPELINE_DESC: any = {
     targets: [
       { format: navigator.gpu.getPreferredCanvasFormat()},
       { format: 'rgba16float' }, // normals
-      { format: 'rgba16float' } // ids
+      { format: 'rgba16float' }, // ids
+      { format: 'rgba16float' } // ch1
     ]
   },
   primitive: {
@@ -38,7 +39,7 @@ export const PIPELINE_DESC: any = {
   }
 };
 
-export const VERTEX_SHADER = /* wgsl */`
+export const VERTEX_SHADER = (data: any) => /* wgsl */`
 struct VertexOutput {
   @builtin(position) Position: vec4<f32>,
   @location(0) Color: vec3<f32>
@@ -57,11 +58,12 @@ fn main(
   return output;
 }`;
 
-export const FRAGMENT_SHADER = /* wgsl */`
+export const FRAGMENT_SHADER = (data: any) => /* wgsl */`
 struct FragOutput {
   @location(0) Base: vec4f,
   @location(1) Normal: vec4f,
-  @location(2) Id: vec4f
+  @location(2) Id: vec4f,
+  @location(3) Ch1: vec4f
 }
 
 @fragment
@@ -72,5 +74,6 @@ fn main(
   output.Base = vec4(Color, 1);
   output.Normal = vec4(0.0, 0.0, 0.0, 0.0);
   output.Id = vec4(0.0, 0.0, 0.0, 0.0);
+  output.Ch1 = vec4(0.0, 0.0, 0.0, 0.0);
   return output;
 }`;

src/lib/gfx3/gfx3_drawable.ts

@@ -134,14 +134,14 @@ class Gfx3Drawable extends Gfx3Transformable implements Poolable<Gfx3Drawable> {
    * ■ dither: a = 4
    * ■ outline: a = 8
    * ■ shadow volume: a = 16
-   * ■ second channel: a = 32
+   * ■ channel 1: a = 32 (channel 1 is a rendering texture used by post process unit for many different things, it is invisible by default)
    * 
    * @param {number} r - The pur identifier you can use for custom stuff.
    * @param {number} g - The decals group.
    * @param {number} b - The lights group.
    * @param {number} a - The flags value for specials effects.
    */
-  setId(r: number, g: number, b: number, a: number): void {
+  setId(r: number, g: number = 0, b: number = 0, a: number = 0): void {
     this.id = [r, g, b, a];
   }
 
@@ -203,6 +203,7 @@ class Gfx3Drawable extends Gfx3Transformable implements Poolable<Gfx3Drawable> {
     drawable.rotation = [this.rotation[0], this.rotation[1], this.rotation[2]];
     drawable.scale = [this.scale[0], this.scale[1], this.scale[2]];
     drawable.quaternion = new Quaternion(this.quaternion.w, this.quaternion.x, this.quaternion.y, this.quaternion.z);
+    drawable.id = this.id;
     drawable.boundingBox = new Gfx3BoundingBox(this.boundingBox.min, this.boundingBox.max);
 
     drawable.beginVertices(this.vertexCount);

src/lib/gfx3/gfx3_group.ts

@@ -188,6 +188,16 @@ class Gfx3StaticGroup {
   getBindGroup(): GPUBindGroup {
     return this.bindGroup!;
   }
+
+  /**
+   * Set a new pipeline.
+   * Of course, you need to call allocate() after setPipeline().
+   * 
+   * @param {GPURenderPipeline} pipeline - The new pipeline.
+   */
+  setPipeline(pipeline: GPURenderPipeline): void {
+    this.pipeline = pipeline;
+  }
 }
 
 /**
@@ -349,6 +359,16 @@ class Gfx3DynamicGroup {
   getSize(): number {
     return this.size;
   }
+
+  /**
+   * Set a new pipeline.
+   * Of course, you need to call allocate() after setPipeline().
+   * 
+   * @param {GPURenderPipeline} pipeline - The new pipeline.
+   */
+  setPipeline(pipeline: GPURenderPipeline): void {
+    this.pipeline = pipeline;
+  }
 }
 
 export { Gfx3StaticGroup, Gfx3DynamicGroup };

src/lib/gfx3/gfx3_manager.ts

@@ -27,6 +27,7 @@ class Gfx3Manager {
   normalsTexture: Gfx3RenderingTexture;
   idsTexture: Gfx3RenderingTexture;
   depthTexture: Gfx3RenderingTexture;
+  channel1Texture: Gfx3RenderingTexture;
   commandEncoder: GPUCommandEncoder;
   passEncoder: GPURenderPassEncoder;
   pipelines: Map<string, GPURenderPipeline>;
@@ -51,6 +52,8 @@ class Gfx3Manager {
     this.normalsTexture = {} as Gfx3RenderingTexture;
     this.idsTexture = {} as Gfx3RenderingTexture;
     this.depthTexture = {} as Gfx3RenderingTexture;
+    this.channel1Texture = {} as Gfx3RenderingTexture;
+
     this.commandEncoder = {} as GPUCommandEncoder;
     this.passEncoder = {} as GPURenderPassEncoder;
     this.pipelines = new Map<string, GPURenderPipeline>();
@@ -109,6 +112,7 @@ class Gfx3Manager {
     this.normalsTexture = this.createRenderingTexture('rgba16float');
     this.idsTexture = this.createRenderingTexture('rgba16float');
     this.depthTexture = this.createRenderingTexture('depth24plus');
+    this.channel1Texture = this.createRenderingTexture('rgba16float');
     this.vertexBuffer = this.device.createBuffer({ size: 0, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST });
 
     eventManager.subscribe(coreManager, 'E_RESIZE', this, this.#handleWindowResize);
@@ -185,6 +189,11 @@ class Gfx3Manager {
         clearValue: {r: 0.0, g: 0.0, b: 0.0, a: 1.0},
         loadOp: 'clear',
         storeOp: 'store'
+      },{
+        view: this.channel1Texture.gpuTextureView,
+        clearValue: {r: 0.0, g: 0.0, b: 0.0, a: 1.0},
+        loadOp: 'clear',
+        storeOp: 'store'
       }],
       depthStencilAttachment: {
         view: this.depthTexture.gpuTextureView,
@@ -563,6 +572,13 @@ class Gfx3Manager {
     return this.depthTexture;
   }
 
+  /**
+   * Returns the channel 1 texture.
+   */
+  getChannel1Texture(): Gfx3RenderingTexture {
+    return this.channel1Texture;
+  }
+
   /**
    * Returns the GPUCommandEncoder.
    */

src/lib/gfx3/gfx3_renderer_abstract.ts

@@ -5,15 +5,34 @@ import { gfx3Manager } from '../gfx3/gfx3_manager';
  */
 abstract class Gfx3RendererAbstract {
   pipeline: GPURenderPipeline;
+  pipelineId: string;
+  data: any;
 
   /**
    * @param {string} pipelineId - A unique identifier for the render pipeline.
-   * @param {string} vertexShader - The code for the vertex shader.
-   * @param {string} fragmentShader - The code for the fragment shader.
+   * @param {Function} vertexShader - The code for the vertex shader.
+   * @param {Function} fragmentShader - The code for the fragment shader.
    * @param {GPURenderPipelineDescriptor} pipelineDesc - The configuration of the pipeline, such as the vertex and fragment shaders, the color and depth formats, the primitive topology
+   * @param {any} data - The custom data used by the shader template.
    */
-  constructor(pipelineId: string, vertexShader: string, fragmentShader: string, pipelineDesc: GPURenderPipelineDescriptor) {
-    this.pipeline = gfx3Manager.loadPipeline(pipelineId, vertexShader, fragmentShader, pipelineDesc);
+  constructor(pipelineId: string, vertexShader: (data: any) => string, fragmentShader: (data: any) => string, pipelineDesc: GPURenderPipelineDescriptor, data: any = {}) {
+    this.pipeline = gfx3Manager.loadPipeline(pipelineId, vertexShader(data), fragmentShader(data), pipelineDesc);
+    this.pipelineId = pipelineId;
+    this.data = data;
+  }
+
+  /**
+   * Reload the pipeline.
+   * 
+   * @param {Function} vertexShader - The code for the vertex shader.
+   * @param {Function} fragmentShader - The code for the fragment shader.
+   * @param {GPURenderPipelineDescriptor} pipelineDesc - The configuration of the pipeline, such as the vertex and fragment shaders, the color and depth formats, the primitive topology
+   * @param {any} data - The custom data used by the shader template.
+   */
+  reload(vertexShader: (options: any) => string, fragmentShader: (options: any) => string, pipelineDesc: GPURenderPipelineDescriptor, data: any = {}): void {
+    gfx3Manager.deletePipeline(this.pipelineId);
+    this.pipeline = gfx3Manager.loadPipeline(this.pipelineId, vertexShader(data), fragmentShader(data), pipelineDesc);
+    this.data = data;
   }
 }
 

src/lib/gfx3_flare/gfx3_flare_lens.ts

@@ -114,6 +114,15 @@ class Gfx3FlareLens {
   setMaxDistanceBrightness(maxDistanceBrightness: number): void {
     this.maxDistanceBrightness = maxDistanceBrightness;
   }
+
+  /**
+   * Replace default flares config by a custom one.
+   * 
+   * @param {Array<Gfx3Flare>} flares - The flare list.
+   */
+  setFlares(flares: Array<Gfx3Flare>): void {
+    this.flares = flares;
+  }
 }
 
 export { Gfx3FlareLens };