Movement Blur All of the Manner Down

“Torusphere Accelerator”, the animation that motivated this text.

What occurs for those who take movement blur previous its logical excessive? Listed below are some enjoyable observations and concepts I encountered whereas attempting to reply this query, with an try to use the ends in a procedural animation.

What’s movement blur presupposed to appear to be?

Movement blur began out purely as a movie artifact, the results of a topic shifting whereas the digital camera’s shutter is open. This artifact turned out to be fascinating, particularly for movies, as a result of it improves the perceptual similarity between a video and a pure scene, one thing I am going to dive into on this part.

In a 3D and animation context, it is fascinating to notice that these two objectives – trying pure, and simulating a digital camera, may not have the same opinion, and would possibly lead to totally different movement blurs. I am going to preserve the simulation side as a facet word, and ask what probably the most pure doable movement blur ought to appear to be. This may be damaged down into just a few questions:

Notion of movement in a pure scene

For the aim of crafting movement blur, we will begin by analyzing the very first steps of human imaginative and prescient, the place the sunshine hits our retina and phototransduction takes place. Below well-lit situations, that is dealt with by cone-type cells. Phototransduction just isn’t quick, and we will mannequin this lag by smoothing out the sunshine stimulus over time.

Combining the above weighting perform’s form with recognized human cone response instances, we will create an in depth simulation of a perceived picture primarily based on any enter scene. This idea has been used before, however with out the form of the time response.

