HTML5/WebGL豹纹波动着色器

可以用来模拟深海海洋生物/外星球生物的绚丽诡异的斑纹。

three, shader

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var width = window.innerWidth;
var height = window.innerHeight;
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var mousePos = new THREE.Vector2(0.5, 0.5);

camera.position.set(0, -60, 110);
camera.lookAt(scene.position);

renderer.setSize(width, height);
renderer.setClearColor(0x111111);
document.body.appendChild(renderer.domElement);

document.body.addEventListener('mousemove', mouseMove);

function mouseMove(e) {
    var scale = 100;
    mousePos.x = (e.pageX * scale - scale / 2) / window.innerWidth - scale / 2;
    mousePos.y = (e.pageY * scale - scale / 2) / window.innerHeight - scale / 2;

//console.log(`Position of mouse is X: ${mousePos.x}, Y: ${mousePos.y}`);
}

window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    width = window.innerWith;
    height = window.innerHeight;
    camera.aspect = width / height;
    camera.updateProjectionMatrix();

renderer.setSize(width, height);
}

(function renderFrame(timeElapsed) {
    window.requestAnimationFrame(renderFrame);
    renderer.render(scene, camera);
    mesh.material.uniforms.delta.value = timeElapsed;
    mesh.material.uniforms.mouseCenter.value = mousePos;
    //mesh.rotation.z += 0.001;
})();

编译

CSS

HTML

uniform float delta;
    uniform vec2 mouseCenter;
    
    varying vec4 vPos;

void main () {
        float x = position.x;
        float y = position.y;
        float z = position.z;

float dx = distance(x, mouseCenter.x ) / 2.0;
        float dy = distance(y, -mouseCenter.y) / 2.0;
        float dist = sqrt(dx * dx + dy * dy);
    
        z += sin((dist) * 0.09 + delta / 750.0) * cos((dist) * 0.5) * sin((dist) * 0.125) * 2.0;
    
        vec4 newPosition = vec4(x, y, z * 10.0, 1.0);
        vec4 modelViewPosition = modelViewMatrix * newPosition;

vPos = modelViewPosition;
        
        gl_Position = projectionMatrix * modelViewPosition;
    }
</script>
<script id="fragment" type="x-shader/x-fragment">
    
    uniform float delta;
    uniform vec2 mouseCenter;

varying vec4 vPos;

void main() {
        float dx = distance(vPos.x, mouseCenter.x)  + 10.0;
        float dy = distance(vPos.y, -mouseCenter.y) + 10.0;
        float dist = sqrt(dx * dx + dy * dy);
        vec4 baseColor = vec4(1.0, 0.2, 0.3, 1.0);
        vec4 overlayColor = vec4(
            sin(cos(vPos.y) * 2.0 + cos(vPos.x) + delta / 750.0) * 50.0 - dist,  
            sin(cos(vPos.y) * 2.0 + cos(vPos.x) + delta / 500.0) * 50.0 - dist, 
            1.0, 
            1.0
        );
        gl_FragColor = mix(baseColor, overlayColor, dist * 0.00185);
    }

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>

可以用来模拟深海海洋生物/外星球生物的绚丽诡异的斑纹。

three, shader

编辑器支持Emmet

快捷键

可以用来模拟深海海洋生物/外星球生物的绚丽诡异的斑纹。

three, shader

HTML5 WebGL液态金属波动色差着色器动画特效

使用HTML5 WebGL GLSL着色器代码实现的太空星云图粒子动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：