camera parameters

harry7557558 · Jan 3, 2024 · 8801543 · 8801543
1 parent c82aa12
commit 8801543
Show file tree

Hide file tree

Showing 7 changed files with 223 additions and 141 deletions.
diff --git a/implicit3-rt/frag-render.glsl b/implicit3-rt/frag-render.glsl
@@ -629,31 +629,82 @@ vec3 mainRender(vec3 ro, vec3 rd) {
 }
 
 
+uniform float ry;
+uniform float rCameraDistortion;
+uniform float rFocalLength;
+uniform float rApertureSize;
+uniform float rApertureShape;
+uniform float rApertureRotate;
+
+// https://www.shadertoy.com/view/7lGXWK
+vec2 randPointInsideCircle(float r1, float r2) {
+    float u = 2.0*PI*r1;  // θ
+    float v = sqrt(r2);  // r
+    return v*vec2(cos(u), sin(u));
+}
+vec2 randPointInsideHeart(float r1, float r2) {
+    float u = 2.0*PI*r1;  // θ
+    float v = sqrt(r2);  // r
+    vec2 c = v*vec2(cos(u), sin(u));  // unit circle
+    c = mat2(1.0,1.0,-0.577,0.577)*c;  // ellipse
+    if (c.x<0.0) c.y=-c.y;  // mirror
+    return 0.939695*(c-vec2(0,0.245035));
+}
+vec2 randomPointInsideRegularPolygon(float n, float r1, float r2) {
+    float u = n*r1;
+    float v = r2;
+    float ui = floor(u);  // index of triangle
+    float uf = fract(u);  // interpolating in triangle
+    vec2 v0 = vec2(cos(2.*PI*ui/n), sin(2.*PI*ui/n));  // triangle edge #1
+    vec2 v1 = vec2(cos(2.*PI*(ui+1.)/n), sin(2.*PI*(ui+1.)/n));  // triangle edge #2
+    float a = 0.5*n*sin(2.0*PI/n);
+    return sqrt(v*PI/a) * mix(v0, v1, uf);  // sample inside triangle
+}
+vec2 randomPointInsideAperture() {
+    float r1 = randf(), r2 = randf();
+    float size = 1.0 / (50.0 * rApertureSize / (1.0-rApertureSize));
+    float rotate = rApertureRotate+ry;
+    mat2 m = mat2(cos(rotate), sin(rotate),
+                 -sin(rotate), cos(rotate));
+    float shape = 1.0 + 7.99 * rApertureShape;
+    vec2 p = shape < 2.0 ? randPointInsideCircle(r1, r2) :
+        shape < 3.0 ? randPointInsideHeart(r1, r2) :
+        randomPointInsideRegularPolygon(floor(shape), r1, r2);
+    return size * m * p;
+}
+
 void main(void) {
+    float focal = length(screenToWorld(vec3(0)));
+    focal *= 1.0 + 0.5 * (rFocalLength-0.5) / (rFocalLength*(1.0-rFocalLength));
 
     vec4 totcol = vec4(0);
     for (float fi=0.; fi<iNFrame; fi++) {
         // random number seed
         seed0 = hash13(vec3(gl_FragCoord.xy/iResolution.xy, sin(iSeed+fi/iNFrame)));
         seed = round(65537.*seed0);
 
-        // vec3 ro_s = vec3(vXy-(-1.0+2.0*screenCenter),0);
-        vec3 ro_s = vec3(vXy,0);
-        ro_s.xy += (-1.0+2.0*vec2(randf(), randf())) / iResolution.xy;
-        vec3 rd_s = vec3(0,0,1);
-        vec3 ro = screenToWorld(ro_s);
-        vec3 rd = normalize(screenToWorld(ro_s+rd_s)-ro);
+        vec2 ro_s = vXy;
+        ro_s += (-1.0+2.0*vec2(randf(), randf())) / iResolution.xy;
+        vec2 ro_sc = worldToScreen(vec3(0)).xy;
+        ro_s = ro_sc + (ro_s-ro_sc)/(1.0-0.5*rCameraDistortion*dot(ro_s,ro_s));
+        vec3 ro = screenToWorld(vec3(ro_s,0));
+        vec3 rd = normalize(screenToWorld(vec3(ro_s,0)+vec3(0,0,1))-ro);
+        vec3 ru = normalize(screenToWorld(vec3(ro_s,0)+vec3(1,0,0))-ro);
+        vec3 rv = normalize(screenToWorld(vec3(ro_s,0)+vec3(0,1,0))-ro);
+        vec2 offset = randomPointInsideAperture();
+        vec3 dp = offset.x * ru + offset.y * rv;
+        rd = normalize(rd - dp);
+        ro = ro + focal*dp;
+
         vec3 col = mainRender(ro, rd);
         if (!isnan(dot(col, vec3(1)))) {
             if (uOutput == OUTPUT_DENOISE_ALBEDO)
                 totcol = vec4(col, length(col));
             else if (uOutput == OUTPUT_DENOISE_NORMAL) {
-                vec3 ru = normalize(screenToWorld(ro_s+vec3(1,0,0))-ro);
-                vec3 rv = normalize(screenToWorld(ro_s+vec3(0,1,0))-ro);
                 float u = dot(col, ru), v = dot(col, rv), w = dot(col, rd);
                 totcol = vec4(u, v, w, u*u+v*v);
             }
-            else totcol += vec4(col, 1);
+            else totcol += vec4(col, 1) / iNFrame;
         }
     }
     fragColor = totcol;

diff --git a/implicit3-rt/help.md b/implicit3-rt/help.md
@@ -1,25 +1,27 @@
-<h2>Path Tracer for 3D Implicit Surfaces</h2>
-
-<p>A WebGL path tracer that supports various graphing parameters such as material, volume absorption and scattering, and lighting. Shape is defined by mathematical equations that you can enter in the textarea.</p>
-
-<p>Mouse hover a slider or checkbox to see explaination of the parameter. Some detailed explaination of the parameter is given below:</p>
-
-<p>- <b>Opacity</b>: linear interpolation between opaque and refractive</p>
-
-<p>- <b>Roughness</b>: this defines the distribution of GGX normal</p>
-
-<p>- <b>Emission</b>: emission from the surface of the object and/or the plane</p>
-
-<p>- <b>Absorption</b>: light absorption subject to Beer-Lambert law; coefficient depends on color for object and specified by absorb parameter (color) and decay parameter (density) for atmosphere</p>
-
-<p>- <b>Scattering</b>: energy conserving isotropic scattering, probability of hitting a particle is constant for object and $\mathrm{d}p=\rho(z)\mathrm{d}t$ for atmosphere</p>
-
-<p>- <b>Decay</b>: specify $k$ for $\rho(z)=\rho_0\operatorname{e}^{-kz}$ for absorption and scattering</p>
-
-<p>- <b>Absorb</b>: specify hue and chroma for atmospheric absorption</p>
-
-<p>- <b>Lighting</b>: θ and φ specify light direction, intensity specify total integral of radiance; light consists of direction independent ambient light and spot light, ambient specify the factor of ambient light and softness/hardness specify concentration of spot light</p>
-
-<p><hr/></p>
-
-<p>Gallery: <a href="https://spirulae.github.io/gallery">https://spirulae.github.io/gallery</a></p>
+<h2>Path Tracer for 3D Implicit Surfaces</h2>
+
+<p>A WebGL path tracer that supports various graphing parameters such as material, volume absorption and scattering, and lighting. Shape is defined by mathematical equations that you can enter in the textarea.</p>
+
+<p>Mouse hover a slider or checkbox to see explaination of the parameter. Some detailed explaination of the parameter is given below:</p>
+
+<p>- <b>Opacity</b>: linear interpolation between opaque and refractive</p>
+
+<p>- <b>Roughness</b>: this defines the distribution of GGX normal</p>
+
+<p>- <b>Emission</b>: emission from the surface of the object and/or the plane</p>
+
+<p>- <b>Absorption</b>: light absorption subject to Beer-Lambert law; coefficient depends on color for object and specified by absorb parameter (color) and decay parameter (density) for atmosphere</p>
+
+<p>- <b>Scattering</b>: energy conserving isotropic scattering, probability of hitting a particle is constant for object and $\mathrm{d}p=\rho(z)\mathrm{d}t$ for atmosphere</p>
+
+<p>- <b>Decay</b>: specify $k$ for $\rho(z)=\rho_0\operatorname{e}^{-kz}$ for absorption and scattering</p>
+
+<p>- <b>Absorb</b>: specify hue and chroma for atmospheric absorption</p>
+
+<p>- <b>Lighting</b>: θ and φ specify light direction, intensity specify total integral of radiance; light consists of direction independent ambient light and spot light, ambient specify the factor of ambient light and softness/hardness specify concentration of spot light</p>
+
+<p>- <b>Camera</b>: parameters for camera roll, lens radial distortion, focal length, relative aperture size, number of aperture blades, and aperture rotation</p>
+
+<p><hr/></p>
+
+<p>Gallery: <a href="https://spirulae.github.io/gallery">https://spirulae.github.io/gallery</a></p>
diff --git a/implicit3-rt/index.html b/implicit3-rt/index.html
@@ -66,9 +66,7 @@
         <span title="Shape clipping boundary"><select id="select-clip">
             <option value="1" selected>box</option>
             <option value="2">sphere</option>
-        </select>clip</span>
-        <!-- (<span title="Fixed box size independent of zooming"><input type="checkbox"
-                id="checkbox-clip-fixed" checked />fixed</span>)&ensp; -->&ensp;
+        </select>clip</span>&ensp;
             <span style="display:none;" title="Visualize scalar field with volume contour lines"><select id="select-field">
                 <option value="0" selected>no</option>
                 <option value="1">linear</option>
@@ -94,8 +92,6 @@
                 <option value="1">normal</option>
                 <option value="2" selected>gradient</option>
             </select>color</span>&ensp;
-        <!-- <span title="Glass instead of opaque material"><input type="checkbox"
-                id="checkbox-transparency" checked />transparency</span> -->
         <br />
         <span title="Show grid on the surface"><input type="checkbox" id="checkbox-grid" />grid</span>&ensp;
         <span title="Red-highlight discontinuities with sign change for opaque surfaces"><input type="checkbox"
@@ -144,6 +140,16 @@
         <span title="transition from point to dome light">softness&nbsp;<input type="range" id="slider-light-softness" style="width:60px" /></span>
         <span title="sun light boundary sharpness">hardness&nbsp;<input type="range" id="slider-light-hardness" style="width:60px" /></span>
         <br />
+        <hr />
+        <span title="camera roll">roll&nbsp;<input type="range" id="slider-camera-roll" style="width:75px" /></span>
+        <span title="camera lens radial distortion">distortion&nbsp;<input type="range" id="slider-camera-distortion" style="width:75px" /></span>
+        <br />
+        <span title="camera focal length">focal&nbsp;<input type="range" id="slider-focal-length" style="width:75px" /></span>
+        <span title="camera aperture size">aperture&nbsp;<input type="range" id="slider-aperture-size" style="width:75px" /></span>
+        <br />
+        <span title="number of aperture blades">shape&nbsp;<input type="range" id="slider-aperture-shape" style="width:75px" /></span>
+        <span title="camera aperture rotation">rotate&nbsp;<input type="range" id="slider-aperture-rotate" style="width:75px" /></span>
+        <br />
         <p id="error-message" style="display:none"></p>
     </div>
 

diff --git a/implicit3-rt/script.js b/implicit3-rt/script.js
@@ -90,22 +90,23 @@ document.body.onload = function (event) {
 
     // init parameters
     initParameters([
+        new GraphingParameter("cLatex", "checkbox-latex"),
+        new GraphingParameter("cAutoUpdate", "checkbox-auto-compile"),
         new GraphingParameter("sStep", "select-step"),
         new GraphingParameter("bLight", "checkbox-light"),
         new GraphingParameter("bYup", "checkbox-yup"),
         new GraphingParameter("sSpp", "select-spp"),
         new GraphingParameter("sClip", "select-clip"),
-        // new GraphingParameter("bClipFixed", "checkbox-clip-fixed"),
         new GraphingParameter("cClosed", "checkbox-closed"),
+        new GraphingParameter("sDenoise", "select-denoise"),
+        // basic
+        new GraphingParameter("sColor", "select-color"),
         new GraphingParameter("sField", "select-field"),
         new GraphingParameter("bGrid", "checkbox-grid"),
-        new GraphingParameter("sColor", "select-color"),
-        // new GraphingParameter("bTransparency", "checkbox-transparency"),
         new GraphingParameter("bDiscontinuity", "checkbox-discontinuity"),
-        new GraphingParameter("cLatex", "checkbox-latex"),
-        new GraphingParameter("cAutoUpdate", "checkbox-auto-compile"),
         new UniformSlider("rScale1", "slider-scale1", 0.01, 0.99, 0.5),
         new UniformSlider("rScale2", "slider-scale2", 0.01, 0.99, 0.5),
+        // appearance
         new UniformSlider("rOpacity", "slider-opacity", 0, 1, 0.0),
         new UniformSlider("rIor", "slider-ior", 0, 3, 1.7),
         new UniformSlider("rRoughness1", "slider-roughness1", 0, 1, 0.2),
@@ -121,13 +122,20 @@ document.body.onload = function (event) {
         new UniformSlider("rVAbsorbHue", "slider-vabsorb-hue", 0, 1, 0.55),
         new UniformSlider("rVAbsorbChr", "slider-vabsorb-chr", 0, 1, 0.4),
         new UniformSlider("rVAbsorbBri", "slider-vabsorb-bri", 0, 1, 0.97),
+        // lighting
         new UniformSlider("rTheta", "slider-theta", -0.5 * Math.PI, 1.5 * Math.PI, 1.0 * Math.PI),
         new UniformSlider("rPhi", "slider-phi", 0, Math.PI, 0.75 * Math.PI),
         new UniformSlider("rLightIntensity", "slider-light-intensity", 0, 1, 0.5),
         new UniformSlider("rLightAmbient", "slider-light-ambient", 0, 1, 0.0),
         new UniformSlider("rLightSoftness", "slider-light-softness", 0.001, 1, 0.8),
         new UniformSlider("rLightHardness", "slider-light-hardness", 0, 1, 0.0),
-        new GraphingParameter("sDenoise", "select-denoise"),
+        // camera
+        new UniformSlider("ry", "slider-camera-roll", -Math.PI, Math.PI, 0.0),
+        new UniformSlider("rCameraDistortion", "slider-camera-distortion", -0.9, 0.9, 0.0),
+        new UniformSlider("rFocalLength", "slider-focal-length", 0.01, 0.99, 0.5),
+        new UniformSlider("rApertureSize", "slider-aperture-size", 0.01, 0.99, 0.99),
+        new UniformSlider("rApertureShape", "slider-aperture-shape", 0.0, 1.0, 0.0),
+        new UniformSlider("rApertureRotate", "slider-aperture-rotate", -Math.PI, Math.PI, 0.0),
     ]);
     UpdateFunctionInputConfig.complexMode = false;
     UpdateFunctionInputConfig.implicitMode = true;