Merge pull request #1463 from actnwit/feat/deferred-render-pipeline

feat: deferred render pipeline
actnwit · Jul 29, 2024 · 65b7153 · 65b7153
2 parents 80cd837 + 754c565
commit 65b7153
Show file tree

Hide file tree

Showing 65 changed files with 629 additions and 521 deletions.
diff --git a/samples/simple/GaussianBlurDepth/main.ts b/samples/simple/GaussianBlurDepth/main.ts
@@ -128,26 +128,15 @@ function createEntityBoard() {
 function createAndSetFramebuffer(
   renderPass: Rn.RenderPass,
   resolution: number,
-  textureNum: number,
-  property: {
-    level?: number | undefined;
-    internalFormat?: Rn.TextureParameterEnum | undefined;
-    format?: Rn.PixelFormatEnum | undefined;
-    type?: Rn.ComponentTypeEnum | undefined;
-    magFilter?: Rn.TextureParameterEnum | undefined;
-    minFilter?: Rn.TextureParameterEnum | undefined;
-    wrapS?: Rn.TextureParameterEnum | undefined;
-    wrapT?: Rn.TextureParameterEnum | undefined;
-    createDepthBuffer?: boolean | undefined;
-    isMSAA?: boolean | undefined;
-  } = {}
+  textureNum: number
 ) {
-  const framebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(
-    resolution,
-    resolution,
-    textureNum,
-    property
-  );
+  const framebuffer = Rn.RenderableHelper.createFrameBuffer({
+    width: resolution,
+    height: resolution,
+    textureNum: textureNum,
+    textureFormats: [Rn.TextureFormat.RGBA8],
+    createDepthBuffer: true,
+  });
   renderPass.setFramebuffer(framebuffer);
   return framebuffer;
 }

diff --git a/samples/simple/Gltf2ImporterShadow/main.ts b/samples/simple/Gltf2ImporterShadow/main.ts
@@ -185,26 +185,15 @@ function createRenderPassDepth(
 function createAndSetFramebuffer(
   renderPass: Rn.RenderPass,
   resolution: number,
-  textureNum: number,
-  property: {
-    level?: number | undefined;
-    internalFormat?: Rn.TextureParameterEnum | undefined;
-    format?: Rn.PixelFormatEnum | undefined;
-    type?: Rn.ComponentTypeEnum | undefined;
-    magFilter?: Rn.TextureParameterEnum | undefined;
-    minFilter?: Rn.TextureParameterEnum | undefined;
-    wrapS?: Rn.TextureParameterEnum | undefined;
-    wrapT?: Rn.TextureParameterEnum | undefined;
-    createDepthBuffer?: boolean | undefined;
-    isMSAA?: boolean | undefined;
-  } = {}
+  textureNum: number
 ) {
-  const framebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(
-    resolution,
-    resolution,
-    textureNum,
-    property
-  );
+  const framebuffer = Rn.RenderableHelper.createFrameBuffer({
+    width: resolution,
+    height: resolution,
+    textureNum: textureNum,
+    textureFormats: [Rn.TextureFormat.RGBA8],
+    createDepthBuffer: true,
+  });
   renderPass.setFramebuffer(framebuffer);
   return framebuffer;
 }

diff --git a/samples/simple/GltfImporter-iOS/main.ts b/samples/simple/GltfImporter-iOS/main.ts
@@ -61,12 +61,13 @@ const expressionPostEffect = new Rn.Expression();
 expressions.push(expressionPostEffect);
 
 // gamma correction
-const gammaTargetFramebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(
-  displayResolution,
-  displayResolution,
-  1,
-  {}
-);
+const gammaTargetFramebuffer = Rn.RenderableHelper.createFrameBuffer({
+  width: displayResolution,
+  height: displayResolution,
+  textureNum: 1,
+  textureFormats: [Rn.TextureFormat.RGBA8],
+  createDepthBuffer: true,
+});
 for (const renderPass of vrmExpression.renderPasses) {
   renderPass.setFramebuffer(gammaTargetFramebuffer);
   renderPass.toClearColorBuffer = false;
@@ -91,12 +92,13 @@ setTextureParameterForMeshComponents(
 );
 
 // fxaa
-const fxaaTargetFramebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(
-  displayResolution,
-  displayResolution,
-  1,
-  {}
-);
+const fxaaTargetFramebuffer = Rn.RenderableHelper.createFrameBuffer({
+  width: displayResolution,
+  height: displayResolution,
+  textureNum: 1,
+  textureFormats: [Rn.TextureFormat.RGBA8],
+  createDepthBuffer: true,
+});
 gammaCorrectionRenderPass.setFramebuffer(fxaaTargetFramebuffer);
 
 const fxaaRenderPass = createRenderPassSharingEntitiesAndCamera(gammaCorrectionRenderPass);

diff --git a/samples/simple/ShadowMapping/main.ts b/samples/simple/ShadowMapping/main.ts
@@ -61,12 +61,13 @@ controller.registerEventListeners(document.getElementById('world'));
 
 // prepare render passes
 const renderPassDepth = createRenderPassDepth(cameraComponentDepth, entitiesRenderTarget);
-const framebufferDepth = Rn.RenderableHelper.createTexturesForRenderTarget(
-  resolutionDepthCamera,
-  resolutionDepthCamera,
-  1,
-  {}
-);
+const framebufferDepth = Rn.RenderableHelper.createFrameBuffer({
+  width: resolutionDepthCamera,
+  height: resolutionDepthCamera,
+  textureNum: 1,
+  textureFormats: [Rn.TextureFormat.RGBA8],
+  createDepthBuffer: true,
+});
 renderPassDepth.setFramebuffer(framebufferDepth);
 
 const renderPassMain = createRenderPassMain(

diff --git a/samples/simple/SkinShader/main.ts b/samples/simple/SkinShader/main.ts
@@ -13,12 +13,13 @@ const setupRenderPassEntityUidOutput = function (
   renderPass.setMaterial(entityUidOutputMaterial);
   renderPass.cameraComponent = cameraComponent;
 
-  const framebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(
-    canvas.clientWidth,
-    canvas.clientHeight,
-    1,
-    {}
-  );
+  const framebuffer = Rn.RenderableHelper.createFrameBuffer({
+    width: canvas.clientWidth,
+    height: canvas.clientHeight,
+    textureNum: 1,
+    textureFormats: [Rn.TextureFormat.RGBA8],
+    createDepthBuffer: true,
+  });
   renderPass.setFramebuffer(framebuffer);
   renderPass.clearColor = Rn.Vector4.fromCopyArray([0, 0, 0, 1]);
   renderPass.toClearColorBuffer = true;

diff --git a/samples/test_e2e/ColorGradingUsingLUTs/main.ts b/samples/test_e2e/ColorGradingUsingLUTs/main.ts
@@ -13,7 +13,7 @@ await Rn.System.init({
 const cameraComponentMain = createEntityMainCamera().getCamera();
 const renderPassMain = createRenderPassMain(cameraComponentMain);
 const resolution = rnCanvasElement.width;
-createAndSetFramebuffer(renderPassMain, resolution, 1, {});
+createAndSetFramebuffer(renderPassMain, resolution, 1);
 
 const cameraComponentPostEffect = createEntityPostEffectCamera().getCamera();
 const renderPassColorGrading = createRenderPassColorGrading(
@@ -86,26 +86,15 @@ function createEntityColoredBoard(diffuseColor: Rn.Vector4) {
 function createAndSetFramebuffer(
   renderPass: Rn.RenderPass,
   resolution: number,
-  textureNum: number,
-  property: {
-    level?: number | undefined;
-    internalFormat?: Rn.TextureParameterEnum | undefined;
-    format?: Rn.PixelFormatEnum | undefined;
-    type?: Rn.ComponentTypeEnum | undefined;
-    magFilter?: Rn.TextureParameterEnum | undefined;
-    minFilter?: Rn.TextureParameterEnum | undefined;
-    wrapS?: Rn.TextureParameterEnum | undefined;
-    wrapT?: Rn.TextureParameterEnum | undefined;
-    createDepthBuffer?: boolean | undefined;
-    isMSAA?: boolean | undefined;
-  }
+  textureNum: number
 ) {
-  const framebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(
-    resolution,
-    resolution,
+  const framebuffer = Rn.RenderableHelper.createFrameBuffer({
+    width: resolution,
+    height: resolution,
     textureNum,
-    property
-  );
+    textureFormats: [Rn.TextureFormat.RGBA8],
+    createDepthBuffer: true,
+  });
   renderPass.setFramebuffer(framebuffer);
   return framebuffer;
 }

diff --git a/samples/test_e2e/FXAA/main.ts b/samples/test_e2e/FXAA/main.ts
@@ -19,12 +19,13 @@ await Rn.System.init({
 
 // setup the Main RenderPass
 renderPassMain = await setupRenderPassMain();
-framebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(
-  canvas!.clientWidth,
-  canvas!.clientHeight,
-  1,
-  {}
-);
+framebuffer = Rn.RenderableHelper.createFrameBuffer({
+  width: canvas.clientWidth,
+  height: canvas.clientHeight,
+  textureNum: 1,
+  textureFormats: [Rn.TextureFormat.RGBA8],
+  createDepthBuffer: true,
+});
 // renderPassMain.setFramebuffer(framebuffer);
 
 // setup the FXAA RenderPass

diff --git a/samples/test_e2e/GaussianBlur/main.ts b/samples/test_e2e/GaussianBlur/main.ts
@@ -19,10 +19,10 @@ await Rn.System.init({
 const cameraComponentMain = createEntityMainCamera().getCamera();
 const renderPassMain = createRenderPassMain(cameraComponentMain);
 const resolution = rnCanvasElement.width;
-createAndSetFramebuffer(renderPassMain, resolution, 1, {});
+createAndSetFramebuffer(renderPassMain, resolution, 1);
 
 const renderPassGaussianBlurH = createRenderPassGaussianBlur(renderPassMain, true);
-createAndSetFramebuffer(renderPassGaussianBlurH, resolution, 1, {});
+createAndSetFramebuffer(renderPassGaussianBlurH, resolution, 1);
 
 const renderPassGaussianBlurHV = createRenderPassGaussianBlur(renderPassGaussianBlurH, false);
 
@@ -90,26 +90,15 @@ function createEntityColoredBoard(boardColor: Rn.Vector4) {
 function createAndSetFramebuffer(
   renderPass: Rn.RenderPass,
   resolution: number,
-  textureNum: number,
-  property: {
-    level?: number | undefined;
-    internalFormat?: Rn.TextureParameterEnum | undefined;
-    format?: Rn.PixelFormatEnum | undefined;
-    type?: Rn.ComponentTypeEnum | undefined;
-    magFilter?: Rn.TextureParameterEnum | undefined;
-    minFilter?: Rn.TextureParameterEnum | undefined;
-    wrapS?: Rn.TextureParameterEnum | undefined;
-    wrapT?: Rn.TextureParameterEnum | undefined;
-    createDepthBuffer?: boolean | undefined;
-    isMSAA?: boolean | undefined;
-  }
+  textureNum: number
 ) {
-  const framebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(
-    resolution,
-    resolution,
+  const framebuffer = Rn.RenderableHelper.createFrameBuffer({
+    width: resolution,
+    height: resolution,
     textureNum,
-    property
-  );
+    textureFormats: [Rn.TextureFormat.RGBA8],
+    createDepthBuffer: true,
+  });
   renderPass.setFramebuffer(framebuffer);
   return framebuffer;
 }

diff --git a/samples/test_e2e/Gltf2Importer-GlareEffect/main.ts b/samples/test_e2e/Gltf2Importer-GlareEffect/main.ts
@@ -50,9 +50,7 @@ const renderPassMain = await createRenderPassMain(cameraComponentMain, [
   entityEnvironmentCube,
 ]);
 createAndSetFramebuffer(renderPassMain, rnCanvasElement.width, rnCanvasElement.height, 1, {
-  internalFormat: Rn.TextureParameter.RGBA16F,
-  format: Rn.PixelFormat.RGBA,
-  type: Rn.ComponentType.Float,
+  internalFormat: Rn.TextureFormat.RGBA16F,
 });
 renderPassMain.clearColor = Rn.Vector4.fromCopyArray([0.0, 0.0, 0.0, 1.0]);
 
@@ -182,12 +180,13 @@ function createAndSetFramebuffer(
     isMSAA?: boolean | undefined;
   }
 ) {
-  const framebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(
-    resolutionWidth,
-    resolutionHeight,
+  const framebuffer = Rn.RenderableHelper.createFrameBuffer({
+    width: resolutionWidth,
+    height: resolutionHeight,
     textureNum,
-    property
-  );
+    textureFormats: [property.internalFormat],
+    createDepthBuffer: true,
+  });
   renderPass.setFramebuffer(framebuffer);
   return framebuffer;
 }

diff --git a/samples/test_e2e/Gltf2Importer-MSAA/main.ts b/samples/test_e2e/Gltf2Importer-MSAA/main.ts
@@ -139,20 +139,23 @@ function createAndSetFrameBufferAndMSAAFramebuffer(
   renderPass: Rn.RenderPass,
   resolutionFramebuffer: number
 ) {
-  const framebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(
-    resolutionFramebuffer,
-    resolutionFramebuffer,
-    0,
-    { isMSAA: true }
-  );
+  const framebuffer = Rn.RenderableHelper.createFrameBufferMSAA({
+    width: resolutionFramebuffer,
+    height: resolutionFramebuffer,
+    colorBufferNum: 1,
+    colorFormats: [Rn.TextureFormat.RGBA8],
+    sampleCountMSAA: 4,
+    depthBufferFormat: Rn.TextureFormat.Depth32F,
+  });
   renderPass.setFramebuffer(framebuffer);
 
-  const framebufferMSAA = Rn.RenderableHelper.createTexturesForRenderTarget(
-    resolutionFramebuffer,
-    resolutionFramebuffer,
-    1,
-    { createDepthBuffer: false }
-  );
+  const framebufferMSAA = Rn.RenderableHelper.createFrameBuffer({
+    width: resolutionFramebuffer,
+    height: resolutionFramebuffer,
+    textureNum: 1,
+    textureFormats: [Rn.TextureFormat.RGBA8],
+    createDepthBuffer: false,
+  });
   renderPass.setResolveFramebuffer(framebufferMSAA);
 }
 

diff --git a/samples/test_e2e/GltfImporter-draco-extension/main.ts b/samples/test_e2e/GltfImporter-draco-extension/main.ts
@@ -42,7 +42,13 @@ const expressionPostEffect = new Rn.Expression();
 expressions.push(expressionPostEffect);
 
 // gamma correction
-const gammaTargetFramebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(600, 600, 1, {});
+const gammaTargetFramebuffer = Rn.RenderableHelper.createFrameBuffer({
+  width: 600,
+  height: 600,
+  textureNum: 1,
+  textureFormats: [Rn.TextureFormat.RGBA8],
+  createDepthBuffer: true,
+});
 const mainRenderPass = mainExpression.renderPasses[0];
 mainRenderPass.setFramebuffer(gammaTargetFramebuffer);
 mainRenderPass.toClearColorBuffer = true;

diff --git a/...fImporter-forward-render-pipeline/test.js → ...mporter-forward-render-pipeline/1.test.js b/...fImporter-forward-render-pipeline/test.js → ...mporter-forward-render-pipeline/1.test.js
@@ -6,9 +6,6 @@ const gltfInfo = [
   {name: 'IridescentDishWithOlives', format: 'glb'},
   {name: 'ABeautifulGame', format: 'gltf'},
   {name: 'AlphaBlendModeTest', format: 'glb'},
-  {name: 'AnimatedMorphCube', format: 'glb'},
-  {name: 'AnisotropyBarnLamp', format: 'glb'},
-  {name: 'AnisotropyDiscTest', format: 'glb'},
 ];
 
 doGltfTests('GltfImporter-forward-render-pipeline', modes, gltfInfo, 0.03);
diff --git a/samples/test_e2e/GltfImporter-forward-render-pipeline/2.test.js b/samples/test_e2e/GltfImporter-forward-render-pipeline/2.test.js
@@ -0,0 +1,11 @@
+const doGltfTests =
+  require('../common/testFunc').doGltfTests;
+
+const modes = ['uniform', 'datatexture', 'webgpu'];
+const gltfInfo = [
+  {name: 'AnimatedMorphCube', format: 'glb'},
+  {name: 'AnisotropyBarnLamp', format: 'glb'},
+  {name: 'AnisotropyDiscTest', format: 'glb'},
+];
+
+doGltfTests('GltfImporter-forward-render-pipeline', modes, gltfInfo, 0.03);
diff --git a/...e-a-beautiful-game-datatexture-1-snap.png → ...e-a-beautiful-game-datatexture-1-snap.png b/...e-a-beautiful-game-datatexture-1-snap.png → ...e-a-beautiful-game-datatexture-1-snap.png
diff --git a/...eline-a-beautiful-game-uniform-1-snap.png → ...eline-a-beautiful-game-uniform-1-snap.png b/...eline-a-beautiful-game-uniform-1-snap.png → ...eline-a-beautiful-game-uniform-1-snap.png
diff --git a/...peline-a-beautiful-game-webgpu-1-snap.png → ...peline-a-beautiful-game-webgpu-1-snap.png b/...peline-a-beautiful-game-webgpu-1-snap.png → ...peline-a-beautiful-game-webgpu-1-snap.png
diff --git a/...ha-blend-mode-test-datatexture-1-snap.png → ...ha-blend-mode-test-datatexture-1-snap.png b/...ha-blend-mode-test-datatexture-1-snap.png → ...ha-blend-mode-test-datatexture-1-snap.png
diff --git a/...-alpha-blend-mode-test-uniform-1-snap.png → ...-alpha-blend-mode-test-uniform-1-snap.png b/...-alpha-blend-mode-test-uniform-1-snap.png → ...-alpha-blend-mode-test-uniform-1-snap.png
diff --git a/...e-alpha-blend-mode-test-webgpu-1-snap.png → ...e-alpha-blend-mode-test-webgpu-1-snap.png b/...e-alpha-blend-mode-test-webgpu-1-snap.png → ...e-alpha-blend-mode-test-webgpu-1-snap.png
diff --git a/...t-dish-with-olives-datatexture-1-snap.png → ...t-dish-with-olives-datatexture-1-snap.png b/...t-dish-with-olives-datatexture-1-snap.png → ...t-dish-with-olives-datatexture-1-snap.png
diff --git a/...scent-dish-with-olives-uniform-1-snap.png → ...scent-dish-with-olives-uniform-1-snap.png b/...scent-dish-with-olives-uniform-1-snap.png → ...scent-dish-with-olives-uniform-1-snap.png
diff --git a/...escent-dish-with-olives-webgpu-1-snap.png → ...escent-dish-with-olives-webgpu-1-snap.png b/...escent-dish-with-olives-webgpu-1-snap.png → ...escent-dish-with-olives-webgpu-1-snap.png
diff --git a/...nimated-morph-cube-datatexture-1-snap.png → ...nimated-morph-cube-datatexture-1-snap.png b/...nimated-morph-cube-datatexture-1-snap.png → ...nimated-morph-cube-datatexture-1-snap.png
diff --git a/...ne-animated-morph-cube-uniform-1-snap.png → ...ne-animated-morph-cube-uniform-1-snap.png b/...ne-animated-morph-cube-uniform-1-snap.png → ...ne-animated-morph-cube-uniform-1-snap.png
diff --git a/...ine-animated-morph-cube-webgpu-1-snap.png → ...ine-animated-morph-cube-webgpu-1-snap.png b/...ine-animated-morph-cube-webgpu-1-snap.png → ...ine-animated-morph-cube-webgpu-1-snap.png
diff --git a/...isotropy-barn-lamp-datatexture-1-snap.png → ...isotropy-barn-lamp-datatexture-1-snap.png b/...isotropy-barn-lamp-datatexture-1-snap.png → ...isotropy-barn-lamp-datatexture-1-snap.png
diff --git a/...e-anisotropy-barn-lamp-uniform-1-snap.png → ...e-anisotropy-barn-lamp-uniform-1-snap.png b/...e-anisotropy-barn-lamp-uniform-1-snap.png → ...e-anisotropy-barn-lamp-uniform-1-snap.png
diff --git a/...ne-anisotropy-barn-lamp-webgpu-1-snap.png → ...ne-anisotropy-barn-lamp-webgpu-1-snap.png b/...ne-anisotropy-barn-lamp-webgpu-1-snap.png → ...ne-anisotropy-barn-lamp-webgpu-1-snap.png
diff --git a/...isotropy-disc-test-datatexture-1-snap.png → ...isotropy-disc-test-datatexture-1-snap.png b/...isotropy-disc-test-datatexture-1-snap.png → ...isotropy-disc-test-datatexture-1-snap.png
diff --git a/...e-anisotropy-disc-test-uniform-1-snap.png → ...e-anisotropy-disc-test-uniform-1-snap.png b/...e-anisotropy-disc-test-uniform-1-snap.png → ...e-anisotropy-disc-test-uniform-1-snap.png
diff --git a/...ne-anisotropy-disc-test-webgpu-1-snap.png → ...ne-anisotropy-disc-test-webgpu-1-snap.png b/...ne-anisotropy-disc-test-webgpu-1-snap.png → ...ne-anisotropy-disc-test-webgpu-1-snap.png
diff --git a/samples/test_e2e/GltfImporter-forward-render-pipeline/index.html b/samples/test_e2e/GltfImporter-forward-render-pipeline/index.html
@@ -33,7 +33,7 @@ <h2>Rendering Test Image</h2>
     </section>
     <section class="correct">
       <h2>Correct PNG Image</h2>
-      <img src="__image_snapshots__/test-js-gltf-importer-forward-render-pipeline-datatexture-1-snap.png" />
+      <img src="__image_snapshots__/1-test-js-gltf-importer-forward-render-pipeline-iridescent-dish-with-olives-datatexture-1-snap.png" />
     </section>
   </main>
   <script src="../../assets/navigate.js"></script>

diff --git a/samples/test_e2e/GltfImporter-ibl-1-webgl2/main.ts b/samples/test_e2e/GltfImporter-ibl-1-webgl2/main.ts
@@ -43,7 +43,13 @@ expressions.push(expressionPostEffect);
 
 // gamma correction (and super sampling)
 const mainRenderPass = mainExpression.renderPasses[0];
-const gammaTargetFramebuffer = Rn.RenderableHelper.createTexturesForRenderTarget(600, 600, 1, {});
+const gammaTargetFramebuffer = Rn.RenderableHelper.createFrameBuffer({
+  width: 600,
+  height: 600,
+  textureNum: 1,
+  textureFormats: [Rn.TextureFormat.RGBA8],
+  createDepthBuffer: true,
+});
 mainRenderPass.setFramebuffer(gammaTargetFramebuffer);
 mainRenderPass.toClearColorBuffer = true;
 mainRenderPass.toClearDepthBuffer = true;