refactor(rendertarget): refactor rendertarget set textureView

GEngine-js · Jun 29, 2023 · 0ebf37b · 0ebf37b
1 parent 6626e3a
commit 0ebf37b
Show file tree

Hide file tree

Showing 11 changed files with 338 additions and 147 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/example/model/model.html → example/native/model.html b/example/model/model.html → example/native/model.html
diff --git a/example/native/model1.html b/example/native/model1.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta
+			http-equiv="origin-trial"
+			content="Atzk/dTch1Tt8qYq/UwLn6aWawymlc3xOKy3xiuwsaj1HBK6eCTBb+EGOnv7LK+oSQ8Fr1l/qykGHhK64mAn+w4AAABjeyJvcmlnaW4iOiJodHRwczovL2hwdWdpcy5naXRodWIuaW86NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY5MTcxMTk5OSwiaXNTdWJkb21haW4iOnRydWV9"
+		/>
+		<title>gltf</title>
+		<!-- <link rel="stylesheet" href="./index.scss" /> -->
+		<style>
+			* {
+				box-sizing: border-box;
+			}
+
+			html {
+				background: #692a84;
+				background: linear-gradient(316deg, #0e0f2a, #060913);
+				width: 100%;
+				height: 100%;
+			}
+
+			body {
+				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+				overflow: hidden;
+				width: 100%;
+				height: 100%;
+				margin: 0;
+				padding: 0;
+			}
+
+			#app {
+				height: 800px;
+				width: 800px;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div>
+			<div id="app"></div>
+		</div>
+		<script type="module">
+			import { Model, Context, Texture, RenderTarget, Attachment } from "../../dist/index.js";
+			import { mat4, vec3 } from "../lib/esm/index.js";
+			export const positions = [
+				// float4 position, float4 color, float2 uv,
+				1, -1, 1, 1, -1, -1, 1, 1, -1, -1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, -1, -1, -1, 1,
+
+				1, 1, 1, 1, 1, -1, 1, 1, 1, -1, -1, 1, 1, 1, -1, 1, 1, 1, 1, 1, 1, -1, -1, 1,
+
+				-1, 1, 1, 1, 1, 1, 1, 1, 1, 1, -1, 1, -1, 1, -1, 1, -1, 1, 1, 1, 1, 1, -1, 1,
+
+				-1, -1, 1, 1, -1, 1, 1, 1, -1, 1, -1, 1, -1, -1, -1, 1, -1, -1, 1, 1, -1, 1, -1, 1,
+
+				1, 1, 1, 1, -1, 1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, 1, -1, 1, 1, 1, 1, 1, 1,
+
+				1, -1, -1, 1, -1, -1, -1, 1, -1, 1, -1, 1, 1, 1, -1, 1, 1, -1, -1, 1, -1, 1, -1, 1
+			];
+			const colors = [
+				1, -1, 1, 1, -1, -1, 1, 1, -1, -1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, -1, -1, -1, 1, 1, 1, 1, 1, 1, -1,
+				1, 1, 1, -1, -1, 1, 1, 1, -1, 1, 1, 1, 1, 1, 1, -1, -1, 1, -1, 1, 1, 1, 1, 1, 1, 1, 1, 1, -1, 1, -1, 1,
+				-1, 1, -1, 1, 1, 1, 1, 1, -1, 1, -1, -1, 1, 1, -1, 1, 1, 1, -1, 1, -1, 1, -1, -1, -1, 1, -1, -1, 1, 1,
+				-1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, 1, -1, 1, 1, 1, 1, 1, 1, 1, -1, -1,
+				1, -1, -1, -1, 1, -1, 1, -1, 1, 1, 1, -1, 1, 1, -1, -1, 1, -1, 1, -1, 1
+			];
+			const init = async () => {
+				const context = new Context({
+					canvas: null,
+					container: document.getElementById("app"),
+					pixelRatio: 1
+				});
+				const { canvas, presentationFormat } = context;
+				await context.init();
+				const { width, height, depth } = context.presentationSize;
+				const colorAttachment = new Attachment(
+					{ r: 0.0, g: 0.0, b: 0.0, a: 0 },
+					{
+						textureView: () => {
+							return context.context.getCurrentTexture().createView();
+						}
+					}
+				);
+				const depthTexture = new Texture({
+					label: "resolveDepth",
+					size: { width, height, depth },
+					format: "depth24plus",
+					usage: GPUTextureUsage.RENDER_ATTACHMENT
+				});
+				const depthAttachment = new Attachment(1.0, { texture: depthTexture });
+				const canvasRenderTarget = new RenderTarget("render", [colorAttachment], depthAttachment);
+				const aspect = canvas.width / canvas.height;
+				const projectionMatrix = mat4.perspective([], (2 * Math.PI) / 5, aspect, 1, 100.0);
+				const modelViewProjectionMatrix = mat4.create();
+				const model = new Model({
+					shaderId: "model",
+					frag: `
+                @fragment
+                fn main(@location(0) fragUV: vec2<f32>,@location(1) fragPosition: vec4<f32>) -> @location(0) vec4<f32> {
+                  return fragPosition;
+                }
+              `,
+					vert: `
+                  struct Uniforms {
+                    modelViewProjectionMatrix : mat4x4<f32>,
+                  }
+                  @binding(0) @group(0) var<uniform> uniforms : Uniforms;
+
+                  struct VertexOutput {
+                    @builtin(position) Position : vec4<f32>,
+                    @location(0) fragUV : vec2<f32>,
+                    @location(1) fragPosition: vec4<f32>,
+                  }
+
+                  @vertex
+                  fn main(
+                    @location(0) position : vec4<f32>,
+                    @location(1) uv : vec2<f32>
+                  ) -> VertexOutput {
+                    var output : VertexOutput;
+                    output.Position = uniforms.modelViewProjectionMatrix * position;
+                    output.fragUV = uv;
+                    output.fragPosition = 0.5 * (position + vec4(1.0, 1.0, 1.0, 1.0));
+                    return output;
+                  }
+               `,
+					vertexBuffers: [
+						{
+							stepMode: "vertex",
+							attributes: {
+								position: { size: 4, value: positions },
+								color: { size: 4, value: colors }
+							}
+						}
+					],
+					uniformBuffers: [
+						{
+							type: "uniform",
+							uniforms: {
+								modelViewProjectionMatrix: {
+									type: "mat4",
+									value: () => {
+										let viewMatrix = mat4.identity([]);
+										mat4.translate(viewMatrix, viewMatrix, vec3.fromValues(0, 0, -4));
+										const now = Date.now() / 1000;
+										mat4.rotate(
+											viewMatrix,
+											viewMatrix,
+											1,
+											vec3.fromValues(Math.sin(now), Math.cos(now), 0)
+										);
+
+										mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix);
+										return modelViewProjectionMatrix;
+									}
+								}
+							}
+						}
+					],
+					renderState: {
+						targets: [
+							{
+								format: presentationFormat
+							}
+						],
+						primitive: {
+							topology: "triangle-list",
+							cullMode: "back"
+						},
+						depthStencil: {
+							depthWriteEnabled: true,
+							depthCompare: "less",
+							format: "depth24plus"
+						}
+					},
+					count: 36,
+					instances: 1
+				});
+
+				function animate() {
+					requestAnimationFrame(animate);
+					const passEncoder = canvasRenderTarget.beginRenderPass(context.device);
+					model.render({ device: context.device, passEncoder });
+					passEncoder.end();
+					canvasRenderTarget.endRenderPass();
+				}
+				animate();
+			};
+			init();
+		</script>
+	</body>
+</html>
diff --git a/src/core/WebGPUTypes.ts b/src/core/WebGPUTypes.ts
@@ -74,6 +74,7 @@ export interface AttachmentOptions {
 	texture?: Texture;
 	resolveTarget?: Texture;
 	storeOp?: GPUStoreOp;
+	textureView?: () => GPUTextureView;
 }
 
 export type PassType = "render" | "compute";

