fix cubemap articles

greggman · Jul 3, 2024 · 08526aa · 08526aa
1 parent 0c653cb
commit 08526aa
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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));
       }
     `,
   });