/*<br /> Left: Instance scene, assumed to be pure and steady.<br /> Proper: reconstructed perceived picture.<br /> */</p> <p>precision mediump float;<br /> #outline PI 3.1415926535897932384626433832795</p> <p>// Inputs<br /> various vec2 iUV;<br /> uniform float iTime;<br /> uniform vec2 iRes;</p> <p>// These traces are parsed by dspnote to generate sliders<br /> uniform float time; //dspnote param: 0 – 0.1 (s)<br /> uniform float object_speed; //dspnote param: 0 – 40, 10 (rad/s)</p> <p>const float orbit = .2;<br /> const float uRad = .1;<br /> const float uniDensMul = 1.;<br /> vec3 diskColor = vec3(.8, .9, 1.);<br /> vec3 dashColor = vec3(1., .2, .2);<br /> vec3 vBarColor = vec3(.9, .9, .9);</p> <p>// the mannequin weighting perform is<br /> // W(x) = -a e^(-e^(a x + b) + a x + b)<br /> // with a=-50 and b=2.5</p> <p>// integral of W from -inf to x:<br /> float weight_to_x(float x) {<br /> return exp(-exp(-50.*x+2.5));<br /> }</p> <p>// integral of W from l to r:<br /> float weight_lr(float l, float r) {<br /> return weight_to_x(r) – weight_to_x(l);<br /> }</p> <p>// In polar coordinates, at radius posR, discover the angle of the disk floor.<br /> // Returns 0 if posR is totally outdoors the disk.<br /> // Returns -1 if posR is totally contained in the disk.<br /> float diskAngle(float posR, float diskR) {<br /> if (diskR <= 0.) return 0.;<br /> if (posR <= diskR-orbit) return -1.;<br /> float div = (orbit*orbit+posR*posR-diskR*diskR)/(2.*posR*orbit);<br /> if (abs(div) > 1.) return 0.;<br /> return acos(div);<br /> }</p> <p>float photoDisk(vec2 pol, float velocity) {<br /> float da = diskAngle(pol.x, uRad);<br /> if (da == -1.) return 1.;<br /> // the place does the disk happen on this pixel’s previous?<br /> // assuming:<br /> // – the present pixel is at 0 rad<br /> // – the disk at present covers 1 rad to 2 rad<br /> // – the disk is shifting at 3 rad/sec<br /> // Then the disk was current from -1/3 sec to -2/3 sec.<br /> // Combine the weighting perform over this time interval.<br /> float ret = weight_lr(-(da-pol.y)/velocity, -(-da-pol.y)/velocity);<br /> return ret;<br /> }</p> <p>float sprint(vec2 pol, float lol) {<br /> vec2 p = vec2(pol.x*cos(pol.y), pol.x*sin(pol.y));<br /> p -= vec2(orbit, 0.);<br /> vec2 pol2 = vec2(size(p.xy), atan(p.y, p.x)-lol);<br /> float line = 1. – smoothstep(1., 2., abs(pol2.x – uRad)*iRes.y);<br /> line *= smoothstep(.05, .07, abs(mod(pol2.y/PI, .2)-.1));<br /> return line;<br /> }</p> <p>void mainImage(inout vec4 fragColor, in vec2 fragCoord)<br /> {<br /> vec2 ratio = vec2(iRes.x/iRes.y, 1.);<br /> vec2 p = fragCoord/iRes.xy-0.5;<br /> vec2 p2 = ratio * vec2(mod(p.x, .5)-.25, p.y);<br /> p *= ratio;<br /> float velocity = max(.001, object_speed);<br /> float rot = time*velocity – PI + 1.;<br /> if (p.x < 0.) velocity = 0.;</p> <p> vec2 pol = vec2(size(p2.xy), atan(p2.y, p2.x));<br /> pol.y = mod(pol.y + rot, PI * 2.)-1.;<br /> vec3 col = vec3(0.);<br /> col = combine(col, diskColor, photoDisk(pol, max(.1, velocity)));<br /> if (p.x > 0.) col = combine(col, dashColor, sprint(pol, rot));<br /> col = combine(col, vBarColor, 1. – smoothstep(3., 4., abs(p.x*iRes.x)));</p> <p> fragColor = vec4(col, 1.0);<br /> }</p> <p>void major(void)<br /> {<br /> vec4 colour = vec4(0.0, 0.0, 0.0, 1.0);<br /> mainImage(colour, gl_FragCoord.xy);<br /> gl_FragColor = colour;<br /> }<br /> </p> <div class="figGraphics"> <img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload" data-src="https://blinkingrobots.com/wp-content/uploads/2024/03/Motion-Blur-All-the-Way-Down.png"/> </div> </div> <p> <strong>2. Movement Smearing</strong>. Left: Instance scene, assumed to be pure and steady. Proper: simulated perceived picture. This assumes the viewer is taking a look at a hard and fast level, and never monitoring the thing with their eyes. </p> <p>What this reveals is that there already exists a pure blur on the photoreceptor stage, a phenomenon typically referred to as movement smear. So why will we add synthetic movement blur in movies, and what’s the hyperlink between movement smear and movement blur?</p> <h3>Notion of a scene on a display</h3> <p>Let’s examine what this perceived picture appears to be like like when viewing a display with restricted frames per second.</p> <div class="figure shaderFig "> <textarea class="figCode">/*<br /> Left: Instance scene, from a display.<br /> Proper: reconstructed perceived picture.<br /> */</p> <p>precision mediump float;<br /> #outline PI 3.1415926535897932384626433832795</p> <p>// Inputs<br /> various vec2 iUV;<br /> uniform float iTime;<br /> uniform vec2 iRes;</p> <p>// These traces are parsed by dspnote to generate sliders<br /> uniform int video_motion_blur; //dspnote param: none | conventional | with_sine_shutter<br /> uniform float time; //dspnote param: 0 – 0.1 (s)<br /> uniform float object_speed; //dspnote param: 0 – 40, 10 (rad/s)</p> <p>const float orbit = .2;<br /> const float uRad = .1;<br /> const float uniDensMul = 1.;<br /> vec3 diskColor = vec3(.8, .9, 1.);<br /> vec3 dashColor = vec3(1., .2, .2);<br /> vec3 vBarColor = vec3(.9, .9, .9);</p> <p>void pR(inout vec2 p, float a) {<br /> p = cos(a)*p + sin(a)*vec2(p.y, -p.x);<br /> }</p> <p>// the mannequin weighting perform is<br /> // W(x) = -a e^(-e^(a x + b) + a x + b)<br /> // with a=-50 and b=2.5</p> <p>// integral of W from -inf to x:<br /> float weight_to_x(float x) {<br /> return exp(-exp(-50.*x+2.5));<br /> }</p> <p>// integral of W from l to r:<br /> float weight_lr(float l, float r) {<br /> return weight_to_x(r) – weight_to_x(l);<br /> }</p> <p>// the cosine shutter perform is:<br /> // (1-cos((x-t1) 2 PI / (t2-t1)))/(t2-t1) if t1<x otherwise="" this="" is="" the="" integral:="" float="" icosshutter="" x="" t1="" t2="" if="" return=""> t2) return 1.;<br /> float d = 1./(t2 – t1);<br /> x -= t1;<br /> return x*d – sin(2.*PI*x*d)/(2.*PI);<br /> }</p> <p>// In polar coordinates, at radius posR, discover the angle of the disk floor.<br /> // Returns 0 if posR is totally outdoors the disk.<br /> // Returns -1 if posR is totally contained in the disk.<br /> float diskAngle(float posR, float diskR) {<br /> if (diskR <= 0.) return 0.;<br /> if (posR <= diskR-orbit) return -1.;<br /> float div = (orbit*orbit+posR*posR-diskR*diskR)/(2.*posR*orbit);<br /> if (abs(div) > 1.) return 0.;<br /> return acos(div);<br /> }</p> <p>float photoDiskNoBlur(vec2 p, float diskA, float frameStart) {<br /> vec2 diskC = vec2(-orbit, 0.);<br /> pR(diskC, frameStart*object_speed);<br /> float amt = 1.-smoothstep(uRad, uRad+1./iRes.y, size(p – diskC));</p> <p> // What time interval did this body happen in?<br /> // Combine the weighting perform over this time interval.<br /> float ret = amt*weight_lr(time-frameStart, time-frameStart+1./60.);<br /> return ret;<br /> }</p> <p>float diskNoBlur(vec2 p, vec2 diskC, float frameN, float velocity, bool display) {<br /> float diskTot = 0.;<br /> if (display) {<br /> diskTot = 1.-smoothstep(uRad, uRad+1./iRes.y, size(p – diskC));<br /> } else {<br /> for (int i=0; i<10; i++) {<br /> float frame2N = frameN – float(i);<br /> float frame2Start = frame2N/60.;<br /> float diskA2 = frame2Start*velocity;<br /> diskTot += photoDiskNoBlur(p, diskA2, frame2Start);<br /> }<br /> }<br /> return diskTot;<br /> }</p> <p>float screenDiskTrad(vec2 p, float frameStart, float velocity) {<br /> vec2 pol = vec2(size(p.xy), atan(p.y, p.x));<br /> pol.y = mod(pol.y + frameStart*velocity, PI*2.)-PI;<br /> float da = diskAngle(pol.x, uRad);<br /> if (da == 0.) return 0.;<br /> if (da == -1.) return 1.;</p> <p> // Time intervals for shutter and object presence at this pixel.<br /> // Be aware the shutter interval ought to embody the frameStart, but it surely’s<br /> // moved to the pixel coordinates for simpler wrap administration.<br /> float shut1 = -.5/60.;<br /> float shut2 = .5/60.;<br /> float obj1 = (pol.y-da)/velocity;<br /> float obj2 = (pol.y+da)/velocity;</p> <p> // the field shutter perform is (shut1<t :="" the="" object="" presence="" function="" is="" find="" integral="" of="" obj="" definite="" shutter="" from="" obj1="" to="" obj2="" float="" l="max(shut1," r="min(shut2," return="" max="" photodisktrad="" p="" diska="" framestart="" vec2="" diskc="vec2(-orbit," pr="" amt="screenDiskTrad(p," object_speed="" what="" time="" interval="" did="" this="" frame="" occur="" in="" integrate="" weighting="" over="" interval.="" ret="amt*weight_lr(time-frameStart," time-framestart="" disktradblur="" framen="" speed="" bool="" screen="" disktot="0.;" if="" else="" for="" i="0;" frame2n="frameN" frame2start="frame2N/60.;" diska2="frame2Start*speed;" screendiskcos="" pol="vec2(length(p.xy)," atan="" p.x="" pol.y="mod(pol.y" pi="" da="diskAngle(pol.x," urad="" intervals="" and="" at="" pixel.="" note="" should="" include="" but="" it="" moved="" pixel="" coordinates="" easier="" wrap="" management.="" shut1="-1./60.;" shut2="1./60.;" icosshutter="" photodiskcos="" diskcosblur="" dash="" line="1." smoothstep="" abs="" .07="" .2="" void="" mainimage="" vec4="" fragcolor="" fragcoord="" ratio="vec2(iRes.x/iRes.y," p2="ratio" .5="" p.y="" frameage="fract(time*60.);" diskamt="0.;" vec3="" col="vec3(0.);" diskcolor=""> 0.) col = combine(col, dashColor, sprint(p2 – diskC));<br /> col = combine(col, vBarColor, 1. – smoothstep(3., 4., abs(p.x*iRes.x)));</p> <p> fragColor = vec4(col, 1.0);<br /> }</p> <p>void major(void)<br /> {<br /> vec4 colour = vec4(0.0, 0.0, 0.0, 1.0);<br /> mainImage(colour, gl_FragCoord.xy);<br /> gl_FragColor = colour;<br /> }<br /> </t></x></p> <div class="figGraphics"> <img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload" data-src="https://blinkingrobots.com/wp-content/uploads/2024/03/1709528167_80_Motion-Blur-All-the-Way-Down.png"/> </div> </div> <p> <strong>3. Notion of a video</strong>. Left: Instance scene as it could seem on a display. Proper: perceived picture. </p> <p>This lastly provides us a means of visualizing the usefulness of movement blur. When viewing a video with out movement blur, the ensuing perceived picture appears to be like like overlaid frames as a substitute of the anticipated movement smear. This example is improved with a movement blurred video, the place every body not reveals a second in time, however a median of all of the moments throughout the time interval lined by this body. That is analogous to a video made with a digital camera whose shutter is open all through every body’s timespan. The ensuing perceived picture appears to be like much more just like the pure case.</p> <h3>Making the display pure with a shutter perform</h3> <p>One thing nonetheless appears to be like off within the perceived picture for conventional movement blur. At some object speeds, artifacts nonetheless seem as discontinuities within the movement smear. This may be nearly eradicated by making use of a shutter perform: as a substitute of averaging all of the moments inside a body, we weight them by a perform in order that the beginning and finish moments have much less weight than the central second of a body. The title “shutter perform” comes from the analogy to shutter effectivity in a <a rel="nofollow" href="https://en.wikipedia.org/wiki/Diaphragm_%28optics%29">diaphragm camera</a>, the place the shutter takes time to transition between open and closed states. However as a substitute of simulating cameras, the shutter perform will be chosen in a means that minimizes the perceptual distinction between the display and a pure scene. The issue then turns into similar to crafting <a rel="nofollow" href="https://en.wikipedia.org/wiki/Window_function">window functions</a> in sign processing, and certainly the most well-liked window capabilities give superb outcomes.</p> <div class="figure image"> <div class="figDiagram"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload" data-src="https://blinkingrobots.com/wp-content/uploads/2024/03/1709528167_768_Motion-Blur-All-the-Way-Down.svg.svg+xml"/></div> </div> <p> <strong>4. Making use of a shutter perform</strong>.</p> <p>How nicely does this work? You may get a tough thought within the following demo, which will be switched between movement blur with and with out a shutter perform. My impression is that the shutter perform just isn’t obligatory at low speeds, however is noticeably extra pure for fast-moving objects<sup id="fnref:1"/>. This makes it extremely related to the “previous the logical excessive” experiment I am aiming for. It additionally appears to be like smoother in nonetheless frames, which is incidental however generally related.</p> <div class="figure shaderFig runnable"> <textarea class="figCode">/*<br /> Left: Instance scene, from a display.<br /> Proper: reconstructed perceived picture.<br /> */</p> <p>precision mediump float;<br /> #outline PI 3.1415926535897932384626433832795</p> <p>// Inputs<br /> various vec2 iUV;<br /> uniform float iTime;<br /> uniform vec2 iRes;</p> <p>// These traces are parsed by dspnote to generate sliders<br /> uniform int video_motion_blur; //dspnote param: none | conventional | with_sine_shutter<br /> uniform float object_speed; //dspnote param: 0 – 40, 10 (rad/s)<br /> uniform float object_rot; //dspnote param</p> <p>const float orbit = .2;<br /> const float uRad = .1;<br /> const float uniDensMul = 1.;<br /> vec3 diskColor = vec3(.8, .9, 1.);<br /> vec3 gridColor = vec3(.2, .2, .5);</p> <p>void pR(inout vec2 p, float a) {<br /> p = cos(a)*p + sin(a)*vec2(p.y, -p.x);<br /> }</p> <p>// the cosine shutter perform B is:<br /> // t1<x pi="" otherwise="" this="" is="" the="" integral:="" float="" icosshutter="" x="" t1="" t2="" if="" return=""> t2) return 1.;<br /> float d = 1./(t2 – t1);<br /> x -= t1;<br /> return x*d – sin(2.*PI*x*d)/(2.*PI);<br /> }</p> <p>// In polar coordinates, at radius posR, discover the angle of the disk floor.<br /> // Returns 0 if posR is totally outdoors the disk.<br /> // Returns -1 if posR is totally contained in the disk.<br /> float diskAngle(float posR, float diskR) {<br /> if (diskR <= 0.) return 0.;<br /> if (posR <= diskR-orbit) return -1.;<br /> float div = (orbit*orbit+posR*posR-diskR*diskR)/(2.*posR*orbit);<br /> if (abs(div) > 1.) return 0.;<br /> return acos(div);<br /> }</p> <p>float screenDiskTrad(vec2 p, float frameStart, float velocity) {<br /> vec2 pol = vec2(size(p.xy), atan(p.y, p.x));<br /> pol.y = mod(pol.y + object_rot, PI*2.)-PI;<br /> float da = diskAngle(pol.x, uRad);<br /> if (da == 0.) return 0.;<br /> if (da == -1.) return 1.;</p> <p> // Time intervals for shutter and object presence at this pixel.<br /> // Be aware the shutter interval ought to embody the frameStart, but it surely’s<br /> // moved to the pixel coordinates for simpler wrap administration.<br /> float shut1 = -.5/60.;<br /> float shut2 = .5/60.;<br /> float obj1 = (pol.y-da)/velocity;<br /> float obj2 = (pol.y+da)/velocity;</p> <p> // the field shutter perform is (shut1<t :="" the="" object="" presence="" function="" is="" find="" integral="" of="" obj="" definite="" shutter="" from="" obj1="" to="" obj2="" float="" l="max(shut1," r="min(shut2," return="" max="" screendiskcos="" p="" framestart="" speed="" vec2="" pol="vec2(length(p.xy)," atan="" p.x="" pol.y="mod(pol.y" object_rot="" pi="" da="diskAngle(pol.x," urad="" if="" time="" intervals="" for="" and="" at="" this="" pixel.="" note="" interval="" should="" include="" but="" it="" moved="" pixel="" coordinates="" easier="" wrap="" management.="" shut1="-1./60.;" shut2="1./60.;" icosshutter="" void="" mainimage="" vec4="" fragcolor="" in="" fragcoord="" ratio="vec2(iRes.x/iRes.y," object_speed="" framen="floor(iTime*60.);" frameage="fract(iTime*60.);" diska="object_rot;" diskc="vec2(-orbit," pr="" diskamt="0.;" length="" else="" gridp="abs(mod(p," .16="" gridamt="1.-smoothstep(.6/iRes.x," gridp.x="" gridp.y="" vec3="" col="vec3(0.);" gridcolor="" diskcolor="" main="" color="vec4(0.0," gl_fragcoord.xy="" gl_fragcolor="color;"><textarea class="jsCode">fig.onrender = () => {<br /> fig.params[‘object_rot’].worth += fig.params[‘object_speed’].worth * fig.timeDiff / 1000;<br /> if (fig.params[‘object_rot’].worth > Math.PI*2) {<br /> fig.params[‘object_rot’].worth -= Math.PI*2;<br /> }<br /> };

