Three.js 着色器（Shader）应用实例 - 万花筒

Shader work 使用片段着色器代码实现的圆形变形动画。

webgl, shader，教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 5688
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var cameraRTT, sceneRTT, renderer;
var texture, material;
var uniforms;
var delata = 0.05;

function init() {
    cameraRTT = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -10000, 10000);
    cameraRTT.position.z = 100;

uniforms = {
        u_pixelRatio: {
            type: 'f',
            value: window.devicePixelRatio
        },
        u_time: {
            type: 'f',
            value: 0.0
        },
        u_rate: {
            type: 'f',
            value: 0.0
        },
        u_resolution: {
            type: 'v2',
            value: new THREE.Vector2()
        },
        u_mouse: {
            type: 'v2',
            value: new THREE.Vector2()
        },
        u_mouse_vel: {
            type: 'v2',
            value: new THREE.Vector2()
        },
    };

sceneRTT = new THREE.Scene();

material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: document.getElementById("vertexShader").textContent,
        fragmentShader: document.getElementById("fragmentShader").textContent
    });

var plane = new THREE.PlaneBufferGeometry(window.innerWidth, window.innerHeight);

quad = new THREE.Mesh(plane, material);
    quad.position.z = -100;
    sceneRTT.add(quad);

renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.autoClear = false;

renderer.domElement.style.display = 'block';
    document.body.appendChild(renderer.domElement);

window.addEventListener("mousemove", onMouseMove);
    resize();
}

function resize() {
    uniforms.u_resolution.value.x = window.innerWidth;
    uniforms.u_resolution.value.y = window.innerHeight;

}

var curPosX, curPosY, prevPosX, prevPosY;
var velX = 100.0,
    velY = 100.0;

function onMouseMove(ev) {
    uniforms.u_mouse.value.x = ev.clientX;
    uniforms.u_mouse.value.y = ev.clientY;

prevPosX = curPosX;
    prevPosY = curPosY;

curPosX = ev.clientX;
    curPosY = ev.clientY;
}

function loop() {
    uniforms.u_time.value += 0.05;
    uniforms.u_rate.value += 1.0;
    if (uniforms.u_rate.value > 99.9) uniforms.u_rate.value = 99.9

if (prevPosX && prevPosY && curPosX && curPosY) {
        velX += curPosX - prevPosX;
        velY += curPosY - prevPosY;;
    }

velX *= .4;
    velY *= .4;

uniforms.u_mouse_vel.value.x = velX;
    uniforms.u_mouse_vel.value.y = velY;

//screenUniforms.u_progress.value += delta;
    //if(screenUniforms.u_progress.value >= 1.0 || screenUniforms.u_progress.value <= 0.0) delta *= -1;

renderer.clear();

renderer.render(sceneRTT, cameraRTT);

requestAnimationFrame(loop);
}

function start() {
    init();
    loop();
}

start();

编译

CSS

HTML

#ifdef GL_ES
precision mediump float;
#endif

#define M_PI 3.1415926535897932384626433832795

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform vec2 u_mouse_vel;
uniform float u_time;
uniform float u_pixelRatio;
uniform float u_rate;

bool inTitle(vec2 p, float titleSize){
	vec2 ptile = step(0.5, fract(0.5 * p / titleSize));
	return ptile.x == ptile.y;
}

bool isCircle( vec2 pos ){
	float dis = length(gl_FragCoord.xy - pos);
	float theta = atan(gl_FragCoord.y - pos.y, gl_FragCoord.x - pos.x) ;//+ u_time;//+ M_PI/2.0;

float del = 2.0;

// float windowSize = length(u_mouse - u_resolution/2.0)/10.0 + 50.0;
	float rad =  8. * u_pixelRatio * ( 1.0+ 2.0* (cos(theta * 3.0 * sin(u_time /del) ) + 1.0) / 2.0 * (cos(u_time* 2.75) + 1.0));
	// float rad = length(u_resolution.xy)/100.0 + 50.0 * (cos(theta * 3.0 * sin(u_time /del) ) + 1.0) / 2.0;

if(dis < rad)   return true;
	else            return false;
}

void main(){
	vec3 col = vec3(0.0, 0.0, 0.0);

float rgbRad = min(u_resolution.x, u_resolution.y) / 2.0 ;
	float rTheta = M_PI * 2.0 /3.0*0.0;
	float pVal0 = sin(u_time / 1.0);
	float pVal1 = sin(u_time / 2.0);
	float pVal2 = sin(u_time / 4.0);

float windowSize = 100. * u_pixelRatio; //+ floor(100. * (cos(u_time /3.0) + 1.0));
	float yy = floor( gl_FragCoord.y / windowSize  );
	vec2 curPos;
	if (mod(yy, 2.0)==0.0){
		curPos = vec2( floor( gl_FragCoord.x / windowSize  ) * windowSize + windowSize/2.0, yy * windowSize + windowSize/2.0);
	}else{
		curPos = vec2( floor( gl_FragCoord.x / windowSize  ) * windowSize + windowSize/2.0, yy * windowSize + windowSize/2.0);
	}
	vec2 rPos = vec2(curPos.x, curPos.y);
	float gTheta = M_PI * 2.0  * sin(u_time);
	vec2 gPos = vec2(curPos.x + 2.0 * u_pixelRatio * sin(gTheta), curPos.y);
	float bTheta = M_PI * 2.0  *cos(u_time);
	vec2 bPos = vec2( curPos.x, curPos.y + 2.0 * u_pixelRatio * cos(bTheta));

// float rTheta = vec2(100.0, 100.0);

bool isRCircle = isCircle(rPos);
	// bool isRCircle = isCircle(rPos );
	bool isGCircle = isCircle(gPos);
	bool isBCircle = isCircle(bPos);
	// bool isCenterCircle = isCircle(u_resolution.xy/2.0);
	// bool isGCircle = isCricle()

if(isRCircle){
		col.r += 1.0; //0.4 + 0.6 *abs(sin(u_time/10.0)) ;
	}

if(isGCircle){
		col.g += 1.0;//0.4 + 0.6 * abs(sin(u_time/3.0));
	}

if(isBCircle){
		col.b += 1.0; //0.6 + 0.4 * (cos(u_time/10.0) + 1.0);
	}

vec2 centerPos = vec2(u_resolution.x/2.0, u_resolution.y/2.0) * u_pixelRatio;
	float maxLength = length(centerPos.xy);
	float curLength = length(gl_FragCoord.xy - centerPos.xy);
	float rate = curLength / maxLength;

col = col * (1.0-rate) * (1.0-rate) * 1.2;

gl_FragColor = vec4( col, 1.0);

}

</script>

Shader work 使用片段着色器代码实现的圆形变形动画。

webgl, shader，教程

编辑器支持Emmet

快捷键

Shader work 使用片段着色器代码实现的圆形变形动画。

webgl, shader，教程

Three.js开发实例：使用着色器（GLSL代码）实现发光效应

实例演示：如何把HTML渲染到WebGL上并使用着色器（Shader）特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：