blocks|key|1984147|text|好吧，这很有趣。:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1984148|这里提供了一个WebGL演示：http://boblycat.org/~knute/webgl/tunnel/|offset|length|1984149|(编辑:不再可用，但我创建了一个ShaderToy版本：https://www.shadertoy.com/view/XdKfRD)|1984150|主要算法在片段着色器中。基本思想是在黑色的环/圆上迭代一个for循环，从大到小，也偏移中心以产生类似隧道的效果。|1984151|给定任何像素，我们可以检查该像素是否足够靠近圆环，以成为黑色像素的候选者。如果它在环之外，请中断环路，以避免通过较大的环看到较小的环。|1984152|距离前一个(外部)圆的距离被用来在环形接近时将图案“挤压”在一起，这有助于创建3D表面的错觉。|1984153|当然，每个环的波纹都是一条正弦曲线。像素的角度(与圆心相比)与统一的时间参数相结合，为每个环设置波纹图案的动画。|1984154|最后，使用不同的参数和变换函数(如pow()+)进行了大量实验，以获得接近目标动画的结果。它不是完美的，但非常接近。|1984155|片段着色器代码：|1984156|#ifdef+GL_ES
precision+highp+float;
#endif

const+float+PI+=+3.14159265358979323846264;
const+float+TWOPI+=+PI*2.0;

const+vec4+WHITE+=+vec4(1.0,+1.0,+1.0,+1.0);
const+vec4+BLACK+=+vec4(0.0,+0.0,+0.0,+1.0);

const+vec2+CENTER+=+vec2(0.0,+0.0);

const+int+MAX_RINGS+=+30;
const+float+RING_DISTANCE+=+0.05;
const+float+WAVE_COUNT+=+60.0;
const+float+WAVE_DEPTH+=+0.04;

uniform+float+uTime;
varying+vec2+vPosition;

void+main(void)+{
++++float+rot+=+mod(uTime*0.0006,+TWOPI);
++++float+x+=+vPosition.x;
++++float+y+=+vPosition.y;

++++bool+black+=+false;
++++float+prevRingDist+=+RING_DISTANCE;
++++for+(int+i+=+0;+i+<+MAX_RINGS;+i%2B%2B)+{
++++++++vec2+center+=+vec2(0.0,+0.7+-+RING_DISTANCE+*+float(i)*1.2);
++++++++float+radius+=+0.5+%2B+RING_DISTANCE+/+(pow(float(i%2B5),+1.1)*0.006);
++++++++float+dist+=+distance(center,+vPosition);
++++++++dist+=+pow(dist,+0.3);
++++++++float+ringDist+=+abs(dist-radius);
++++++++if+(ringDist+<+RING_DISTANCE*prevRingDist*7.0)+{
++++++++++++float+angle+=+atan(y+-+center.y,+x+-+center.x);
++++++++++++float+thickness+=+1.1+*+abs(dist+-+radius)+/+prevRingDist;
++++++++++++float+depthFactor+=+WAVE_DEPTH+*+sin((angle%2Brot*radius)+*+WAVE_COUNT);
++++++++++++if+(dist+>+radius)+{
++++++++++++++++black+=+(thickness+<+RING_DISTANCE+*+5.0+-+depthFactor+*+2.0);
++++++++++++}
++++++++++++else+{
++++++++++++++++black+=+(thickness+<+RING_DISTANCE+*+5.0+%2B+depthFactor);
++++++++++++}
++++++++++++break;
++++++++}
++++++++if+(dist+>+radius)+break;
++++++++prevRingDist+=+ringDist;
++++}

++++gl_FragColor+=+black+?+BLACK+:+WHITE;
}|code-block|syntax|javascript|1984157|entityMap|0|LINK|mutability|MUTABLE|url|http://boblycat.org/~knute/webgl/tunnel/|1|https://www.shadertoy.com/view/XdKfRD^0|0|F|14|0|0|S|11|1|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|F|3|G|5|6|7|1D|8|@]|9|@$D|1E|E|1F|1|1G]]|A|$]]|$1|H|3|I|5|6|7|1H|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1I|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1J|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1K|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1L|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1M|8|@]|9|@]|A|$]]|$1|T|3|U|5|V|7|1N|8|@]|9|@]|A|$W|X]]|$1|Y|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]]]

