WebGL Three.js 3D多面体结构交互动画着色器代码

Voronoi GLSL shader codes

webgl, shader, cell

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var render = function render(timeStamp) {
    if (timeStamp) {
        var progress = (timeStamp - lastTimeStamp) * 0.001;
        mesh.material.uniforms.time.value += progress;
        mesh.material.uniforms.mouse.value.x = mousePoint.x;
        mesh.material.uniforms.mouse.value.y = mousePoint.y;
        renderer.render(scene, camera);
        lastTimeStamp = timeStamp;
    }
    requestAnimationFrame(render);
};

var onResize = function onResize() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    mesh.material.uniforms.resolution.value.x = width;
    mesh.material.uniforms.resolution.value.y = height;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
};

var lastTimeStamp = 0;
var mousePoint = {
    x: window.innerWidth / 2,
    y: window.innerHeight / 2
};

// scene
var scene = new THREE.Scene();

// renderer
var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('WebGL-output').appendChild(renderer.domElement);
renderer.domElement.addEventListener('mousemove', function(e) {
    mousePoint.x = e.offsetX;
    mousePoint.y = e.offsetY;
});

// camera
var camera = new THREE.OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0, 0.1);

// mesh
var uniforms = {
    time: {
        type: 'f',
        value: Math.random() * 100
    },

resolution: {
        type: 'v2',
        value: new THREE.Vector2()
    },

mouse: {
        type: 'f',
        value: new THREE.Vector2()
    }
};

uniforms.resolution.value.x = window.innerWidth;
uniforms.resolution.value.y = window.innerHeight;
var shaderMaterial = new THREE.RawShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.getElementById('vs').textContent,
    fragmentShader: document.getElementById('fs').textContent
});

var planeBufferGeometry = new THREE.PlaneBufferGeometry(window.innerWidth, window.innerHeight);
var mesh = new THREE.Mesh(planeBufferGeometry, shaderMaterial);
scene.add(mesh);

// resize
window.addEventListener('resize', onResize, false);

render();

编译

CSS

HTML

void main() {
          float shortSide = min(resolution.x, resolution.y);
          vec2 pixelPos = (gl_FragCoord.xy - resolution) / shortSide;
          vec2 mousePos = ((mouse * 2.0 - resolution) / shortSide);
          mousePos.y *= -1.0;

float toMouseDistance = distance(mousePos.xy, pixelPos.xy);
          pixelPos *= 4.0;
          pixelPos *= toMouseDistance;

vec3 color = vec3(0.0);

vec2 cellIndex = floor(pixelPos);
          vec2 cellLocalPos = fract(pixelPos);

float minDist = 1.0;
          vec2 nearestPoint;

for(int y = -1; y <= 1; y++) {
              for(int x = -1; x <= 1; x++) {
                  vec2 neighbor = vec2(float(x), float(y));
                  vec2 point = random2(cellIndex + neighbor);
                  point = 0.5 + 0.5 * sin(time + 6.2831 * point);
                  vec2 diff = point + neighbor - cellLocalPos;
                  float dist = length(diff);
                  if (dist < minDist) {
                      minDist = dist;
                      nearestPoint = point;
                  }
              }
          }

color += minDist * 2.0;
          color.rg = nearestPoint;
          color -= abs(sin(4.0 * minDist)) * 0.4;
          color += 1.0 - step(0.03, minDist);

gl_FragColor = vec4(color, 1.0);
      }
</script>

Voronoi GLSL shader codes

webgl, shader, cell

编辑器支持Emmet

快捷键

Voronoi GLSL shader codes

webgl, shader, cell

WebGL Three.js构建带鼠标交互的浆液特效着色器代码

使用WebGL Three.js着色器代码实现的非规则球体变形背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：