diff --git a/examples/layers.js b/examples/layers.js index 853da7c6..2ac4aec1 100644 --- a/examples/layers.js +++ b/examples/layers.js @@ -261,10 +261,10 @@ 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); } @@ -272,7 +272,7 @@ const drawTexturesMixedCmd = { frag: /* glsl */ ` precision highp float; - varying vec2 vTexCoord; + varying vec2 vTexCoord0; uniform sampler2D uTexture; uniform sampler2D uTexture2; @@ -280,13 +280,13 @@ const drawTexturesMixedCmd = { 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 index 00c53ae1..dfde1cd0 100755 --- 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 index 9b71605d..e161076e 100644 --- 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/systems/renderer/pex-shaders/shaders/skybox/sky-env-map.vert.js b/systems/renderer/pex-shaders/shaders/pipeline/fullscreen.vert.js similarity index 64% rename from systems/renderer/pex-shaders/shaders/skybox/sky-env-map.vert.js rename to systems/renderer/pex-shaders/shaders/pipeline/fullscreen.vert.js index 0bcb4b32..12076d52 100644 --- a/systems/renderer/pex-shaders/shaders/skybox/sky-env-map.vert.js +++ b/systems/renderer/pex-shaders/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 index b9705bb2..f9f7da51 100644 --- 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 index 8d8133d4..a8990fd9 100644 --- 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 index 574bd450..11d86933 100644 --- 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 index 8a8c8066..684fdef6 100644 --- 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/systems/renderer/pex-shaders/shaders/reflection-probe/convolve-oct-map-atlas-to-oct-map.frag.js b/systems/renderer/pex-shaders/shaders/reflection-probe/convolve-oct-map-atlas-to-oct-map.frag.js index afc0ff03..28bac198 100644 --- a/systems/renderer/pex-shaders/shaders/reflection-probe/convolve-oct-map-atlas-to-oct-map.frag.js +++ b/systems/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 index 1f4657b0..3659f6b5 100644 --- 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 index 78c12cae..45ec701c 100644 --- 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 index 4fc4ae4e..12076d52 100644 --- 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 index 76997e96..7595ea2e 100644 --- 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 index e8d1e05d..ddb37d99 100644 --- 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 index 580fa226..01ec005f 100644 --- 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 index 3b639b8e..7403d1a1 100644 --- 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(); };