[WIP] Stars + fog tweaks

public/shaders/std-mesh.wgsl

@@ -54,8 +54,9 @@ fn vert_main(input: VertexInput) -> VertexOutput {
 struct FragOut {
   @location(0) color: vec4<f32>,
   @location(1) normal: vec4<f32>,
-  // @location(2) position: vec4<f32>,
-  @location(2) surface: vec2<u32>,
+  @location(2) position: vec4<f32>,
+  @location(3) surface: vec2<u32>,
+  @location(4) emission: vec4<f32>,
 }
 
 const shadowDepthTextureSize = 2048.0;
@@ -134,21 +135,16 @@ fn frag_main(input: VertexOutput) -> FragOut {
     }
     let litColor = input.color * (lightingColor + vec3(f32(unlit)));
 
+    let distToParty = distance(input.worldPos.xyz, scene.partyPos);
     let fogDensity: f32 = 0.02;
     let fogGradient: f32 = 1.5;
-    // let fogDist: f32 = 0.1;
-    let fogDist: f32 = max(-input.worldPos.y - 10.0, 0.0);
-    // output.fogVisibility = 0.9;
-    let fogVisibility: f32 = clamp(exp(-pow(fogDist*fogDensity, fogGradient)), 0.0, 1.0);
-
-    let backgroundColor: vec3<f32> = vec3<f32>(0.6, 0.63, 0.6);
-    // let backgroundColor: vec3<f32> = vec3<f32>(0.6, 0.63, 0.6);
-    // let finalColor: vec3<f32> = mix(backgroundColor, gammaCorrected, fogVisibility);
-    // let finalColor: vec3<f32> = gammaCorrected;
-
+    let fogVisibility: f32 = clamp(exp(-pow(distToParty*fogDensity, fogGradient)) + f32(unlit), 0.0, 1.0);
+    let backgroundColor: vec3<f32> = vec3<f32>(0.015);
+    let foggedColor: vec3<f32> = mix(backgroundColor, litColor, fogVisibility);
 
     var out: FragOut;
-    out.color = vec4<f32>(litColor, 1.0);
+    out.color = vec4<f32>(foggedColor, 1.0);
+    out.emission = vec4<f32>(litColor * f32(unlit), 1.0);
 
     // let t = scene.time * 0.0005;
     // // TODO(@darzu): experimenting with reading from SDF
@@ -185,7 +181,7 @@ fn frag_main(input: VertexOutput) -> FragOut {
     // out.color = vec4<f32>(input.uv, 0.0, 1.0);
     // out.normal = vec4(input.normal, 1.0);
     out.normal = vec4(normalize((scene.cameraViewProjMatrix * vec4<f32>(input.normal, 0.0)).xyz), 1.0);
-    // out.position = input.worldPos;
+    out.position = input.worldPos;
     out.surface.r = input.surface;
     out.surface.g = input.id;
     // out.color = vec4(input.color, 1.0);

public/shaders/std-ocean.wgsl

@@ -121,6 +121,7 @@ fn vert_main(input: VertexInput) -> VertexOutput {
 struct FragOut {
   @location(0) color: vec4<f32>,
   @location(1) surface: vec2<u32>,
+  @location(2) pos: vec4<f32>,
 }
 
 @fragment
@@ -150,9 +151,17 @@ fn frag_main(input: VertexOutput) -> FragOut {
     }
     let litColor = input.color * (lightingColor + vec3(f32(unlit)));
 
-
+    let distToParty = distance(input.worldPos.xyz, scene.partyPos);
+    let fogDensity: f32 = 0.01;
+    let fogGradient: f32 = 1.2;
+    let fogVisibility: f32 = clamp(exp(-pow(distToParty*fogDensity, fogGradient)), 0.0, 1.0);
+    let backgroundColor: vec3<f32> = vec3<f32>(0.015);
+    let foggedColor: vec3<f32> = mix(backgroundColor, litColor, fogVisibility);
+
     var out: FragOut;
-    out.color = vec4<f32>(litColor, 1.0);
+    out.color = vec4<f32>(foggedColor, 1.0);
+
+    out.pos = input.worldPos;
 
     out.surface.r = input.surface;
     out.surface.g = input.id;

public/shaders/std-outline.wgsl

@@ -88,15 +88,27 @@ fn frag_main(@location(0) uv : vec2<f32>) -> @location(0) vec4<f32> {
 
   let outlineFactor = f32(objectDidChange);
 
+
+  let pos = textureLoad(posTex, vec2<i32>(t), 0);
+  let distToParty = distance(pos.xyz, scene.partyPos);
+  let fogDensity: f32 = 0.01;
+  let fogGradient: f32 = 1.2;
+  let fogVisibility: f32 = clamp(exp(-pow(distToParty*fogDensity, fogGradient)), 0.0, 1.0);
+
   let edgeLight = convexity * 0.6 * f32(!objectDidChange);
   let edgeDark = concavity * 0.2 + outlineFactor + depthFactor;
-  let edgeLum = clamp(edgeLight - edgeDark, -0.7, 1.0);
+  let edgeLum = clamp((edgeLight - edgeDark), -0.7, 1.0);
   if (surfaceDidChange || objectDidChange) {
-    color *= 1.0 + edgeLum;
+    color *= 1.0 + edgeLum * (fogVisibility);
     // TODO(@darzu): DEBUG WIREFRAME
     // color *= 2.0;
     // color = vec3(0.8);
+
+    // let backgroundColor: vec3<f32> = vec3<f32>(0.015);
+    // let foggedColor: vec3<f32> = mix(backgroundColor, color, fogVisibility);
+    // color = foggedColor;
   }
+
   // DEBUG WIREFRAME
   // else {
   //   color *= 0.0;

public/shaders/std-post.wgsl

@@ -41,6 +41,8 @@ fn frag_main(@location(0) uv : vec2<f32>) -> @location(0) vec4<f32> {
   // TODO: hard to evaluate fog w/o objects to fade in and out
   // color = mix(color, vec3(0.014), pow(depth, 500.0));
 
+  // TODO(@darzu): consider this shader for dark stars: https://www.shadertoy.com/view/MlyGzW
+
   // color += pow(bloom, vec3(2.0));
   // color = max(color, bloom);
   color += bloom; // * 10.0;

public/shaders/std-stars.wgsl

@@ -2,6 +2,7 @@ struct VertexOutput {
     @builtin(position) Position : vec4<f32>,
     @location(0) uv : vec2<f32>,
     @location(1) color: vec3<f32>,
+    @location(2) worldPos: vec3<f32>,
   };
 
   @vertex
@@ -10,7 +11,7 @@ struct VertexOutput {
     let starIdx = gvIdx / 6u;
 
     let star = starDatas.ms[starIdx];
-    let S = star.size;
+    let S = star.size * 0.5;
 
     let corners = array<vec3<f32>, 6>(
       vec3<f32>(-S, -S, 0.0),
@@ -36,7 +37,8 @@ struct VertexOutput {
 
     // TODO(@darzu): use starBoxSize
     // TODO(@darzu): use scene.partyPos
-    let hyperspeedFactor = 10.0; // 1.0 = none, 2.0 = ea 1.0 ship forward stars go backward 1.0
+    // let hyperspeedFactor = 10.0; 
+    let hyperspeedFactor = 30.0; // 1.0 = none, 2.0 = ea 1.0 ship forward stars go backward 1.0
     var wrappedPos = (
       fract(star.pos - scene.partyPos * hyperspeedFactor / starBoxSize)
       - 0.5 
@@ -61,6 +63,7 @@ struct VertexOutput {
     output.Position = screenPos;
     output.uv = uv[vIdx];
     output.color = star.color;
+    output.worldPos = worldPos;
     return output;
   }
 
@@ -80,14 +83,22 @@ struct VertexOutput {
     //    Another benefit of doing this is that we can have the blur be proportional
     //    to the size of the star.
 
+    let distToParty = 1.0 / distance(input.worldPos.xyz, scene.partyPos);
+
     let dist = length(input.uv - vec2(0.5));
     // TODO: what's the perf difference of alpha vs discard?
-    if (dist > 0.5) {
+    if (dist + distToParty * 100.0 > 0.5) {
       discard;
     }
 
     var out: FragOut;
 
+    // let fogDensity: f32 = 0.01;
+    // let fogGradient: f32 = 1.2;
+    // let fogVisibility: f32 = 1.0 - clamp(exp(-pow(distToParty*fogDensity, fogGradient)), 0.0, 1.0);
+    // let backgroundColor: vec3<f32> = vec3<f32>(0.015);
+    // let foggedColor: vec3<f32> = mix(backgroundColor, input.color, fogVisibility);
+
     out.emission = vec4<f32>(input.color * 0.5, 1.0);
     out.color = vec4<f32>(input.color * 2.0, 1.0);
 

src/game/game-hyperspace.ts

@@ -98,11 +98,11 @@ export async function initHyperspaceGame(em: EntityManager) {
     (_, res) => {
       res.renderer.pipelines = [
         ...shadowPipelines,
-        stdRenderPipeline,
         renderOceanPipe,
+        stdRenderPipeline,
         outlineRender,
-        //renderStars,
-        //...blurPipelines,
+        renderStars,
+        ...blurPipelines,
 
         postProcess,
         //...(res.dev.showConsole ? gridCompose : []),

src/game/orrery.ts

@@ -16,7 +16,11 @@ import {
 } from "../physics/transform.js";
 import { cloneMesh, mapMeshPositions } from "../render/mesh.js";
 import { FLAG_UNLIT } from "../render/pipelines/std-scene.js";
-import { RenderableConstructDef, RendererDef } from "../render/renderer-ecs.js";
+import {
+  RenderableConstructDef,
+  RenderDataStdDef,
+  RendererDef,
+} from "../render/renderer-ecs.js";
 import { tempMat4, tempQuat, tempVec2, tempVec3 } from "../temp-pool.js";
 import { range } from "../util.js";
 import {
@@ -90,6 +94,9 @@ onInit((em: EntityManager) => {
           );
           em.ensureComponentOn(orreryStar, ScaleDef, [0.25, 0.25, 0.25]);
           orrery.orrery.orreryStars.push(createRef(orreryStar));
+          em.whenEntityHas(orreryStar, RenderDataStdDef).then((orreryStar2) => {
+            orreryStar2.renderDataStd.flags |= FLAG_UNLIT;
+          });
         }
         const intoOrrerySpace = mat4.invert(tempMat4(), orrery.world.transform);
         stars.forEach((star, i) => {

src/render/pipelines/std-mesh.ts

@@ -12,6 +12,7 @@ import {
   surfacesTexturePtr,
 } from "./std-scene.js";
 import { shadowDepthTextures } from "./std-shadow.js";
+import { emissionTexturePtr } from "./std-stars.js";
 
 // TODO:
 //  [x] pipeline attachements / outputs
@@ -77,16 +78,21 @@ export const stdRenderPipeline = CY.createRenderPipeline("triRender", {
       clear: "once",
       defaultColor: [0, 0, 0, 0],
     },
-    // {
-    //   ptr: positionsTexturePtr,
-    //   clear: "once",
-    //   defaultColor: [0, 0, 0, 0],
-    // },
+    {
+      ptr: positionsTexturePtr,
+      clear: "once",
+      defaultColor: [0, 0, 0, 0],
+    },
     {
       ptr: surfacesTexturePtr,
       clear: "once",
       defaultColor: [0, 0, 0, 0],
     },
+    {
+      ptr: emissionTexturePtr,
+      clear: "once",
+      defaultColor: [0, 0, 0, 0],
+    },
   ],
   depthStencil: mainDepthTex,
   shader: (shaderSet) => `

src/render/pipelines/std-ocean.ts

@@ -11,6 +11,7 @@ import {
   litTexturePtr,
   mainDepthTex,
   surfacesTexturePtr,
+  positionsTexturePtr,
 } from "./std-scene.js";
 import { shadowDepthTextures } from "./std-shadow.js";
 
@@ -187,11 +188,16 @@ export const renderOceanPipe = CY.createRenderPipeline("oceanRender", {
   output: [
     {
       ptr: litTexturePtr,
-      clear: "never",
+      clear: "once",
+      defaultColor: [0.015, 0.015, 0.015, 1.0],
     },
     {
       ptr: surfacesTexturePtr,
-      clear: "never",
+      clear: "once",
+    },
+    {
+      ptr: positionsTexturePtr,
+      clear: "once",
     },
   ],
   depthStencil: mainDepthTex,

src/render/pipelines/std-outline.ts

@@ -5,6 +5,7 @@ import {
   surfacesTexturePtr,
   mainDepthTex,
   sceneBufPtr,
+  positionsTexturePtr,
 } from "./std-scene.js";
 
 export const outlinedTexturePtr = CY.createTexture("outlinesTexture", {
@@ -20,7 +21,7 @@ export const outlineRender = CY.createRenderPipeline("outlineRender", {
     { ptr: linearSamplerPtr, alias: "samp" },
     { ptr: litTexturePtr, alias: "colorTex" },
     { ptr: normalsTexturePtr, alias: "normTex" },
-    // { ptr: positionsTexturePtr, alias: "posTex" },
+    { ptr: positionsTexturePtr, alias: "posTex" },
     { ptr: surfacesTexturePtr, alias: "surfTex" },
     { ptr: mainDepthTex, alias: "depthTex" },
     sceneBufPtr,

src/render/pipelines/std-stars.ts

@@ -12,6 +12,7 @@ const StarStruct = createCyStruct({
 });
 export type StarTS = CyToTS<typeof StarStruct.desc>;
 
+// let NUM_STARS = 500;
 let NUM_STARS = 1000;
 // let NUM_STARS = 1000000;
 
@@ -28,6 +29,7 @@ export const emissionTexturePtr = CY.createTexture("emissionTexture", {
 });
 
 // const STAR_BOX_SIZE = 100.0;
+// TODO(@darzu): tweak to make Doug happy
 const STAR_BOX_SIZE = 1000.0;
 
 export const initStars = CY.createComputePipeline("initStars", {