sky color uniform

src/components/Raytracer/Raytracer.tsx

@@ -18,7 +18,7 @@ export function Raytracer() {
 
   const [running, setRunning] = useState<boolean>(false);
 
-  const {bounces, light, materials, spheres} = useVariables();
+  const {bounces, light, skyColor, materials, spheres} = useVariables();
 
   useFrame(running, ({timeMs, deltaTimeMs}) => {
     frameTimeMsRef.current = deltaTimeMs;
@@ -28,6 +28,7 @@ export function Raytracer() {
 
     renderer.setBounces(bounces);
     renderer.setLight(light);
+    renderer.setSkyColor(skyColor);
     renderer.setMaterials(materials);
     renderer.setSpheres(spheres);
     renderer.draw();

src/components/Raytracer/Renderer.ts

@@ -25,6 +25,7 @@ export class Renderer {
 
   private _bounces = 1;
   private _light: Light | undefined;
+  private _skyColor: ColorRGB | undefined;
   private _materials: Material[] = [];
   private _spheres: Sphere[] = [];
 
@@ -75,6 +76,23 @@ export class Renderer {
     ]);
   }
 
+  public setSkyColor(skyColor: ColorRGB): void {
+    this._skyColor = skyColor;
+  }
+
+  private get _skyColorData(): Float32Array {
+    if (!this._skyColor) {
+      return new Float32Array([0.0, 0.0, 0.0, 0.0]); // Minimum binding size is 16 bytes, so passing a single "void" one
+    }
+
+    return new Float32Array([
+      this._skyColor[0], /// ColorRGB (0)
+      this._skyColor[1], /// ColorRGB (1)
+      this._skyColor[2], /// ColorRGB (2)
+      0.0, /// 4 bytes padding
+    ]);
+  }
+
   public setMaterials(materials: Material[]): void {
     this._materials = materials;
   }
@@ -197,6 +215,13 @@ export class Renderer {
       usage: usageUniform,
     });
 
+    const skyColorData = this._skyColorData;
+    const skyColorBuffer = device.createBuffer({
+      label: 'sky color buffer',
+      size: skyColorData.byteLength,
+      usage: usageUniform,
+    });
+
     const materialsData = this._materialsData;
     const materialsBuffer = device.createBuffer({
       label: 'materials buffer',
@@ -218,8 +243,9 @@ export class Renderer {
         {binding: 0, resource: {buffer: dimensionsBuffer}},
         {binding: 1, resource: {buffer: bouncesBuffer}},
         {binding: 2, resource: {buffer: lightBuffer}},
-        {binding: 3, resource: {buffer: materialsBuffer}},
-        {binding: 4, resource: {buffer: spheresBuffer}},
+        {binding: 3, resource: {buffer: skyColorBuffer}},
+        {binding: 4, resource: {buffer: materialsBuffer}},
+        {binding: 5, resource: {buffer: spheresBuffer}},
       ],
     });
 
@@ -248,6 +274,7 @@ export class Renderer {
     device.queue.writeBuffer(dimensionsBuffer, 0, dimensionsData);
     device.queue.writeBuffer(bouncesBuffer, 0, bouncesData);
     device.queue.writeBuffer(lightBuffer, 0, lightData);
+    device.queue.writeBuffer(skyColorBuffer, 0, skyColorData);
     device.queue.writeBuffer(materialsBuffer, 0, materialsData);
     device.queue.writeBuffer(spheresBuffer, 0, spheresData);
 

src/components/Raytracer/Renderer.wgsl

@@ -1,8 +1,9 @@
 @group(0) @binding(0) var<uniform> dimensions: Dimensions;
 @group(0) @binding(1) var<uniform> bounces: u32;
 @group(0) @binding(2) var<uniform> light: Light;
-@group(0) @binding(3) var<storage> materials: array<Material>;
-@group(0) @binding(4) var<storage> spheres: array<Sphere>;
+@group(0) @binding(3) var<uniform> sky_color: ColorRGB;
+@group(0) @binding(4) var<storage> materials: array<Material>;
+@group(0) @binding(5) var<storage> spheres: array<Sphere>;
 
 @vertex
 fn vertex_main(@location(0) position: vec4f) -> @builtin(position) vec4f
@@ -55,7 +56,7 @@ fn color(uv: vec2f, camera_ray: Ray) -> ColorRGB
   for (var i: u32 = 0; i < bounces; i++) {
     let hit = trace_ray(ray);
     if (hit.distance < 0.0 || hit.index < 0) {
-      color += multiplier * color_background();
+      color += multiplier * sky_color;
       break;
     }
 
@@ -72,11 +73,6 @@ fn color(uv: vec2f, camera_ray: Ray) -> ColorRGB
   return color;
 }
 
-fn color_background() -> ColorRGB
-{
-  return ColorRGB(0.04, 0.2, 0.7);
-}
-
 fn trace_ray(ray: Ray) -> RayHit
 {
   var closest_hit = no_hit();

src/components/Raytracer/useVariables.ts

@@ -1,16 +1,23 @@
 import {folder, useControls} from 'leva';
-import {type Light, type Material, type Sphere} from './Renderer';
+import {
+  type ColorRGB,
+  type Light,
+  type Material,
+  type Sphere,
+} from './Renderer';
 import {hexToRgb01} from './utils';
 
 export const useVariables = (): {
   bounces: number;
   light: Light;
+  skyColor: ColorRGB;
   materials: Material[];
   spheres: Sphere[];
 } => {
   const {
     bounces,
     lightPosition,
+    skyColor,
     material0Albedo,
     material0Roughness,
     material1Albedo,
@@ -33,18 +40,21 @@ export const useVariables = (): {
     Light: folder({
       lightPosition: {...positionCommonProps, value: [-4.8, 5.5, 0.0]},
     }),
+    Sky: folder({
+      skyColor: {...colorCommonProps, value: '#060f2a'},
+    }),
     Materials: folder({
       'Material 0': folder({
         material0Albedo: {...albedoCommonProps, value: '#212d79'},
-        material0Roughness: {...roughnessCommonProps, value: 0.0},
+        material0Roughness: {...roughnessCommonProps, value: 0.07},
       }),
       'Material 1': folder({
         material1Albedo: {...albedoCommonProps, value: '#1a8033'},
-        material1Roughness: {...roughnessCommonProps, value: 0.4},
+        material1Roughness: {...roughnessCommonProps, value: 0.0},
       }),
       'Material 2': folder({
         material2Albedo: {...albedoCommonProps, value: '#901b90'},
-        material2Roughness: {...roughnessCommonProps, value: 0.99},
+        material2Roughness: {...roughnessCommonProps, value: 0.0},
       }),
     }),
     Spheres: folder({
@@ -69,6 +79,7 @@ export const useVariables = (): {
   return {
     bounces,
     light: {position: lightPosition},
+    skyColor: hexToRgb01(skyColor),
     materials: [
       {albedo: hexToRgb01(material0Albedo), roughness: material0Roughness},
       {albedo: hexToRgb01(material1Albedo), roughness: material1Roughness},
@@ -98,6 +109,9 @@ const positionCommonProps = {
   label: 'Position',
   step: 0.1,
 } as const;
+const colorCommonProps = {
+  label: 'Color',
+} as const;
 const albedoCommonProps = {
   label: 'Albedo',
 } as const;