5. Stay comparability of movement blur with and with out a shutter perform.

I am going to emphasize that this perceptual method to movement blur just isn’t standard and might be misguided ultimately. The frequent method is to simulate cameras, which leads to zero time overlap between frames, and infrequently totally discards moments that fall between frames. In the meantime, the strategy I am describing ends in overlapping time-ranges for successive frames. With that out of the way in which, let’s strive making use of this system.

Getting irrational with the torusphere

To make issues each tough and fascinating, I made a decision to make this infinite movement blur animation as a realtime shader. As a result of I like hardship and distress, sure, however principally as a result of I would like the top product to be interactive, and on this case, a shader may be the best means.

First, how does one render movement blur in realtime? After ruling out multisampling ^{and analytic ray-traced movement blur, I settled on a horrible hack finest described as “built-in quantity movement blur”. Signify the shifting object as a perform that takes coordinates (together with time) and returns density (the within is 1, the remainder is 0). Combine this density perform over time, and the consequence ought to offer you a “motion-blurred density” over any time interval. The consequence will be rendered by volume ray casting. This methodology just isn’t photorealistic, however can deal with extraordinarily lengthy trails with realtime efficiency.}

The meant animation combines an orbiting sphere and a rotating torus, each of which should be motion-blurred as much as basically infinite velocity.