Well, this was fun. :)

A WebGL demo is available here: <a href="http://boblycat.org/~knute/webgl/tunnel/" rel="nofollow noreferrer">http://boblycat.org/~knute/webgl/tunnel/</a>

(EDIT: no longer available, but I created a ShaderToy version: <a href="https://www.shadertoy.com/view/XdKfRD" rel="nofollow noreferrer">https://www.shadertoy.com/view/XdKfRD</a>)

The main algorithm is in the fragment shader. The basic idea is a for loop iterating over the black rings/circles, from large to small, also offsetting the center to produce a tunnel-like effect.

Given any pixel, we can check if the pixel is close enough to the ring to be a candidate for a black pixel or not. If it is outside the ring, break the loop to avoid seeing smaller rings through the larger ones.

The distance from the previous (outer) circle is used to "squeeze" the pattern together when rings are close, this helps create the illusion of a 3D surface.

The wavy pattern of each ring is of course a sine curve. The angle of the pixel (compared to the circle center) is combined with a uniform time parameter to animate the wavy pattern for each ring.

And finally, there was lots of experimentation with different parameters and transformation functions like pow() to get the result close to the target animation. It's not perfect, but pretty close.

The fragment shader code:

<pre><code>#ifdef GL_ES
precision highp float;
#endif

const float PI = 3.14159265358979323846264;
const float TWOPI = PI*2.0;

const vec4 WHITE = vec4(1.0, 1.0, 1.0, 1.0);
const vec4 BLACK = vec4(0.0, 0.0, 0.0, 1.0);

const vec2 CENTER = vec2(0.0, 0.0);

const int MAX_RINGS = 30;
const float RING_DISTANCE = 0.05;
const float WAVE_COUNT = 60.0;
const float WAVE_DEPTH = 0.04;

uniform float uTime;
varying vec2 vPosition;

void main(void) {
 float rot = mod(uTime*0.0006, TWOPI);
 float x = vPosition.x;
 float y = vPosition.y;

 bool black = false;
 float prevRingDist = RING_DISTANCE;
 for (int i = 0; i &lt; MAX_RINGS; i++) {
 vec2 center = vec2(0.0, 0.7 - RING_DISTANCE * float(i)*1.2);
 float radius = 0.5 + RING_DISTANCE / (pow(float(i+5), 1.1)*0.006);
 float dist = distance(center, vPosition);
 dist = pow(dist, 0.3);
 float ringDist = abs(dist-radius);
 if (ringDist &lt; RING_DISTANCE*prevRingDist*7.0) {
 float angle = atan(y - center.y, x - center.x);
 float thickness = 1.1 * abs(dist - radius) / prevRingDist;
 float depthFactor = WAVE_DEPTH * sin((angle+rot*radius) * WAVE_COUNT);
 if (dist &gt; radius) {
 black = (thickness &lt; RING_DISTANCE * 5.0 - depthFactor * 2.0);
 }
 else {
 black = (thickness &lt; RING_DISTANCE * 5.0 + depthFactor);
 }
 break;
 }
 if (dist &gt; radius) break;
 prevRingDist = ringDist;
 }

 gl_FragColor = black ? BLACK : WHITE;
}
</code></pre>

How to implement this tunnel like animation in WebGL?

<img src="https://i.stack.imgur.com/zqYqa.gif" alt="enter image description here">

Source: <a href="http://dvdp.tumblr.com/" rel="nofollow noreferrer">http://dvdp.tumblr.com/</a>

See also: <a href="https://stackoverflow.com/questions/4638317/how-to-implement-this-rotating-spiral-in-webgl">How to implement this rotating spiral in WebGL?</a>

How to implement this tunnel like animation in WebGL?

如何在WebGL中像动画一样实现这个隧道？​​来源：另请参阅：

问如何在WebGL中像动画一样实现这个隧道？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在WebGL中像动画一样实现这个隧道？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在WebGL中像动画一样实现这个隧道？
EN