Add yaw, pitch, and raymarching parameter in value noise field

vhiribarren · Jan 6, 2024 · b2854b1 · b2854b1
1 parent a6dd52d
commit b2854b1
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 6 deletions.
diff --git a/src/app/raymarching/value-noise-field/fragment.glsl b/src/app/raymarching/value-noise-field/fragment.glsl
@@ -7,10 +7,13 @@ uniform float u_lacunarity;
 uniform float u_gain;
 uniform float u_raymarch_delta;
 uniform int u_raymarch_max_steps;
+uniform bool u_with_linear_steps;
 uniform float u_focal_length;
 uniform float u_shift_x;
 uniform float u_shift_y;
 uniform float u_shift_z;
+uniform float u_pitch;
+uniform float u_yaw;
 
 varying vec2 v_uv;
 
@@ -42,13 +45,19 @@ float fbm(vec2 uv, float freq_base, uint freq_count, float gain, float lacunarit
     return noise_val/total_amplitude;
 }
 
-float field_height(vec2 uv) {
+float field_height(vec2 uv) {    
     return fbm(uv, u_freq_base, u_freq_count, u_gain, u_lacunarity);
 }
 
+//float field_height(vec2 uv) {
+//    return random(floor(uv* u_freq_base)) ;
+//}
+
 vec3 raymarch_scene(vec3 ray_origin, vec3 ray_direction) {
     float raymarch_dist = 0.0;
     vec3 color = vec3(0.0, 0.0, 0.0);
+    float previous_y = 0.0;
+    float previous_dist = 0.0;
     for (int i=0; i<u_raymarch_max_steps; i++ ) {
         vec3 scan_pos = ray_origin + raymarch_dist * ray_direction;
         float field_y = field_height(scan_pos.xz);
@@ -71,8 +80,14 @@ vec3 raymarch_scene(vec3 ray_origin, vec3 ray_direction) {
                 color =  max(color, vec3(0.0, 1.0, 1.0));
             }
         }
-        //raymarch_dist += u_raymarch_delta;
-        raymarch_dist += u_raymarch_delta * float(i); // Trick from https://iquilezles.org/articles/terrainmarching/
+        previous_y = field_y;
+        previous_dist = raymarch_dist;
+        if (u_with_linear_steps) {
+            raymarch_dist += u_raymarch_delta * float(i) ; // Trick from https://iquilezles.org/articles/terrainmarching/
+        }
+        else {
+            raymarch_dist += u_raymarch_delta;
+        }
     }
     return color;
 }
@@ -84,10 +99,27 @@ void main() {
     vec2 canvas_local_pos = (v_uv -0.5) * 2.0; // center coordinates
     canvas_local_pos *= vec2(ratio, 1.0); // fix width
 
+    // Prepare camera rotation matrices
+    float yc = cos(radians(u_yaw));
+    float ys = sin(radians(u_yaw));
+    mat3 yam_rotation = mat3(
+        yc, 0.0, -ys,
+        0.0, 1.0, 0.0,
+        ys, 0.0, yc
+    );
+    float pc = cos(radians(u_pitch));
+    float ps = sin(radians(u_pitch));
+    mat3 pitch_rotation = mat3(
+        1.0, 0.0, 0.0,
+        0.0, pc, ps,
+        0.0, -ps, pc
+    );
+
     // Camera parameters
-    vec3 camera_eye = vec3(u_shift_x, u_shift_y, u_shift_z);
-    vec3 camera_target = vec3(0.0, 0.0, 0.0);
     float canvas_distance = u_focal_length;
+    vec3 camera_eye = vec3(u_shift_x, u_shift_y, u_shift_z);
+    vec3 camera_target = camera_eye +  pitch_rotation * yam_rotation * vec3(0.0, 0.0, -canvas_distance);
+
 
     // Transform canvas coordinates
     vec3 camera_axis_z = normalize(camera_target - camera_eye);

diff --git a/src/app/raymarching/value-noise-field/page.tsx b/src/app/raymarching/value-noise-field/page.tsx
@@ -17,10 +17,17 @@ function ValueNoiseRaymarchControl({controlUiTunnel}: FragmentLogic) {
 
     const [raymarchMaxSteps, setRaymarchMaxSteps] = useUniform("u_raymarch_max_steps", 50);
     const [raymarchDelta, setRaymarchDelta] = useUniform("u_raymarch_delta", 0.001);
+    const [withLinearSteps, setWithLinearSteps] = useUniform("u_with_linear_steps", true);
+
     const [focalLength, setFocalLength] = useUniform("u_focal_length", 1.0);
     const [shiftX, setShiftX] = useUniform("u_shift_x", 0.0);
     const [shiftY, setShiftY] = useUniform("u_shift_y", 1.5);
     const [shiftZ, setShiftZ] = useUniform("u_shift_z", -2.0);
+
+    const [pitch, setPitch] = useUniform("u_pitch", 0.0);
+    const [yaw, setYaw] = useUniform("u_yaw", 0.0);
+
+
     const ControlUiTunnel = controlUiTunnel;
 
     return (
@@ -30,9 +37,17 @@ function ValueNoiseRaymarchControl({controlUiTunnel}: FragmentLogic) {
                 <NumberInput className={styles.shaderControl} label="Base frequence" onChange={setFreqBase} value={freqBase} min={0.0} decimalScale={2} />
                 <NumberInput className={styles.shaderControl} label="Lacunarity" onChange={setLacunarity} value={lacunarity} min={0.0} step={0.1} decimalScale={2} />
                 <NumberInput className={styles.shaderControl} label="Gain" onChange={setGain} value={gain} min={0.0} step={0.1} decimalScale={2} />
+                <Switch
+                    className={styles.shaderControl}
+                    label="Increasing steps"
+                    checked={withLinearSteps}
+                    onChange={(e) => setWithLinearSteps(e.currentTarget.checked)}
+                />
                 <NumberInput className={styles.shaderControl} label="Raymarch Max Steps" onChange={setRaymarchMaxSteps} value={raymarchMaxSteps} allowDecimal={false} />
-                <NumberInput className={styles.shaderControl} label="Raymarch Delta" onChange={setRaymarchDelta} value={raymarchDelta} step={0.01} decimalScale={3} />
+                <NumberInput className={styles.shaderControl} label="Raymarch Delta" onChange={setRaymarchDelta} value={raymarchDelta} step={0.01} decimalScale={4} />
                 <NumberInput className={styles.shaderControl} label="Focal Length" onChange={setFocalLength} value={focalLength} step={0.1} decimalScale={2} />
+                <NumberInput className={styles.shaderControl} label="Yaw" onChange={setYaw} value={yaw} />
+                <NumberInput className={styles.shaderControl} label="Pitch" onChange={setPitch} value={pitch} />
                 <NumberInput className={styles.shaderControl} label="Shift X" onChange={setShiftX} value={shiftX} step={0.1} decimalScale={2} />
                 <NumberInput className={styles.shaderControl} label="Shift Y" onChange={setShiftY} value={shiftY} step={0.1} decimalScale={2} />
                 <NumberInput className={styles.shaderControl} label="Shift Z" onChange={setShiftZ} value={shiftZ} step={0.1} decimalScale={2} />