Movement-blurred sphere

Taking a 2D slice of the orbiting sphere, the issue is diminished to discovering the motion-blurred density for an orbiting circle. Let’s assume an orbital radius $R$, and a circle of radius $a$. The circle’s middle is all the time at a distance of $R$ from the origin, so it may begin on the level $(R, 0)$. Because of this initially, all factors $(x, y)$ on the circle are outlined by:

$$
(x – R)^2 + y^2 = a^2
$$

To be able to work with the orbit, this ought to be expressed in polar coordinates $(r,theta)$, which will be carried out by substitution:

$$
r^2 – 2 r R costheta + R^2 = a^2
$$

Discovering the density perform means taking any level, and answering the query: When does this level enter the orbiting circle? When does it exit? The reply lies within the angle coordinate coordinate $theta$ of the preliminary object’s floor, with the identical radial coordinate $r$ because the given level. As a result of the thing is orbiting, this angle is immediately associated to the time when the thing will hit the purpose. So let’s discover $theta$ primarily based on the above definition of the floor:

$$
theta = pmarccosfrac{R^2 + r^2 – a^2}{2 r R}, thetain[-pi,pi] $$

The $pm$ signal comes from the inversion of $cos$. This $pm$ is helpful, because it determines which half-circle is outlined: constructive or destructive $theta$. The 2 halves will be mixed to get a polar expression of the density $rho$ of the corresponding disk:

From this beginning place, the disk is orbiting across the origin. That is equal to eradicating the time $t$ instances the velocity $v$ from the angle coordinate:

$$
rho(colorbox{yellow}{t,}r,theta) =
start{circumstances}
1 & textual content{if }-h(r)ltthetacolorbox{yellow}{- v t}lt h(r) cr
0 & textual content{in any other case}
finish{circumstances}
$$

We are able to separate $t$ from the time interval $I$ throughout which the thing is current at some extent $(r,theta)$:

$$
rho(t, r,theta) =
start{circumstances}
1 & textual content{if }tin I cr
0 & textual content{in any other case}
finish{circumstances}[2ex] I=left[cfrac{theta-h(r)}{v}, cfrac{theta+h(r)}{v}right] $$

The motion-blurred density is the integral of the density $rho$ over the present body’s time interval $F$. This works out to be the size of the intersection between $I$ and $F$. This may also be described intuitively: we’re measuring how a lot of the body’s time is occupied by the thing at a given level in area.

