add bidn group for r3 transformation unfiforms

Author: YoanWithY

src/ts/dynamicObject/HeightFieldPipeline.ts

@@ -21,11 +21,11 @@ export class HeightFieldPipeline extends AbstractPipeline {
 	depthStencilFormat: GPUTextureFormat;
 	depthCompare: GPUCompareFunction;
 	depthWriteEnabled: boolean;
-	bindGroup0Layout: GPUBindGroupLayout;
+	project: Project;
 
 	constructor(project: Project, label: string) {
 		super(label);
-		this.bindGroup0Layout = project.renderer.bindGroup0Layout;
+		this.project = project;
 		this.shaderCode = staticShaderCode;
 		this.preProzessedShaderCoder = resolveIncludes(this.shaderCode);
 		this.vertexConstants = {};
@@ -47,9 +47,10 @@ export class HeightFieldPipeline extends AbstractPipeline {
 	}
 
 	createPipelineLayout(): GPUPipelineLayout | "auto" {
+		const renderer = this.project.renderer;
 		return gpuDevice.createPipelineLayout({
 			label: "Height field pipeline layout",
-			bindGroupLayouts: [this.bindGroup0Layout],
+			bindGroupLayouts: [renderer.bindGroup0Layout, renderer.bindGroupR3Layout],
 		});
 	}
 

src/ts/dynamicObject/HeightFieldR3.ts

@@ -7,7 +7,7 @@ export default class HeightFieldR3 extends R3Object {
 	xVerts: number;
 	yVerts: number;
 	constructor(project: Project, xVerts: number = 1000, yVerts: number = 1000) {
-		super();
+		super(project);
 		this.xVerts = xVerts;
 		this.yVerts = yVerts;
 		this.pipeline = new HeightFieldPipeline(project, "Height Field Material");

src/ts/project/R3Object.ts

@@ -1,14 +1,34 @@
+import { gpuDevice } from "../GPUX";
 import TransformationStack from "../transformation/TransformationStack";
+import { Project } from "./Project";
 
 export default abstract class R3Object {
-    index: number = 0;
     transformationStack;
+    defaultBindGroup: GPUBindGroup;
+    vertexUniformBuffer: GPUBuffer;
+    fragmentUniformBuffer: GPUBuffer;
+    isSelected: boolean = false;
+    isActive: boolean = false;
 
-    constructor() {
+    constructor(project: Project) {
         this.transformationStack = new TransformationStack();
+        const { vertexUniformBuffer, fragmentUniformBuffer, bindGroup } = project.renderer.getNew3RData();
+        this.vertexUniformBuffer = vertexUniformBuffer;
+        this.fragmentUniformBuffer = fragmentUniformBuffer;
+        this.defaultBindGroup = bindGroup;
     }
 
     getWorldLocation() {
         return this.transformationStack.getTransformationMatrix().getTranslation();
     }
+    vertexUniformData = new Float32Array(16);
+    fragmentUniformData = new Uint32Array(1);
+    updateUniforms() {
+        this.transformationStack.getTransformationMatrix().pushInFloat32ArrayColumnMajor(this.vertexUniformData);
+        const selectedMask = this.isSelected ? 1 : 0;
+        const activeMask = this.isActive ? 2 : 0;
+        this.fragmentUniformData[0] = selectedMask | activeMask;
+        gpuDevice.queue.writeBuffer(this.vertexUniformBuffer, 0, this.vertexUniformData);
+        gpuDevice.queue.writeBuffer(this.fragmentUniformBuffer, 0, this.fragmentUniformData);
+    }
 }

src/ts/projection/PerspectiveProjection.ts

@@ -3,7 +3,7 @@ import Projection from "./Projection";
 
 export default class PerspectiveProjection implements Projection {
     vFOV = 90;
-    near = 0.1;
+    near = 0.01;
     far = 1000;
     getProjectionMatrix(width: number, height: number): mat4 {
         const AR = width / height;

src/ts/rendering/Renderer.ts

@@ -21,6 +21,7 @@ export default class Renderer {
 	private viewUBO: GPUBuffer;
 	private bindGroup0: GPUBindGroup;
 	bindGroup0Layout: GPUBindGroupLayout;
+	bindGroupR3Layout: GPUBindGroupLayout;
 
 	constructor(project: Project) {
 		this.project = project;
@@ -42,6 +43,26 @@ export default class Renderer {
 				},
 			]
 		});
+
+		this.bindGroupR3Layout = gpuDevice.createBindGroupLayout({
+			label: "Default R3 bind group layout",
+			entries: [
+				{
+					binding: 0,
+					visibility: GPUShaderStage.VERTEX,
+					buffer: {
+						type: "uniform",
+					}
+				},
+				{
+					binding: 1,
+					visibility: GPUShaderStage.FRAGMENT,
+					buffer: {
+						type: "uniform",
+					}
+				},
+			]
+		});
 		this.bindGroup0 = gpuDevice.createBindGroup({
 			label: "Global default bind group 0",
 			entries: [
@@ -135,6 +156,9 @@ export default class Renderer {
 			renderPassEncoder.setViewport(0, 0, viewport.getCurrentTexture().width, viewport.getCurrentTexture().height, 0, 1);
 			for (const hf of this.project.scene.heightFieldObjects) {
 				renderPassEncoder.setPipeline(hf.pipeline.gpuPipeline);
+				hf.transformationStack.rotate.x += 0.01;
+				hf.updateUniforms();
+				renderPassEncoder.setBindGroup(1, hf.defaultBindGroup);
 				renderPassEncoder.draw(hf.getVerts());
 			}
 			if (this.project.scene.gridPipeline) {
@@ -188,6 +212,42 @@ export default class Renderer {
 		this.viewportCache.delete(viewport);
 	}
 
+	getNew3RData(): { vertexUniformBuffer: GPUBuffer, fragmentUniformBuffer: GPUBuffer, bindGroup: GPUBindGroup } {
+		const vertexUniformBuffer = gpuDevice.createBuffer({
+			label: "R3 default vertex uniforms buffer",
+			usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.UNIFORM,
+			size: 16 * 4
+		});
+		const fragmentUniformBuffer = gpuDevice.createBuffer({
+			label: "R3 default fragment uniforms buffer",
+			usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.UNIFORM,
+			size: 1 * 4
+		});
+		const bindGroup = gpuDevice.createBindGroup({
+			label: "R3 Bind Group",
+			entries: [
+				{
+					binding: 0,
+					resource:
+					{
+						label: "R3 bind group vertex uniform resource",
+						buffer: vertexUniformBuffer
+					}
+				},
+				{
+					binding: 1,
+					resource:
+					{
+						label: "R3 bind group fragment uniform resource",
+						buffer: fragmentUniformBuffer
+					}
+				}
+			],
+			layout: this.bindGroupR3Layout,
+		});
+		return { vertexUniformBuffer, fragmentUniformBuffer, bindGroup };
+	}
+
 	static getDepthStencilFormat(): GPUTextureFormat {
 		return "depth24plus";
 	}

src/ts/rendering/Shader.ts

@@ -3,13 +3,15 @@ import sRGB_EOTF from "../../wgsl/utility/sRGB_EOTF.wgsl?raw";
 import sRGB_OETF from "../../wgsl/utility/sRGB_OETF.wgsl?raw";
 import fragmentOutput from "../../wgsl/utility/fragmentOutput.wgsl?raw";
 import frame from "../../wgsl/utility/frame.wgsl?raw";
+import r3 from "../../wgsl/utility/r3.wgsl?raw";
 
 const snippets: { [key: string]: string } = {
 	"utility/fragmentOutput": fragmentOutput,
 	"utility/linearRGBToLinearDisplayP3": linearRGBToLinearDisplayP3,
 	"utility/sRGB_EOTF": sRGB_EOTF,
 	"utility/sRGB_OETF": sRGB_OETF,
 	"utility/frame": frame,
+	"utility/r3": r3,
 };
 
 export function resolveIncludes(code: string): string {

src/wgsl/debug/grid.wgsl

@@ -20,7 +20,7 @@ fn vertex_main(@builtin(vertex_index) index: u32, @builtin(instance_index) insta
 
 	let far = getFar();
 	let largePass = isLargePass(instance);
-	let ls_pos = (vec2f(f32(x), f32(y)) * 2.0 - 1.0) * select(smallSize, far * 4.0, largePass);
+	let ls_pos = (vec2f(f32(x), f32(y)) * 2.0 - 1.0) * select(smallSize + 0.125, far * 4.0, largePass);
 
 	let cameraGridOffset = floor(getCameraPosition().xy);
 	let ws_pos = ls_pos + cameraGridOffset;
@@ -36,12 +36,11 @@ fn getGrid(coord: vec2f, lineThickness: f32) -> vec4f {
 	return vec4(clamp(1.0 - val, vec2f(0), vec2f(1)), w);
 }
 
-const falloffEnd = array<f32, 4>(0.25, 0.6, 0.8, 1.0);
 fn getAlpha(g_2D: vec4f, dist: f32, endFactor: f32, gridMode: i32, far: f32) -> f32 {
-	var converage = max(g_2D.x / (g_2D.z * 8 + 1), g_2D.y / (g_2D.w * 8 + 1));
+	var converage = max(g_2D.x / (g_2D.z * 80 + 1), g_2D.y / (g_2D.w * 80 + 1));
 	let isX = g_2D.x >= g_2D.y;
 
-	let falloff = smoothstep(falloffEnd[gridMode] * far * endFactor, 0, dist);
+	let falloff = smoothstep(far * endFactor, 0, dist);
 	return converage * falloff;
 }
 
@@ -52,7 +51,7 @@ fn fragment_main(vertexData: VertexOut) -> @location(0) vec4f {
 	let abs_ls_pos = abs(vertexData.ls_position);
 	let isInsideSmall = abs_ls_pos.x <= smallSize && abs_ls_pos.y <= smallSize;
 
-	if(largePass && isInsideSmall) {
+	if((largePass && isInsideSmall) || (!largePass && !isInsideSmall)) {
 		discard;
 	}
 	let lt = lineThickness * sqrt(getDPR());
@@ -63,7 +62,7 @@ fn fragment_main(vertexData: VertexOut) -> @location(0) vec4f {
 	let g1000_2D = getGrid(ws_pos / 1000.0, lt);
 
 	let camPos = getCameraPosition();
-	let dist = -vertexData.cs_position.z;
+	let dist = length(vertexData.cs_position);
 	let endFactor = smoothstep(0.0, 50.0, abs(camPos.z)) * 0.6 + 0.4;
 	let far = view.projectionData[1];
 	let a1 = getAlpha(g1_2D, dist, endFactor, 0, far);

src/wgsl/heightField.wgsl

@@ -9,6 +9,7 @@ struct VertexOut {
 }
 
 #include <utility/frame>
+#include <utility/r3>
 
 const xVerts = 1000u;
 const yVerts = 1000u;
@@ -61,8 +62,9 @@ fn vertex_main(input: VertexIn) -> VertexOut {
 		let domP1 = pos(mapToDomain(xNorm + epsilon, yNorm));
 		let domP2 = pos(mapToDomain(xNorm, yNorm + epsilon));
 		let ls_pos = vec3f(mapToLocal(xNorm, yNorm), domP0.z);
+		let ws_pos = (vertexUniform.transformation * vec4f(ls_pos, 1)).xyz;
 
-		output.position = view.projectionMat * view.viewMat * vec4(ls_pos, 1);
+		output.position = view.projectionMat * view.viewMat * vec4f(ws_pos, 1);
 		output.ls_pos = ls_pos;
 		output.normal = normalize(cross(domP2 - domP0, domP1 - domP0));
 		return output;

src/wgsl/utility/r3.wgsl

@@ -0,0 +1,8 @@
+struct R3VertexUniform {
+	transformation: mat4x4f,
+}
+struct R3FragmentUniform {
+	state: u32
+}
+ @group(1) @binding(0) var<uniform> vertexUniform: R3VertexUniform;
+ @group(1) @binding(1) var<uniform> fragmentUniform: R3VertexUniform;