Skip to content

Commit

Permalink
start fixing cubemaps
Browse files Browse the repository at this point in the history
  • Loading branch information
greggman committed Dec 20, 2023
1 parent 327c001 commit 618a54a
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 31 deletions.
36 changes: 23 additions & 13 deletions webgpu/lessons/webgpu-environment-maps.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,20 @@ an outer space scene it would be the stars. We can implement an environment map
with a cube map if we have 6 images that show the environment from a point in
space in the 6 directions of the cubemap.

Here's an environment map from the lobby of the Computer History Museum in Mountain View, California.
Here's an environment map from the lobby of the Leadenhall Market in London.

<div class="webgpu_center">
<img src="../resources/images/computer-history-museum/pos-x.jpg" style="width: 128px" class="border">
<img src="../resources/images/computer-history-museum/neg-x.jpg" style="width: 128px" class="border">
<img src="../resources/images/computer-history-museum/pos-y.jpg" style="width: 128px" class="border">
<img src="../resources/images/leadenhall_market/pos-x.jpg" style="width: 256px" class="border">
<img src="../resources/images/leadenhall_market/neg-x.jpg" style="width: 256px" class="border">
<img src="../resources/images/leadenhall_market/pos-y.jpg" style="width: 256px" class="border">
</div>
<div class="webgpu_center">
<img src="../resources/images/computer-history-museum/neg-y.jpg" style="width: 128px" class="border">
<img src="../resources/images/computer-history-museum/pos-z.jpg" style="width: 128px" class="border">
<img src="../resources/images/computer-history-museum/neg-z.jpg" style="width: 128px" class="border">
<img src="../resources/images/leadenhall_market/neg-y.jpg" style="width: 256px" class="border">
<img src="../resources/images/leadenhall_market/pos-z.jpg" style="width: 256px" class="border">
<img src="../resources/images/leadenhall_market/neg-z.jpg" style="width: 256px" class="border">
</div>
<div class="webgpu_center">
<a href="https://polyhaven.com/a/leadenhall_market">Leadenhall Market</a>, CC0 by: <a href="https://www.artstation.com/andreasmischok">Andreas Mischok</a>
</div>

Based on [the code in the previous article](webgpu-cube-maps.html) let's load those 6 images instead of the canvases we generated.
Expand Down Expand Up @@ -67,12 +70,12 @@ the new one. Now we can use the new one to load the six images.
+ const texture = await createTextureFromImages(
+ device,
+ [
+ 'resources/images/computer-history-museum/pos-x.jpg',
+ 'resources/images/computer-history-museum/neg-x.jpg',
+ 'resources/images/computer-history-museum/pos-y.jpg',
+ 'resources/images/computer-history-museum/neg-y.jpg',
+ 'resources/images/computer-history-museum/pos-z.jpg',
+ 'resources/images/computer-history-museum/neg-z.jpg',
+ 'resources/images/leadenhall_market/pos-x.jpg',
+ 'resources/images/leadenhall_market/neg-x.jpg',
+ 'resources/images/leadenhall_market/pos-y.jpg',
+ 'resources/images/leadenhall_market/neg-y.jpg',
+ 'resources/images/leadenhall_market/pos-z.jpg',
+ 'resources/images/leadenhall_market/neg-z.jpg',
+ ],
+ {mips: true, flipY: false},
+ );
Expand Down Expand Up @@ -419,4 +422,11 @@ Basic reflections
Next let's show [how to use a cubemap for a skybox](webgpu-skybox.html).
## Finding and Making Cube Maps
You can find hundreds of free panoramas at [polyhaven.com](https://polyhaven.com/hdris).
Download a jpg or png of any one of them (click the ≡ menu in the top right). Then, go to
[this page](https://greggman.github.io/panorama-to-cubemap/) and drag and drop the .jpg or .png
file there. Select the size and format you want and click the button to save the images
as cubemap faces.
3 changes: 3 additions & 0 deletions webgpu/resources/images/leadenhall_market/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
License: CC0
From: https://polyhaven.com/a/leadenhall_market
By: Andreas Mischok (https://www.artstation.com/andreasmischok)
12 changes: 6 additions & 6 deletions webgpu/webgpu-environment-map.html
Original file line number Diff line number Diff line change
Expand Up @@ -343,12 +343,12 @@
const texture = await createTextureFromImages(
device,
[
'resources/images/computer-history-museum/pos-x.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/neg-x.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/pos-y.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/neg-y.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/pos-z.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/neg-z.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/pos-x.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/neg-x.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/pos-y.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/neg-y.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/pos-z.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/neg-z.jpg', /* webgpufundamentals: url */
],
{mips: true, flipY: false},
);
Expand Down
12 changes: 6 additions & 6 deletions webgpu/webgpu-skybox-plus-environment-map.html
Original file line number Diff line number Diff line change
Expand Up @@ -397,12 +397,12 @@
const texture = await createTextureFromImages(
device,
[
'resources/images/computer-history-museum/pos-x.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/neg-x.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/pos-y.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/neg-y.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/pos-z.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/neg-z.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/pos-x.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/neg-x.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/pos-y.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/neg-y.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/pos-z.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/neg-z.jpg', /* webgpufundamentals: url */
],
{mips: true, flipY: false},
);
Expand Down
12 changes: 6 additions & 6 deletions webgpu/webgpu-skybox.html
Original file line number Diff line number Diff line change
Expand Up @@ -271,12 +271,12 @@
const texture = await createTextureFromImages(
device,
[
'resources/images/computer-history-museum/pos-x.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/neg-x.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/pos-y.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/neg-y.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/pos-z.jpg', /* webgpufundamentals: url */
'resources/images/computer-history-museum/neg-z.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/pos-x.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/neg-x.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/pos-y.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/neg-y.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/pos-z.jpg', /* webgpufundamentals: url */
'resources/images/leadenhall_market/neg-z.jpg', /* webgpufundamentals: url */
],
{mips: true, flipY: false},
);
Expand Down

0 comments on commit 618a54a

Please sign in to comment.