$$int_Frho(t,r,theta) d t = int_{Fcap I}1 d t = |Fcap I|$$

Let’s apply a shutter perform $s$. For simplicity, assume $s$ is already centered on the present body’s time span. We are able to apply it by multiplying the density with $s(t)$ earlier than integrating, changing the necessity for any bounds of integration of the density. If $s$ has an antiderivative $S$, then the motion-blurred density turns into:

$$
intrho(t,r,theta) s(t) d t =
int_I s(t) d t =
S(max I)-S(min I)
$$

This may be carried out in a shader and works with any shutter perform, nonetheless, primarily based on the objectives from the primary a part of this text, shutter capabilities ought to have an integral of 1 and will overlap in such a means that the sum of all shutter capabilities at any timepoint is all the time 1. This may be glad with a trapezoid perform, or with a sinusoid perform similar to this one, used within the animation:

$$
s(t)=start{circumstances}
cfrac{1-cosfrac{(t-A)2pi}{B-A}}{B-A} & textual content{if }Alt tlt B cr
0 & textual content{in any other case}
finish{circumstances}[2ex] A=min F-fracF{2},B=max F+fracF{2}
$$

Movement-blurred torus

The identical course of will be adopted for the torus. A 2D vertical slice of a torus known as a spiric section, or Spiric of Perseus. Apart from sounding like an epic videogame weapon, it additionally has a handy formulation in polar coordinates. Take a torus of minor radius $a$ and main radius $b$. Take a bit at place $c$, and inside this part in polar coordinates $(r,theta)$, all torus factors are outlined by:

$$
(r^2-a^2+b^2+c^2)^2 = 4b^2(r^2cos^2theta+c^2)
$$

Fixing for $theta$, assuming $thetain[-pi/2,pi/2]$, this turns into:

$$
theta = pmarccosfrac{sqrt{(a^2 – b^2 – c^2 – r^2 – 2 b c) (a^2 – b^2 – c^2 – r^2 + 2 b c)}}{2 b r}
$$

As soon as once more, the within of the torus is enclosed between the constructive and destructive circumstances of the $pm$ signal, giving us a polar expression of the density of the stable torus. The remaining steps to get the motion-blurred rotating torus are precisely the identical as for the sphere above.

6. Movement-blurred spiric part.

Placing it collectively

All that is left is to “draw the remainder of the owl” by combining components in a convincing means, and by utilizing customary quantity ray casting on the consequence. Surface normals want further care as a result of there isn’t any such factor as “motion-blurred floor normals”, so that they’re simply blended collectively right here.

The animation ought to run beneath with fundamental mouse/contact interplay. It may not work nicely on all gadgets, so there’s additionally a pre-rendered video on the high of the web page. You may also discover this shader on Shadertoy.

