diff --git a/webgpu/lessons/webgpu-environment-maps.js b/webgpu/lessons/webgpu-environment-maps.js index aff22647..48f011ba 100644 --- a/webgpu/lessons/webgpu-environment-maps.js +++ b/webgpu/lessons/webgpu-environment-maps.js @@ -8,8 +8,8 @@ import { createTextureFromSources, } from '../../3rdparty/webgpu-utils.module.js'; -import {mat4} from 'http://localhost:8080/3rdparty/wgpu-matrix.module.js'; -import GUI from 'http://localhost:8080/3rdparty/muigui-0.x.module.js'; +import {mat4} from '../../3rdparty/wgpu-matrix.module.js'; +import GUI from '../../3rdparty/muigui-0.x.module.js'; function generateFace(size, {faceColor, textColor, text}) { const canvas = document.createElement('canvas'); diff --git a/webgpu/lessons/webgpu-environment-maps.md b/webgpu/lessons/webgpu-environment-maps.md index b07f4a48..b2ef7e6e 100644 --- a/webgpu/lessons/webgpu-environment-maps.md +++ b/webgpu/lessons/webgpu-environment-maps.md @@ -440,7 +440,7 @@ when viewed from the outside. Another way to look at this is, from inside the cube we're in a "y-up right handed coordinate system". This means positive-z is forward. Where as all of our 3d math so far uses a "y-up left handed coordinate system" [^xxx-handed] -where negative-z is forward. A simple solution is to flip the X coordinate when we sample the +where negative-z is forward. A simple solution is to flip the Z coordinate when we sample the texture. [^xxx-handed]: To be honest I find this talk of "left handed" vs "right handed" coordinate systems to be super confusing @@ -449,7 +449,7 @@ though you can [google it](https://www.google.com/search?q=right+handed+vs+left+ ```wgsl - return textureSample(ourTexture, ourSampler, direction); -+ return textureSample(ourTexture, ourSampler, direction * vec3f(-1, 1, 1)); ++ return textureSample(ourTexture, ourSampler, direction * vec3f(1, 1, -1)); ``` Now the reflection is flipped, just like in a mirror. diff --git a/webgpu/lessons/webgpu-skybox.md b/webgpu/lessons/webgpu-skybox.md index b883736b..16efeb3a 100644 --- a/webgpu/lessons/webgpu-skybox.md +++ b/webgpu/lessons/webgpu-skybox.md @@ -85,11 +85,11 @@ ourselves. ```glsl @fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f { let t = uni.viewDirectionProjectionInverse * vsOut.pos; - return textureSample(ourTexture, ourSampler, normalize(t.xyz / t.w) * vec3f(-1, 1, 1)); + return textureSample(ourTexture, ourSampler, normalize(t.xyz / t.w) * vec3f(1, 1, -1)); } ``` -Note: We multiply the x direction by -1 for +Note: We multiply the z direction by -1 for [the reasons we covered in the previous article](webgpu-environment-maps.html#a-flipped). The pipeline has no buffers in the vertex stage diff --git a/webgpu/webgpu-environment-map.html b/webgpu/webgpu-environment-map.html index bd7dc50e..2ca2356e 100644 --- a/webgpu/webgpu-environment-map.html +++ b/webgpu/webgpu-environment-map.html @@ -131,7 +131,7 @@ let eyeToSurfaceDir = normalize(vsOut.worldPosition - uni.cameraPosition); let direction = reflect(eyeToSurfaceDir, worldNormal); - return textureSample(ourTexture, ourSampler, direction * vec3f(-1, 1, 1)); + return textureSample(ourTexture, ourSampler, direction * vec3f(1, 1, -1)); } `, }); diff --git a/webgpu/webgpu-skybox-plus-environment-map.html b/webgpu/webgpu-skybox-plus-environment-map.html index 2cc7e3e7..76053522 100644 --- a/webgpu/webgpu-skybox-plus-environment-map.html +++ b/webgpu/webgpu-skybox-plus-environment-map.html @@ -124,7 +124,7 @@ @fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f { let t = uni.viewDirectionProjectionInverse * vsOut.pos; - return textureSample(ourTexture, ourSampler, normalize(t.xyz / t.w) * vec3f(-1, 1, 1)); + return textureSample(ourTexture, ourSampler, normalize(t.xyz / t.w) * vec3f(1, 1, -1)); } `, }); @@ -183,7 +183,7 @@ let eyeToSurfaceDir = normalize(vsOut.worldPosition - uni.cameraPosition); let direction = reflect(eyeToSurfaceDir, worldNormal); - return textureSample(ourTexture, ourSampler, direction * vec3f(-1, 1, 1)); + return textureSample(ourTexture, ourSampler, direction * vec3f(1, 1, -1)); } `, }); diff --git a/webgpu/webgpu-skybox.html b/webgpu/webgpu-skybox.html index 48d96e13..c7edb4fb 100644 --- a/webgpu/webgpu-skybox.html +++ b/webgpu/webgpu-skybox.html @@ -71,7 +71,7 @@ @fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f { let t = uni.viewDirectionProjectionInverse * vsOut.pos; - return textureSample(ourTexture, ourSampler, normalize(t.xyz / t.w) * vec3f(-1, 1, 1)); + return textureSample(ourTexture, ourSampler, normalize(t.xyz / t.w) * vec3f(1, 1, -1)); } `, });