Merge pull request #288 from zhuxudong/fix/flipY-grid

fix: FlipY grid shader when `context.flipProjection === true`

packages/custom-material/src/grid/GridMaterial.ts

@@ -121,17 +121,23 @@ Shader.create(
   "grid",
   `
 #include <common>
-#include <common_vert>
+
+attribute vec4 POSITION_FLIP;
+
 uniform mat4 camera_ViewInvMat;
+uniform mat4 camera_ProjMat;
+uniform vec4 camera_ProjectionParams;
 
 varying vec3 nearPoint;
 varying vec3 farPoint;
 
+
 vec3 UnprojectPoint(float x, float y, float z, mat4 viewInvMat, mat4 projInvMat) {
     vec4 unprojectedPoint =  viewInvMat * projInvMat * vec4(x, y, z, 1.0);
     return unprojectedPoint.xyz / unprojectedPoint.w;
 }
 
+
 void main() {
     float tol = 0.0001;
     mat4 viewInvMat = camera_ViewInvMat;
@@ -140,9 +146,13 @@ void main() {
     }
     mat4 projInvMat = INVERSE_MAT(camera_ProjMat);
 
-    nearPoint = UnprojectPoint(POSITION.x, POSITION.y, -1.0, viewInvMat, projInvMat);// unprojecting on the near plane
-    farPoint = UnprojectPoint(POSITION.x, POSITION.y, 1.0, viewInvMat, projInvMat);// unprojecting on the far plane
-    gl_Position = vec4(POSITION, 1.0);// using directly the clipped coordinates
+    bool flipY = camera_ProjectionParams.x < 0.0;
+    float x = flipY? POSITION_FLIP.z : POSITION_FLIP.x;
+    float y = flipY? POSITION_FLIP.w : POSITION_FLIP.y;
+
+    nearPoint = UnprojectPoint(x, y, -1.0, viewInvMat, projInvMat);// unprojecting on the near plane
+    farPoint = UnprojectPoint(x, y, 1.0, viewInvMat, projInvMat);// unprojecting on the far plane
+    gl_Position = vec4(x, y, 0.0, 1.0);// using directly the clipped coordinates
 }`,
 
   `

packages/custom-material/src/grid/GridMesh.ts

@@ -1,4 +1,14 @@
-import { ContentRestorer, Engine, ModelMesh, Vector3 } from "@galacean/engine";
+import {
+  Buffer,
+  BufferBindFlag,
+  BufferUsage,
+  ContentRestorer,
+  Engine,
+  MeshTopology,
+  ModelMesh,
+  VertexElement,
+  VertexElementFormat
+} from "@galacean/engine";
 
 export class GridMesh {
   static createGridPlane(engine: Engine): ModelMesh {
@@ -9,26 +19,18 @@ export class GridMesh {
   }
 
   static _updateGridData(mesh: ModelMesh) {
-    const positions = new Array<Vector3>(6);
-    positions[0] = new Vector3(1, 1, 0);
-    positions[1] = new Vector3(-1, -1, 0);
-    positions[2] = new Vector3(-1, 1, 0);
-    positions[3] = new Vector3(-1, -1, 0);
-    positions[4] = new Vector3(1, 1, 0);
-    positions[5] = new Vector3(1, -1, 0);
+    // No-FlipY: POSITION_FLIP.xy, FlipY: POSITION_FLIP.zw
+    // prettier-ignore
+    const vertices = new Float32Array([
+      -1, -1, 1, -1, // left-bottom
+      1, -1, -1, -1,  // right-bottom
+      -1, 1, 1, 1,  // left-top
+      1, 1, -1, 1]); // right-top
 
-    const indices = new Uint8Array(6);
-    indices[0] = 2;
-    indices[1] = 1;
-    indices[2] = 0;
-    indices[3] = 5;
-    indices[4] = 4;
-    indices[5] = 3;
+    mesh.setVertexElements([new VertexElement("POSITION_FLIP", 0, VertexElementFormat.Vector4, 0)]);
+    mesh.setVertexBufferBinding(new Buffer(mesh.engine, BufferBindFlag.VertexBuffer, vertices, BufferUsage.Static), 16);
+    mesh.addSubMesh(0, 4, MeshTopology.TriangleStrip);
 
-    mesh.setPositions(positions);
-    mesh.setIndices(indices);
-    mesh.uploadData(true);
-    mesh.addSubMesh(0, 6);
     const { bounds } = mesh;
     bounds.min.set(-Number.MAX_VALUE, -Number.MAX_VALUE, -Number.MAX_VALUE);
     bounds.max.set(Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE);