refactor(pbr): extract fullscreen vert + use vTexCoord0 always instea…

…d of vTexCoord - extract quad to utils - use fullscreen vert
pex-gl · May 23, 2023 · 5b5922f · 5b5922f
1 parent 89aefa6
commit 5b5922f
Show file tree

Hide file tree

Showing 16 changed files with 70 additions and 66 deletions.
diff --git a/examples/layers.js b/examples/layers.js
@@ -261,32 +261,32 @@ const drawTexturesMixedCmd = {
       attribute vec2 aPosition;
       attribute vec2 aTexCoord;
 
-      varying vec2 vTexCoord;
+      varying vec2 vTexCoord0;
 
       void main() {
-        vTexCoord = aTexCoord;
+        vTexCoord0 = aTexCoord;
 
         gl_Position = vec4(aPosition, 0.0, 1.0);
       }
     `,
     frag: /* glsl */ `
       precision highp float;
 
-      varying vec2 vTexCoord;
+      varying vec2 vTexCoord0;
 
       uniform sampler2D uTexture;
       uniform sampler2D uTexture2;
       uniform float uBlend;
 
       void main() {
         gl_FragColor = mix(
-          texture2D(uTexture, vTexCoord),
-          texture2D(uTexture2, vTexCoord),
+          texture2D(uTexture, vTexCoord0),
+          texture2D(uTexture2, vTexCoord0),
           uBlend
         );
-        gl_FragColor = texture2D(uTexture, vTexCoord);
-        if (vTexCoord.x + (1.0 - vTexCoord.y) > uBlend * 2.0) {
-          gl_FragColor = texture2D(uTexture2, vTexCoord);
+        gl_FragColor = texture2D(uTexture, vTexCoord0);
+        if (vTexCoord0.x + (1.0 - vTexCoord0.y) > uBlend * 2.0) {
+          gl_FragColor = texture2D(uTexture2, vTexCoord0);
         }
         gl_FragColor.rgb = gl_FragColor.rgb / (1.0 + gl_FragColor.rgb);
         gl_FragColor.rgb = pow(gl_FragColor.rgb, vec3(1.0/2.2));

diff --git a/package.json b/package.json
@@ -38,8 +38,7 @@
     "pex-loaders": "^0.0.1",
     "pex-math": "^4.0.0-alpha.3",
     "pex-random": "^2.0.0-alpha.0",
-    "pex-shaders": "^0.1.3",
-    "primitive-quad": "^2.0.0"
+    "pex-shaders": "^0.1.3"
   },
   "devDependencies": {
     "angle-normals": "^1.0.0",

diff --git a/systems/reflection-probe.js b/systems/reflection-probe.js
@@ -1,29 +1,12 @@
 import { vec3, mat4 } from "pex-math";
 // import { reflectionProbe as SHADERS } from "pex-shaders";
-import { reflectionProbe as SHADERS } from "./renderer/pex-shaders/index.js";
+import {
+  pipeline,
+  reflectionProbe as SHADERS,
+} from "./renderer/pex-shaders/index.js";
 
 import hammersley from "hammersley";
-
-// TODO: share with skybox.js
-// prettier-ignore
-const quadPositions =  Float32Array.of(
-  -1, -1,
-  1, -1,
-  1, 1,
-  -1, 1,
-)
-// prettier-ignore
-const quadUvs = Uint16Array.of(
-  0, 0,
-  1, 0,
-  1, 1,
-  0, 1
-)
-// prettier-ignore
-const quadCells = Uint16Array.of(
-  0, 1, 2,
-  2, 3, 0
-)
+import { quad } from "../utils.js";
 
 const cubemapProjectionMatrix = mat4.perspective(
   mat4.create(),
@@ -146,11 +129,11 @@ class ReflectionProbe {
     const ctx = this._ctx;
 
     const attributes = {
-      aPosition: ctx.vertexBuffer(quadPositions),
-      aTexCoord: ctx.vertexBuffer(quadUvs),
+      aPosition: ctx.vertexBuffer(quad.positions),
+      aTexCoord0: ctx.vertexBuffer(quad.uvs),
     };
 
-    const indices = ctx.indexBuffer(quadCells);
+    const indices = ctx.indexBuffer(quad.cells);
 
     this.clearOctMapAtlasCmd = {
       name: "ReflectionProbe.clearOctMapAtlas",
@@ -168,7 +151,7 @@ class ReflectionProbe {
         color: [this._octMap],
       }),
       pipeline: ctx.pipeline({
-        vert: SHADERS.fullscreenQuad.vert,
+        vert: pipeline.fullscreen.vert,
         frag: SHADERS.cubemapToOctMap.frag,
       }),
       attributes,
@@ -185,7 +168,7 @@ class ReflectionProbe {
         color: [this._octMap],
       }),
       pipeline: ctx.pipeline({
-        vert: SHADERS.fullscreenQuad.vert,
+        vert: pipeline.fullscreen.vert,
         frag: SHADERS.convolveOctMapAtlasToOctMap.frag,
       }),
       attributes,
@@ -203,7 +186,7 @@ class ReflectionProbe {
         color: [this._reflectionMap],
       }),
       pipeline: ctx.pipeline({
-        vert: SHADERS.fullscreenQuad.vert,
+        vert: pipeline.fullscreen.vert,
         frag: SHADERS.blitToOctMapAtlas.frag,
       }),
       uniforms: {
@@ -221,7 +204,7 @@ class ReflectionProbe {
         clearColor: [0, 0, 0, 1],
       }),
       pipeline: ctx.pipeline({
-        vert: SHADERS.fullscreenQuad.vert,
+        vert: pipeline.fullscreen.vert,
         frag: SHADERS.downsampleFromOctMapAtlas.frag,
       }),
       uniforms: {
@@ -239,7 +222,7 @@ class ReflectionProbe {
         clearColor: [0, 0, 0, 1],
       }),
       pipeline: ctx.pipeline({
-        vert: SHADERS.fullscreenQuad.vert,
+        vert: pipeline.fullscreen.vert,
         frag: SHADERS.prefilterFromOctMapAtlas.frag,
       }),
       uniforms: {

diff --git a/...haders/shaders/skybox/sky-env-map.vert.js → ...aders/shaders/pipeline/fullscreen.vert.js b/...haders/shaders/skybox/sky-env-map.vert.js → ...aders/shaders/pipeline/fullscreen.vert.js
@@ -1,11 +1,11 @@
 export default /* glsl */ `
-attribute vec3 aPosition;
+attribute vec2 aPosition;
 attribute vec2 aTexCoord0;
 
 varying vec2 vTexCoord0;
 
 void main() {
-  gl_Position = vec4(aPosition, 1.0);
   vTexCoord0 = aTexCoord0;
+  gl_Position = vec4(aPosition, 0.0, 1.0);
 }
 `;
diff --git a/systems/renderer/pex-shaders/shaders/pipeline/index.js b/systems/renderer/pex-shaders/shaders/pipeline/index.js
@@ -9,6 +9,7 @@ import helperFrag from "./helper.frag.js";
 import helperVert from "./helper.vert.js";
 import errorFrag from "./error.frag.js";
 import errorVert from "./error.vert.js";
+import fullscreenVert from "./fullscreen.vert.js";
 
 export default {
   depthPass: { vert: depthPassVert, frag: depthPassFrag },
@@ -17,4 +18,5 @@ export default {
   overlay: { vert: overlayVert, frag: overlayFrag },
   helper: { vert: helperVert, frag: helperFrag },
   error: { vert: errorVert, frag: errorFrag },
+  fullscreen: { vert: fullscreenVert },
 };
diff --git a/systems/renderer/pex-shaders/shaders/pipeline/overlay.frag.js b/systems/renderer/pex-shaders/shaders/pipeline/overlay.frag.js
@@ -1,9 +1,9 @@
 export default /* glsl */ `
 precision highp float;
 
-varying vec2 vTexCoord;
+varying vec2 vTexCoord0;
 uniform sampler2D uTexture;
 void main() {
-    gl_FragColor = texture2D(uTexture, vTexCoord);
+    gl_FragColor = texture2D(uTexture, vTexCoord0);
 }
 `;
diff --git a/systems/renderer/pex-shaders/shaders/pipeline/overlay.vert.js b/systems/renderer/pex-shaders/shaders/pipeline/overlay.vert.js
@@ -4,7 +4,7 @@ attribute vec2 aTexCoord0;
 
 uniform vec4 uBounds; // x, y, width, height
 
-varying vec2 vTexCoord;
+varying vec2 vTexCoord0;
 
 void main() {
   vec2 pos = aPosition;
@@ -15,6 +15,6 @@ void main() {
   );
   pos = pos * 2.0 - 1.0;
   gl_Position = vec4(pos, 0.0, 1.0);
-  vTexCoord = aTexCoord0;
+  vTexCoord0 = aTexCoord0;
 }
 `;
diff --git a/systems/renderer/pex-shaders/shaders/reflection-probe/blit-to-oct-map-atlas.frag.js b/systems/renderer/pex-shaders/shaders/reflection-probe/blit-to-oct-map-atlas.frag.js
@@ -1,14 +1,14 @@
 export default /* glsl */ `
 precision highp float;
 
-varying vec2 vTexCoord;
+varying vec2 vTexCoord0;
 
 uniform sampler2D uOctMap;
 uniform float uOctMapSize;
 uniform float uSourceRegionSize;
 
 void main() {
-  vec2 uv = vTexCoord;
+  vec2 uv = vTexCoord0;
   uv *= uSourceRegionSize / uOctMapSize;
 
   gl_FragColor = texture2D(uOctMap, uv);

diff --git a/...s/renderer/pex-shaders/shaders/reflection-probe/convolve-oct-map-atlas-to-oct-map.frag.js b/...s/renderer/pex-shaders/shaders/reflection-probe/convolve-oct-map-atlas-to-oct-map.frag.js
@@ -5,7 +5,7 @@ precision highp float;
 
 ${SHADERS.math.PI}
 
-varying vec2 vTexCoord;
+varying vec2 vTexCoord0;
 
 uniform sampler2D uOctMapAtlas;
 uniform float uOctMapAtlasSize;
@@ -20,7 +20,7 @@ ${SHADERS.gamma}
 ${SHADERS.encodeDecode}
 
 void main() {
-  vec3 N = octMapUVToDir(vTexCoord, uIrradianceOctMapSize);
+  vec3 N = octMapUVToDir(vTexCoord0, uIrradianceOctMapSize);
   vec3 normal = N;
 
   vec3 up = vec3(0.0, 1.0, 0.0);

diff --git a/systems/renderer/pex-shaders/shaders/reflection-probe/cubemap-to-octmap.frag.js b/systems/renderer/pex-shaders/shaders/reflection-probe/cubemap-to-octmap.frag.js
@@ -5,13 +5,13 @@ precision highp float;
 
 ${SHADERS.octMapUvToDir}
 
-varying vec2 vTexCoord;
+varying vec2 vTexCoord0;
 
 uniform samplerCube uCubemap;
 uniform float uTextureSize;
 
 void main() {
-  vec3 N = octMapUVToDir(vTexCoord, uTextureSize);
+  vec3 N = octMapUVToDir(vTexCoord0, uTextureSize);
   gl_FragColor = textureCube(uCubemap, N);
 }
 `;
diff --git a/systems/renderer/pex-shaders/shaders/reflection-probe/downsample-from-oct-map-atlas.frag.js b/systems/renderer/pex-shaders/shaders/reflection-probe/downsample-from-oct-map-atlas.frag.js
@@ -3,7 +3,7 @@ import SHADERS from "../chunks/index.js";
 export default /* glsl */ `
 precision highp float;
 
-varying vec2 vTexCoord;
+varying vec2 vTexCoord0;
 
 // uniform float uLevelSize;
 uniform sampler2D uOctMapAtlas;
@@ -15,7 +15,7 @@ ${SHADERS.octMapUvToDir}
 ${SHADERS.octMap}
 
 void main() {
-  vec2 uv = vTexCoord;
+  vec2 uv = vTexCoord0;
   float width = uOctMapAtlasSize;
   float maxLevel = log2(width); // this should come from log of size
 

diff --git a/systems/renderer/pex-shaders/shaders/reflection-probe/fullscreen-quad.vert.js b/systems/renderer/pex-shaders/shaders/reflection-probe/fullscreen-quad.vert.js
@@ -1,11 +1,11 @@
 export default /* glsl */ `
 attribute vec2 aPosition;
-attribute vec2 aTexCoord;
+attribute vec2 aTexCoord0;
 
-varying vec2 vTexCoord;
+varying vec2 vTexCoord0;
 
 void main() {
-  vTexCoord = aTexCoord;
+  vTexCoord0 = aTexCoord0;
   gl_Position = vec4(aPosition, 0.0, 1.0);
 }
 `;
diff --git a/systems/renderer/pex-shaders/shaders/reflection-probe/prefilter-from-oct-map-atlas.frag.js b/systems/renderer/pex-shaders/shaders/reflection-probe/prefilter-from-oct-map-atlas.frag.js
@@ -4,7 +4,7 @@ export default /* glsl */ `
 precision highp float;
 
 // Variables
-varying vec2 vTexCoord;
+varying vec2 vTexCoord0;
 uniform float uTextureSize;
 uniform sampler2D uOctMapAtlas;
 uniform float uOctMapAtlasSize;
@@ -108,8 +108,8 @@ vec3 PrefilterEnvMap( float roughness, vec3 R, vec2 uv ) {
 }
 
 void main() {
-  vec3 normal = octMapUVToDir(vTexCoord);
-  vec3 color = PrefilterEnvMap(uRoughnessLevel / 5.0, normal, vTexCoord);
+  vec3 normal = octMapUVToDir(vTexCoord0);
+  vec3 color = PrefilterEnvMap(uRoughnessLevel / 5.0, normal, vTexCoord0);
   gl_FragColor = encode(vec4(color, 1.0), uOutputEncoding);
 }
 `;
diff --git a/systems/renderer/pex-shaders/shaders/skybox/index.js b/systems/renderer/pex-shaders/shaders/skybox/index.js
@@ -1,9 +1,8 @@
 import skyboxVert from "./skybox.vert.js";
 import skyboxFrag from "./skybox.frag.js";
-import skyEnvMapVert from "./sky-env-map.vert.js";
 import skyEnvMapFrag from "./sky-env-map.frag.js";
 
 export default {
   skybox: { vert: skyboxVert, frag: skyboxFrag },
-  skyEnvMap: { vert: skyEnvMapVert, frag: skyEnvMapFrag },
+  skyEnvMap: { frag: skyEnvMapFrag },
 };
diff --git a/systems/skybox.js b/systems/skybox.js
@@ -1,6 +1,6 @@
-import { skybox } from "pex-shaders";
-import createQuad from "primitive-quad";
+import { pipeline, skybox } from "./renderer/pex-shaders/index.js";
 import { vec3 } from "pex-math";
+import { quad } from "../utils.js";
 
 export default function createSkyboxSystem(opts) {
   const { ctx } = opts;
@@ -10,12 +10,11 @@ export default function createSkyboxSystem(opts) {
     debug: false,
   };
 
-  const quad = createQuad();
 
   const updateSkyTextureCmd = {
     name: "Skybox.updateSkyTexture",
     pipeline: ctx.pipeline({
-      vert: skybox.skyEnvMap.vert,
+      vert: pipeline.fullscreen.vert,
       frag: skybox.skyEnvMap.frag,
     }),
     uniforms: {

diff --git a/utils.js b/utils.js
@@ -3,6 +3,28 @@ import { quat, vec3 } from "pex-math";
 export const TMP_VEC3 = vec3.create();
 export const TEMP_QUAT = quat.create();
 
+export const quad = {
+  // prettier-ignore
+  positions:  Float32Array.of(
+    -1, -1,
+    1, -1,
+    1, 1,
+    -1, 1,
+  ),
+  // prettier-ignore
+  uvs: Uint16Array.of(
+    0, 0,
+    1, 0,
+    1, 1,
+    0, 1
+  ),
+  // prettier-ignore
+  cells: Uint16Array.of(
+    0, 1, 2,
+    2, 3, 0
+  ),
+};
+
 export const getFileExtension = (path) => {
   return (path?.match(/[^\\/]\.([^.\\/]+)$/) || [null]).pop();
 };