diff --git a/src/index.ts b/src/index.ts
@@ -9,6 +9,7 @@ export { default as Attachment } from "./render/Attachment";
 export { Attribute } from "./render/Attribute";
 export { default as BindGroup } from "./render/BindGroup";
 export { default as BindGroupEntity } from "./render/BindGroupEntity";
+export { default as RenderTarget } from "./render/RenderTarget";
 // utils
 // helper
 export { ShadowMapDebugger } from "./helper/ShadowMapDebugger";

diff --git a/src/pass/Pass.ts b/src/pass/Pass.ts
@@ -23,7 +23,7 @@ class Pass {
 		// todo ;
 	}
 	beforeRender(options?: any) {
-		this.passRenderEncoder = this.renderTarget.beginRenderPassEncoder(this.context.device);
+		this.passRenderEncoder = this.renderTarget.beginRenderPass(this.context.device);
 		if (this.computeTarget)
 			this.passComputeEncoder = this.computeTarget.beginComputePassEncoder(this.context.device);
 	}
@@ -34,7 +34,7 @@ class Pass {
 		return this.renderTarget.getDepthTexture();
 	}
 	afterRender() {
-		this.renderTarget.endRenderPassEncoder();
+		this.renderTarget.endRenderPass();
 		if (this.computeTarget) this.computeTarget.endComputePassEncoder();
 	}
 }