<br /> /*<br /> Infinite velocity movement blur utilizing quantity ray casting.</p> <p>Weblog put up to go along with it: https://www.osar.fr/notes/motionblur<br /> Additionally on Shadertoy: https://www.shadertoy.com/view/cdXSRn<br /> */</p> <p>#extension GL_OES_standard_derivatives : allow<br /> precision mediump float;<br /> #outline PI 3.14159265359</p> <p>// Inputs<br /> various vec2 iUV;<br /> uniform float iTime;<br /> uniform vec2 iRes;</p> <p>// These traces are parsed by dspnote for interplay<br /> uniform float cam_x; //dspnote param<br /> uniform float cam_y; //dspnote param</p> <p>// fundamental materials, gentle and digital camera settings<br /> #outline DIFFUSE .9<br /> #outline SPEC .9<br /> #outline REFLECT .05<br /> const vec3 lightDir = normalize(vec3(-5, -6, -1));<br /> #outline CAM_D 2.4<br /> #outline CAM_H .75</p> <p>// marching iterations<br /> #outline ITER 40<br /> #outline SHADOW_ITER 20<br /> // marching step, which is dependent upon the dimensions of the bounding sphere<br /> float stepSz;<br /> // torus form ratio = minor radius / main radius<br /> #outline TOR_RATIO .38<br /> // velocity for: time remapping; ball transition into orbit; object rotation<br /> #outline TIMESCALE .015<br /> #outline RAD_SPEED 100.<br /> const float RT_RAD_SPEED = sqrt(RAD_SPEED);<br /> const float MAX_SPEED = ground(30./(TIMESCALE*PI*2.)+.5)*PI*2.;<br /> // remapped time for big scale occasions<br /> float T;<br /> // cycle length in remapped time<br /> // it is dependent upon the torus ratio as a result of the radiuses zoom into one another<br /> const float C = log((1. + TOR_RATIO) / TOR_RATIO);<br /> const float D = C * .5;<br /> // ball and torus velocity, rotation and transformation matrix<br /> float balSpeed, balRot, torSpeed, torRot;<br /> mat2 balMat, torMat;<br /> // ball and torus dimension and cycle development<br /> float balSz, torSz, balCycle, torCycle;<br /> // ball and torus movement blur amplification<br /> float balAmp, torAmp;<br /> // torus minor and main radius, with squared model<br /> vec2 tor, tor2;<br /> // constants for torus angle and ball normals<br /> float torCst, balCst;<br /> // density and normity x-fades, ball orbit radius, beauty changes<br /> float densXf, normXf, balOrbit, torNormSz, strobe;</p> <p>// by Dave_Hoskins: https://www.shadertoy.com/view/4djSRW<br /> float hash14(vec4 p4) {<br /> p4 = fract(p4 * vec4(.1031, .1030, .0973, .1099));<br /> p4 += dot(p4, p4.wzxy+33.33);<br /> return fract((p4.x + p4.y) * (p4.z + p4.w));<br /> }</p> <p>// by iq: https://iquilezles.org/articles/filterableprocedurals/<br /> float filteredGrid(vec2 p, float scale, vec2 dpdx, vec2 dpdy) {<br /> float iscale = 1./scale;<br /> float N = 60.0*scale;<br /> p *= iscale;<br /> vec2 w = max(abs(dpdx), abs(dpdy))*iscale;<br /> vec2 a = p + 0.5*w;<br /> vec2 b = p – 0.5*w;<br /> vec2 i = (ground(a)+min(fract(a)*N,1.0)-<br /> ground(b)-min(fract(b)*N,1.0))/(N*w);<br /> return (1.0-i.x*.6)*(1.0-i.y*.6);<br /> }</p> <p>// by iq: https://iquilezles.org/articles/smin/<br /> float smin(float a, float b, float ok) {<br /> float h = max(k-abs(a-b), 0.0)/ok;<br /> return min(a, b) – h*h*ok*(1.0/4.0);<br /> }</p> <p>mat2 rot2d(float a) {<br /> float c = cos(a);<br /> float s = sin(a);<br /> return mat2(c, -s, s, c);<br /> }</p> <p>// 2-point sphere intersection<br /> vec2 sphIntersect2(vec3 ro, vec3 rd, vec4 sph) {<br /> vec3 oc = ro – sph.xyz;<br /> float b = dot(oc, rd);<br /> float c = dot(oc, oc) – sph.w*sph.w;<br /> float h = b*b – c;<br /> if(h<0.0) return vec2(-1.0, -1.0);<br /> h = sqrt(h);<br /> return vec2(-b-h, -b+h);<br /> }</p> <p>// antiderivative of the cosine shutter perform which is:<br /> // (1-cos((x-t1) 2 PI / (t2-t1)))/(t2-t1) if t1<x otherwise="" float="" icosshutter="" x="" t1="" t2="" if="" return=""> t2) return 1.;<br /> float d = 1./(t2 – t1);<br /> x -= t1;<br /> return x*d – sin(2.*PI*x*d)/(2.*PI);<br /> }</p> <p>// movement blurred density = integral of { object presence * window perform }<br /> float cosMotionBlur(float obj1, float obj2) {<br /> // Shutter time interval. Ought to embody the frameStart, but it surely’s<br /> // moved to the pixel coordinates for simpler wrap administration.<br /> float shut1 = -1./60.;<br /> float shut2 = 1./60.;<br /> // integral of the shutter perform from obj1 to obj2<br /> return iCosShutter(obj2, shut1, shut2) – iCosShutter(obj1, shut1, shut2);<br /> }</p> <p>// Take a slice at depth y. In polar coordinates, at radius r,<br /> // discover the polar angle of the ball floor.<br /> // Returns 0 if r is totally outdoors the ball.<br /> // Returns -1 if r is totally contained in the ball.<br /> float ballPolarSurface(float r, float y) {<br /> float rad = balSz*balSz – y*y;<br /> if (rad <= 0.) return 0.;<br /> rad = sqrt(rad);<br /> if (r <= rad-balOrbit) return -1.;<br /> float div = (balOrbit*balOrbit+r*r-rad*rad)/(2.*r*balOrbit);<br /> if (abs(div) > 1.) return 0.;<br /> return acos(div);<br /> }</p> <p>// motion-blurred ball density<br /> float ballDensity(vec3 p, float velocity) {<br /> p.xz *= balMat;<br /> p.z = abs(p.z);<br /> vec2 pol = vec2(size(p.xz), atan(p.z, p.x));<br /> float bA = ballPolarSurface(pol.x, p.y);<br /> if (bA == -1.) return 1.;<br /> // Time interval for the thing presence at this pixel.<br /> float obj1 = (pol.y-bA)/velocity;<br /> float obj2 = (pol.y+bA)/velocity;<br /> return cosMotionBlur(obj1, obj2);<br /> }</p> <p>// ball “normity”, pseudo distance discipline to calculate normals<br /> float ballNormity(vec3 p) {<br /> p.xz *= balMat;<br /> p.z = abs(p.z);<br /> vec2 pol = vec2(size(p.xz), atan(p.z, p.x));<br /> pol.y = max(0., pol.y-balCst);<br /> p.x = pol.x*cos(pol.y);<br /> p.z = pol.x*sin(pol.y);<br /> return size(p-vec3(balOrbit, 0., 0.))-balSz;<br /> }</p> <p>// Take a slice at depth z. In polar coordinates, at radius r,<br /> // discover the polar angle of the torus floor.<br /> // Returns 0 if r is totally outdoors the torus.<br /> // Returns -1 if r is totally contained in the torus.<br /> float spiricPolarSurface(float r, float z) {<br /> float r2 = r*r;<br /> float z2 = z*z;<br /> float sum = torCst-2.*tor2.x*z2-2.*tor2.x*r2-2.*tor2.y*z2+2.*tor2.y*r2+z2*z2+2.*z2*r2+r2*r2;<br /> if (sum < 0.) return -1.;<br /> float sq = sqrt(sum)/(2.*tor.y*r);<br /> if (abs(sq) > 1.) return 0.;<br /> return acos(sq);<br /> }</p> <p>// motion-blurred density of a half torus (a macaroni)<br /> float halfTorusDensity(vec2 pol, float z, float velocity) {<br /> float da = spiricPolarSurface(pol.x, z);<br /> if (da == 0.) return 0.;<br /> if (da == -1.) return 1.;<br /> // Time interval for the thing presence at this pixel.<br /> float obj1 = (pol.y-da)/velocity;<br /> float obj2 = (pol.y+da)/velocity;<br /> return cosMotionBlur(obj1, obj2);<br /> }</p> <p>// motion-blurred torus density<br /> float torusDensity(vec3 p3d, float velocity) da2 == -1.) return 1.;<br /> return min(1., da+da2);</p> <p>// torus “normity”, pseudo distance discipline to calculate normals<br /> float torusNormity(vec3 p, float velocity) {<br /> p.xy *= torMat;<br /> float shell = abs(size(p)-tor.y)-tor.x*.3;<br /> vec2 q = vec2(size(p.xz)-tor.y,p.y);<br /> float torus = size(q)-tor.x;<br /> return -smin(velocity*.002-torus, .1-shell, 0.1);<br /> }</p> <p>// mixed density and normity<br /> float density(vec3 p) {<br /> float ball = ballDensity(p, balSpeed)*balAmp;<br /> float torus = torusDensity(p, torSpeed)*torAmp;<br /> return combine(ball, torus, densXf);<br /> }<br /> float normity(vec3 p) {<br /> return combine(<br /> ballNormity(p),<br /> torusNormity(p*torNormSz, torSpeed*.5),<br /> normXf);<br /> }<br /> vec3 getNormal(vec3 p) {<br /> float d = normity(p);<br /> vec2 e = vec2(.001, 0);<br /> vec3 n = d – vec3(<br /> normity(p-e.xyy),<br /> normity(p-e.yxy),<br /> normity(p-e.yyx));<br /> return normalize(n);<br /> }</p> <p>// As a result of we’re raycasting translucent stuff, that is referred to as as much as 28x per px<br /> // so let’s preserve it quick<br /> vec3 materials(vec3 regular, vec3 rayDir) {<br /> float diff = max(dot(regular, -lightDir), .05);<br /> vec3 reflectDir = -lightDir – 2.*regular * dot(-lightDir, regular);<br /> float spec = max(dot(rayDir, reflectDir), 0.);<br /> return vec3(.8,.9,1.) * (diff * DIFFUSE + spec * REFLECT);<br /> }</p> <p>// render torusphere by quantity raycasting<br /> vec4 march(vec3 ro, vec3 rd, float marchPos, float marchBack) {<br /> float totMul = strobe*stepSz/0.05;<br /> vec4 col = vec4(0.);<br /> marchPos -= stepSz * hash14(vec4(rd*4000., iTime*100.));<br /> int nMats = 0;<br /> for(int i=0; i<iter i="" vec3="" pos="ro" rd="" marchpos="" float="" d="clamp(density(pos)*totMul," if=""> .002) {<br /> d = d*d*.5;<br /> float a2 = (1.-col.a)*d;<br /> vec3 n = getNormal(pos);<br /> col += vec4(materials(n, rd)*a2, a2);<br /> if (col.a > 0.95) break;<br /> if (nMats++ > 28) break;<br /> }<br /> marchPos += stepSz;<br /> if (marchPos > marchBack) break;<br /> }<br /> if (col.a > 0.) col.rgb /= col.a;<br /> return col;<br /> }</p> <p>// render floor shadow by quantity raycasting with out materials<br /> float shadowMarch(vec3 ro, vec3 rd, float marchPos, float marchBack) {<br /> float ret = 0.;<br /> float shadowStep = stepSz*2.;<br /> float totMul = .47*strobe*shadowStep/0.05;<br /> marchPos -= shadowStep * hash14(vec4(ro*4000., iTime*100.));<br /> for(int i=0; i<shadow_iter i="" vec3="" pos="ro" rd="" marchpos="" float="" d="clamp(density(pos)*totMul," if=""> .002) {<br /> d = d*d*.9;<br /> ret += (1.-ret)*d;<br /> if (ret > 0.95) break;<br /> }<br /> marchPos += shadowStep;<br /> if (marchPos > marchBack) break;<br /> }<br /> return min(1., ret);<br /> }</p> <p>// very inefficiently velocity up the boring components<br /> float retime(float t) {<br /> t *= TIMESCALE;<br /> float s = .5+1.7*t*PI*2./D;<br /> s = sin(s+sin(s+sin(s+sin(s)*0.3)*0.5)*0.75);<br /> return s*.06+t*1.7;<br /> }</p> <p>// ball<->torus crossfade used individually by density and normity<br /> float getXf(float x) {<br /> x = (abs(mod(x-(D/4.), C)-D)/D-.5)*2.+.5;<br /> // return smoothstep(0, 1, x)<br /> x = 2.*clamp(x, 0., 1.)-1.;<br /> return .5+x/(x*x+1.);<br /> }</p> <p>// Your complete scene is essentially zooming out. The bottom texture offers with<br /> // that by crossfading totally different scales.<br /> const float GRID_CYCLE = log(64.);<br /> vec3 grid(vec2 pt, vec2 dx, vec2 dy, float section, float t) {<br /> float freq = exp(-mod(t+GRID_CYCLE*section, GRID_CYCLE))*7.;<br /> float amp = cos(PI*2.*section+t*PI*2./GRID_CYCLE)*-.5+.5;<br /> float g = filteredGrid(pt, freq, dx, dy)*amp;<br /> return vec3(g,g,g);<br /> }</p> <p>void mainImage(inout vec4 fragColor, in vec2 fragCoord) {<br /> // set all of the globals…<br /> T = retime(iTime+25.); // think about a modulo right here<br /> balCycle = mod(T, C);<br /> torCycle = mod(T+D, C);</p> <p> // dimension of the bounding sphere for marching and step dimension<br /> float boundSz = exp(-min(torCycle, 5.*(C-mod(T-D, C))));<br /> stepSz = boundSz/20.;</p> <p> // the ball/torus seem fixed dimension and the digital camera seems to zoom out<br /> // within the code the digital camera distance is mounted and the objects are shrinking<br /> balSz = exp(-balCycle-D);<br /> torSz = exp(-torCycle);</p> <p> // the rotation is (theoretically) the integral of the velocity, we’d like each<br /> balSpeed = .04*MAX_SPEED*(cos(T*PI*2./C)+1.);<br /> torSpeed = .04*MAX_SPEED*(cos((T+D)*PI*2./C)+1.);<br /> balRot = MAX_SPEED*(sin(T*PI*2./C)/(PI*2./C)+T)/C;<br /> torRot = MAX_SPEED*(sin((T+D)*PI*2./C)/(PI*2./C)+T)/C;<br /> if (balCycle<d balrot="MAX_SPEED*(floor(T/C+.5)*C+D)/C;" balspeed="0.;" if="" torrot="MAX_SPEED*(floor((T+D)/C+.5)*C)/C;" torspeed="0.;" balmat="rot2d(balRot);" tormat="rot2d(torRot);" torus="" minor="" and="" major="" radius="" their="" squares="" tor="vec2(torSz/(1.+1./TOR_RATIO)," torsz="" tor2="tor*tor;" precalculate="" constants="" for="" the="" spiric="" angle="" ball="" normals="" torcst="tor2.x*tor2.x" tor2.y="" balcst="2.*balSpeed*smoothstep(30.," float="" bx="balCst*.037;" orbital="" balorbit="clamp(balCycle-D," tor.y="">torus crossfade: the normity precedes the density barely<br /> // this smoothens the max velocity -> zero velocity phantasm<br /> densXf = getXf(T);<br /> normXf = getXf(T+0.06);</p> <p> // movement blur amplification is what makes this work<br /> balAmp = 1.+balSpeed*balSpeed*.00013;<br /> torAmp = 1.5+torSpeed*torSpeed*.00015;<br /> torNormSz = max(1., 8.*(torCycle-.76));</p> <p> // Normalized pixel coordinates (from 0 to 1)<br /> vec2 uv = fragCoord/iRes.xy;</p> <p> // the strobe impact simulates overlap between quick spin and gradual spin<br /> strobe = 1.-.1*(sin(iTime*83.+PI*smoothstep(.4, .6, uv.x))+1.)*(sin(2.2+T*PI*2./D)+1.)*.5;</p> <p> // digital camera<br /> float facet = cos(CAM_H+cam_y)*CAM_D;<br /> float camT = iTime*0.05+PI*.75+cam_x;<br /> vec3 ro = vec3(sin(camT)*facet, sin(CAM_H+cam_y)*CAM_D, cos(camT)*facet); // digital camera place (ray origin)<br /> vec3 ta = vec3(0., 0., 0.); // digital camera goal<br /> vec3 ww = normalize(ta – ro);<br /> vec3 uu = normalize(cross(ww,vec3(0.0,1.0,0.0)));<br /> vec3 vv = normalize(cross(uu,ww));<br /> vec2 p = (-iRes.xy + 2.0*fragCoord)/iRes.y;<br /> vec3 rd = normalize(p.x*uu + p.y*vv + 2.*ww);</p> <p> // this beginning colour taints your entire scene (unintentional however why not)<br /> vec3 col = vec3(0.33, 0.18, 0.1);</p> <p> // the bottom aircraft<br /> if (rd.y < 0.) {<br /> vec3 groundPt = ro + rd*(-(ro.y+.8) / rd.y);<br /> vec2 g2d = groundPt.xz;<br /> vec2 dx = dFdx(g2d);<br /> vec2 dy = dFdy(g2d);<br /> // the bottom texture zooms out by crossfading totally different scales<br /> col += grid(g2d, dx, dy, 0., T)/3.;<br /> col += grid(g2d, dx, dy, 1./3., T)/3.;<br /> col += grid(g2d, dx, dy, 2./3., T)/3.;<br /> float sqDist = dot(g2d, g2d);<br /> col *= 2./(sqDist*.5*1.5+1.)-1.2/(sqDist*1.5*1.5+1.);<br /> // are we within the shadow of the bounding sphere?<br /> vec2 sphInter = sphIntersect2(groundPt, -lightDir, vec4(0.,0.,0.,boundSz));<br /> if (sphInter != vec2(-1., -1.)) {<br /> // march the torusphere to attract the shadow<br /> float shad = shadowMarch(groundPt, -lightDir, sphInter.x, sphInter.y);<br /> col *= 1.-shad*.7;<br /> }<br /> }</p> <p> // the sky (solely seen in interactive model)<br /> float up = dot(rd, vec3(0.,1.,0.));<br /> col = combine(col, vec3(0.33, 0.18, 0.1)*.7, 1.-smoothstep(0., .02, abs(up)+.003));<br /> col = combine(col, vec3(0.,0.,.1), smoothstep(0., .5, up));</p> <p> // lastly render the torusphere<br /> vec2 sphInter = sphIntersect2(ro, rd, vec4(0.,0.,0.,boundSz));<br /> if (sphInter != vec2(-1., -1.)) {<br /> vec4 ts = march(ro, rd, sphInter.x, sphInter.y);<br /> col = combine(col, ts.rgb, ts.a);<br /> }<br /> fragColor = vec4(col, 1.);<br /> }</p> <p>void major(void)<br /> {<br /> vec4 colour = vec4(0.0, 0.0, 0.0, 1.0);<br /> mainImage(colour, gl_FragCoord.xy);<br /> gl_FragColor = colour;<br /> }<br /> </d></shadow_iter></iter></x>const tgt = fig.graphicsDiv;<br /> tgt.model.touchAction = ‘none’;<br /> let startPointerX = -1, startCamX = 0;<br /> let startPointerY, startCamY = 0;<br /> tgt.onpointerdown = (ev) => {<br /> fig.activate();<br /> tgt.setPointerCapture(ev.pointerId);<br /> startPointerX = ev.clientX;<br /> startPointerY = ev.clientY;<br /> startCamX = fig.params[‘cam_x’].worth;<br /> startCamY = fig.params[‘cam_y’].worth;<br /> };<br /> tgt.onpointerup = (ev) => {<br /> tgt.releasePointerCapture(ev.pointerId);<br /> startPointerX = -1;<br /> };<br /> tgt.onpointercancel = tgt.onpointerup;<br /> tgt.onpointermove = (ev) => {<br /> if (startPointerX === -1) return;<br /> fig.params[‘cam_x’].worth = startCamX – 4*(ev.clientX – startPointerX)/tgt.clientWidth;<br /> fig.params[‘cam_y’].worth = startCamY + 4*(ev.clientY – startPointerY)/tgt.clientHeight;<br /> if (fig.params[‘cam_y’].worth > 0.75) fig.params[‘cam_y’].worth = 0.75;<br /> if (fig.params[‘cam_y’].worth < -1) fig.params[‘cam_y’].worth = -1;<br /> fig.soiled = true;<br /> };

Torusphere accelerator (dwell)