如何在WebGL中像动画一样实现这个隧道?
发布于 2011-03-31 06:15:51
好吧,这很有趣。:)
这里提供了一个WebGL演示:http://boblycat.org/~knute/webgl/tunnel/
(编辑:不再可用,但我创建了一个ShaderToy版本:https://www.shadertoy.com/view/XdKfRD)
主要算法在片段着色器中。基本思想是在黑色的环/圆上迭代一个for循环,从大到小,也偏移中心以产生类似隧道的效果。
给定任何像素,我们可以检查该像素是否足够靠近圆环,以成为黑色像素的候选者。如果它在环之外,请中断环路,以避免通过较大的环看到较小的环。
距离前一个(外部)圆的距离被用来在环形接近时将图案“挤压”在一起,这有助于创建3D表面的错觉。
当然,每个环的波纹都是一条正弦曲线。像素的角度(与圆心相比)与统一的时间参数相结合,为每个环设置波纹图案的动画。
最后,使用不同的参数和变换函数(如pow() )进行了大量实验,以获得接近目标动画的结果。它不是完美的,但非常接近。
片段着色器代码:
#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++) {
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 < 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 > radius) {
black = (thickness < RING_DISTANCE * 5.0 - depthFactor * 2.0);
}
else {
black = (thickness < RING_DISTANCE * 5.0 + depthFactor);
}
break;
}
if (dist > radius) break;
prevRingDist = ringDist;
}
gl_FragColor = black ? BLACK : WHITE;
}
https://stackoverflow.com/questions/5451376
复制相似问题