diff --git a/src/post-process/PostEffect.ts b/src/post-process/PostEffect.ts
@@ -54,9 +54,9 @@ export default class PostEffect implements IClone {
 		this.fullScreenQuad.material.dirty = true;
 		this.fullScreenQuad.material.update();
 		const drawComand = this.fullScreenQuad.getDrawCommand();
-		const currentRenderPassEncoder = this.currentRenderTarget.beginRenderPassEncoder(context.device);
+		const currentRenderPassEncoder = this.currentRenderTarget.beginRenderPass(context.device);
 		drawComand.render({ device: context.device, passEncoder: currentRenderPassEncoder });
-		this.currentRenderTarget.endRenderPassEncoder();
+		this.currentRenderTarget.endRenderPass();
 	}
 	private initDefaultParms() {
 		const geometry = new Geometry({});

diff --git a/src/post-process/ResolveFrame.ts b/src/post-process/ResolveFrame.ts
@@ -49,28 +49,24 @@ export default class ResolveFrame {
 		if (!this.canvasRenderTarget) this.initRenderTarget(context);
 		// this.material
 		this.material.uniforms.texture.value = colorTexture;
-		// @ts-ignore
-		this.canvasRenderTarget.colorAttachments[0].texture = {
-			textureView: context.context.getCurrentTexture().createView()
-		};
+
 		this.material.update(undefined, this.quadMesh);
 
 		const drawComand = this.quadMesh.getDrawCommand();
 
-		const currentRenderPassEncoder = this.canvasRenderTarget.beginRenderPassEncoder(context.device);
+		const currentRenderPassEncoder = this.canvasRenderTarget.beginRenderPass(context.device);
 
 		drawComand.render({ device: context.device, passEncoder: currentRenderPassEncoder });
 
-		this.canvasRenderTarget.endRenderPassEncoder();
+		this.canvasRenderTarget.endRenderPass();
 	}
 	private initRenderTarget(context: Context) {
 		const { width, height, depth } = context.presentationSize;
 		const colorAttachment = new Attachment(
 			{ r: 0.0, g: 0.0, b: 0.0, a: 0 },
 			{
-				// @ts-ignore
-				texture: {
-					textureView: undefined
+				textureView: () => {
+					return context.context.getCurrentTexture().createView();
 				}
 			}
 		);

diff --git a/src/render/Attachment.ts b/src/render/Attachment.ts
@@ -7,7 +7,7 @@ class Attachment {
 
 	public texture?: Texture;
 	public resolveTarget?: Texture;
-
+	public textureView?: () => GPUTextureView;
 	public readOnly?: boolean;
 
 	constructor(public value: GPUColorDict | GPUColor | number, options?: AttachmentOptions) {

diff --git a/src/render/DrawCommand.ts b/src/render/DrawCommand.ts
@@ -92,7 +92,7 @@ class DrawCommand implements Command {
 			renderTarget,
 			useLight
 		} = this;
-		const currentPassEncoder = renderTarget?.beginRenderPassEncoder?.(device) ?? passEncoder;
+		const currentPassEncoder = renderTarget?.beginRenderPass?.(device) ?? passEncoder;
 		const defines = Object.assign({}, lightShaderData?.defines ?? {}, camera?.shaderData?.defines ?? {});
 
 		shaderData?.bind?.(device, currentPassEncoder);
@@ -124,7 +124,7 @@ class DrawCommand implements Command {
 		} else if (count) {
 			currentPassEncoder.draw(count, instances || 1, 0, 0);
 		}
-		renderTarget?.endRenderPassEncoder?.();
+		renderTarget?.endRenderPass?.();
 	}
 }
 export default DrawCommand;

diff --git a/src/render/RenderTarget.ts b/src/render/RenderTarget.ts
@@ -51,7 +51,7 @@ export default class RenderTarget {
 					return {
 						view:
 							// 暂时这么写
-							colorAttachment.texture.textureView || undefined,
+							colorAttachment?.textureView?.() ?? colorAttachment.texture.textureView,
 						resolveTarget:
 							colorAttachment.resolveTarget != undefined
 								? colorAttachment.resolveTarget.textureView
@@ -78,13 +78,13 @@ export default class RenderTarget {
 		};
 	}
 
-	public beginRenderPassEncoder(device: GPUDevice) {
+	public beginRenderPass(device: GPUDevice) {
 		if (!this.device) this.device = device;
 		this.commandEncoder = this.device.createCommandEncoder();
 		this.renderEncoder = this.commandEncoder.beginRenderPass(this.renderPassDescriptor);
 		return this.renderEncoder;
 	}
-	public endRenderPassEncoder() {
+	public endRenderPass() {
 		this.renderEncoder?.end();
 		this.device.queue.submit([this.commandEncoder.finish()]);
 		this.commandEncoder = null;