WebGL构造三维空间充斥短而硬的毛发（或光芒）特效

带鼠标交互，鼠标所处位置呈现排斥效果。

webgl, three, shader, lines

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var hash = document.location.hash.substr(1);
if (hash) hash = parseInt(hash, 0);
/* TEXTURE WIDTH FOR SIMULATION */
var WIDTH = hash || 38;
var lines = WIDTH * WIDTH;
// Custom Geometry - using 3 triangles each. No UVs, no normals currently.
THREE.lineGeometry = function() {

var triangles = lines * 5;
    var points = triangles * 5;

THREE.BufferGeometry.call(this);
    var vertices = new THREE.BufferAttribute(new Float32Array(points * 3), 3);
    var lineColors = new THREE.BufferAttribute(new Float32Array(points * 5), 2);
    var references = new THREE.BufferAttribute(new Float32Array(points * 3), 2);
    var lineVertex = new THREE.BufferAttribute(new Float32Array(points), 1);

this.addAttribute('position', vertices);
    this.addAttribute('lineColor', lineColors);
    this.addAttribute('reference', references);
    this.addAttribute('lineVertex', lineVertex);

// this.addAttribute( 'normal', new Float32Array( points * 3 ), 3 );
    var v = 0;

function verts_push() {
        for (var i = 0; i < arguments.length; i++) {
            vertices.array[v++] = arguments[i];
        }
    }
    var wingsSpan = 0;

for (var f = 0; f < lines; f++) {

// Body
        verts_push(
            10, 90, 3.141592653589793 * 100,
            20, 30, 80,
            10, 20, 10
        );
        // Left Wing
        verts_push(
            0, 0, 0, -wingsSpan, 0, 0,
            0, 0, 0
        );
        // Right Wing
        verts_push(
            0, 0, 0,
            wingsSpan, 0, 0,
            0, 0, 0
        );
    }

for (var v = 0; v < triangles * 5; v++) {
        var i = ~~(v / 3);
        var x = (i % WIDTH) / WIDTH;
        var y = ~~(i / WIDTH) / WIDTH;

var c = new THREE.Color(
            0x63f1df +
            ~~(v / 9) / lines * 0x63f1df
        );
        lineColors.array[v * 3 + 0] = c.r;
        lineColors.array[v * 3 + 1] = c.g;
        lineColors.array[v * 3 + 2] = c.b;
        references.array[v * 2] = x;
        references.array[v * 2 + 1] = y;
        lineVertex.array[v] = v % 9;

}

this.scale(0.1, 0.1, 1);

};

THREE.lineGeometry.prototype = Object.create(THREE.BufferGeometry.prototype);

var container;
var camera, scene, renderer, geometry, i, h, color;
var mouseX = 0,
    mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var BOUNDS = 1000,
    BOUNDS_HALF = BOUNDS / 2;

function change(n) {
    location.hash = n;
    location.removedByCodePen();
    return false;
}
var last = performance.now();
var gpuCompute;
var velocityVariable;
var positionVariable;
var positionUniforms;
var velocityUniforms;
var lineUniforms;

init();
animate();

function init() {

container = document.createElement('div');
    document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);
    camera.position.z = 350;

scene = new THREE.Scene();

scene.fog = new THREE.Fog(0xffffff, 100, 1000);

renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(scene.fog.color);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

initComputeRenderer();

document.addEventListener('mousemove', onDocumentMouseMove, false);
    document.addEventListener('touchstart', onDocumentTouchStart, false);
    document.addEventListener('touchmove', onDocumentTouchMove, false);
    window.addEventListener('resize', onWindowResize, false);

initlines();

}

function initComputeRenderer() {

gpuCompute = new GPUComputationRenderer(WIDTH, WIDTH, renderer);

var dtPosition = gpuCompute.createTexture();
    var dtVelocity = gpuCompute.createTexture();
    fillPositionTexture(dtPosition);
    fillVelocityTexture(dtVelocity);

velocityVariable = gpuCompute.addVariable("textureVelocity", document.getElementById('fragmentShaderVelocity').textContent, dtVelocity);
    positionVariable = gpuCompute.addVariable("texturePosition", document.getElementById('fragmentShaderPosition').textContent, dtPosition);

gpuCompute.setVariableDependencies(velocityVariable, [positionVariable, velocityVariable]);
    gpuCompute.setVariableDependencies(positionVariable, [positionVariable, velocityVariable]);

positionUniforms = positionVariable.material.uniforms;
    velocityUniforms = velocityVariable.material.uniforms;

positionUniforms.time = {
        value: 0.0
    };
    positionUniforms.delta = {
        value: 0.0
    };
    velocityUniforms.time = {
        value: 1.0
    };
    velocityUniforms.delta = {
        value: 0.0
    };
    velocityUniforms.testing = {
        value: 1.0
    };
    velocityUniforms.seperationDistance = {
        value: 1.0
    };
    velocityUniforms.alignmentDistance = {
        value: 1.0
    };
    velocityUniforms.cohesionDistance = {
        value: 1.0
    };
    velocityUniforms.freedomFactor = {
        value: 1.0
    };
    velocityUniforms.predator = {
        value: new THREE.Vector3()
    };
    velocityVariable.material.defines.BOUNDS = BOUNDS.toFixed(2);

// velocityVariable.wrapS = THREE.RepeatWrapping;
    // velocityVariable.wrapT = THREE.RepeatWrapping;
    // positionVariable.wrapS = THREE.RepeatWrapping;
    // positionVariable.wrapT = THREE.RepeatWrapping;

var error = gpuCompute.init();
    if (error !== null) {
        console.error(error);
    }

}

function initlines() {
    var geometry = new THREE.lineGeometry();
    // For Vertex and Fragment
    lineUniforms = {
        color: {
            value: new THREE.Color(0x63f1df)
        },
        texturePosition: {
            value: null
        },
        textureVelocity: {
            value: null
        },
        time: {
            value: 1.0
        },
        delta: {
            value: 0.0
        }
    };
    // ShaderMaterial
    var material = new THREE.ShaderMaterial({
        uniforms: lineUniforms,
        vertexShader: document.getElementById('lineVS').textContent,
        fragmentShader: document.getElementById('lineFS').textContent,
        side: THREE.DoubleSide

});
    lineMesh = new THREE.Mesh(geometry, material);
    lineMesh.rotation.y = Math.PI / 2;
    lineMesh.matrixAutoUpdate = false;
    lineMesh.updateMatrix();

scene.add(lineMesh);

}

function fillPositionTexture(texture) {

var theArray = texture.image.data;

for (var k = 0, kl = theArray.length; k < kl; k += 4) {

var x = Math.random() * BOUNDS - BOUNDS_HALF;
        var y = Math.random() * BOUNDS - BOUNDS_HALF;
        var z = Math.random() * BOUNDS - BOUNDS_HALF;

theArray[k + 0] = x;
        theArray[k + 1] = y;
        theArray[k + 2] = z;
        theArray[k + 3] = 1;

}

function fillVelocityTexture(texture) {

var theArray = texture.image.data;

for (var k = 0, kl = theArray.length; k < kl; k += 1) {

var x = Math.random() - 0.5;
        var y = Math.random() - 0.5;
        var z = Math.random() - 0.5;

theArray[k + 0] = x * 10;
        theArray[k + 1] = y * 10;
        theArray[k + 2] = z * 10;
        theArray[k + 3] = 1;
    }
}

function onWindowResize() {

windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function onDocumentMouseMove(event) {
    mouseX = event.clientX - windowHalfX;
    mouseY = event.clientY - windowHalfY;
}

function onDocumentTouchStart(event) {

if (event.touches.length === 1) {
        event.preventDefault();
        mouseX = event.touches[0].pageX - windowHalfX;
        mouseY = event.touches[0].pageY - windowHalfY;
    }
}

function onDocumentTouchMove(event) {
    if (event.touches.length === 1) {

event.preventDefault();
        mouseX = event.touches[0].pageX - windowHalfX;
        mouseY = event.touches[0].pageY - windowHalfY;
    }
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {

var now = performance.now();
    var delta = (now - last) / 3000;

if (delta > 1) delta = 1; // safety cap on large deltas
    last = now;

positionUniforms.time.value = now;
    positionUniforms.delta.value = delta;
    velocityUniforms.time.value = now;
    velocityUniforms.delta.value = delta;
    lineUniforms.time.value = now;
    lineUniforms.delta.value = delta;

velocityUniforms.predator.value.set(0.1 * mouseX / windowHalfX, -0.1 * mouseY / windowHalfY, 0);
    mouseX = 10000;
    mouseY = 10000;

gpuCompute.compute();

lineUniforms.texturePosition.value = gpuCompute.getCurrentRenderTarget(positionVariable).texture;
    lineUniforms.textureVelocity.value = gpuCompute.getCurrentRenderTarget(velocityVariable).texture;
    renderer.render(scene, camera);

}

编译

CSS

HTML

uniform float time;
    uniform float delta;

void main() {

vec2 uv = gl_FragCoord.xy / resolution.xy;
        vec4 tmpPos = texture2D( texturePosition, uv );
        vec3 position = tmpPos.xyz;
        vec3 velocity = texture2D( textureVelocity, uv ).xyz;

float phase = tmpPos.w;

phase = mod( ( phase + delta +
            length( velocity.xz ) * delta * 3. +
            max( velocity.y, 0.0 ) * delta * 6. ), 62.83 );

gl_FragColor = vec4( position + velocity * delta * 15. , phase );

}
</script>

<script id="fragmentShaderVelocity" type="x-shader/x-fragment">

uniform float time;
    uniform float testing;
    uniform float delta; // about 0.016
    uniform float seperationDistance; // 20
    uniform float alignmentDistance; // 40
    uniform float cohesionDistance; //
    uniform float freedomFactor;
    uniform vec3 predator;

const float width = resolution.x;
    const float height = resolution.y;

const float PI = 3.141592653589793;
    const float PI_2 = PI * 2.0;
    // const float VISION = PI * 0.45;
    float zoneRadius = 40.0;
    float zoneRadiusSquared = 1600.0;

float separationThresh = 0.45;
    float alignmentThresh = 0.65;

const float UPPER_BOUNDS = BOUNDS;
    const float LOWER_BOUNDS = -UPPER_BOUNDS;

const float SPEED_LIMIT = 7.0;

float rand(vec2 co){
        return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
    }

void main() {

zoneRadius = seperationDistance + alignmentDistance + cohesionDistance;
        separationThresh = seperationDistance / zoneRadius;
        alignmentThresh = ( seperationDistance + alignmentDistance ) / zoneRadius;
        zoneRadiusSquared = zoneRadius * zoneRadius;

vec2 uv = gl_FragCoord.xy / resolution.xy;
        vec3 linePosition, lineVelocity;

vec3 selfPosition = texture2D( texturePosition, uv ).xyz;
        vec3 selfVelocity = texture2D( textureVelocity, uv ).xyz;

float dist;
        vec3 dir; // direction
        float distSquared;

float seperationSquared = seperationDistance * seperationDistance;
        float cohesionSquared = cohesionDistance * cohesionDistance;

float f;
        float percent;

vec3 velocity = selfVelocity;

float limit = SPEED_LIMIT;

dir = predator * UPPER_BOUNDS - selfPosition;
        dir.z = 0.;
        // dir.z *= 0.6;
        dist = length( dir );
        distSquared = dist * dist;

float preyRadius = 320.0;
        float preyRadiusSq = preyRadius * preyRadius;
        // move lines away from predator
        if (dist < preyRadius) {

f = ( distSquared / preyRadiusSq - 1.0 ) * delta * 100.;
            velocity += normalize( dir ) * f;
            limit += 5.0;
        }
        // if (testing == 0.0) {}
        // if ( rand( uv + time ) < freedomFactor ) {}
        // Attract flocks to the center
        vec3 central = vec3( 11., 10., 10. );
        dir = selfPosition - central;
        dist = length( dir );

dir.y *= 1.5;
        velocity -= normalize( dir ) * delta * 5.;

for (float y=0.0;y<height;y++) {
            for (float x=0.0;x<width;x++) {

vec2 ref = vec2( x + 0.5, y + 0.5 ) / resolution.xy;
                linePosition = texture2D( texturePosition, ref ).xyz;

dir = linePosition - selfPosition;
                dist = length(dir);

if (dist < 0.0001) continue;

distSquared = dist * dist;

if (distSquared > zoneRadiusSquared ) continue;

percent = distSquared / zoneRadiusSquared;

if ( percent < separationThresh ) { // low

// Separation - Move apart for comfort
                    f = (separationThresh / percent - 1.0) * delta;
                    velocity -= normalize(dir) * f;

} else if ( percent < alignmentThresh ) { // high

// Alignment - fly the same direction
                    float threshDelta = alignmentThresh - separationThresh;
                    float adjustedPercent = ( percent - separationThresh ) / threshDelta;

lineVelocity = texture2D( textureVelocity, ref ).xyz;

f = ( 0.5 - cos( adjustedPercent * PI_2 ) * 0.5 + 0.5 ) * delta;
                    velocity += normalize(lineVelocity) * f;

} else {

// Attraction / Cohesion - move closer
                    float threshDelta = 1.0 - alignmentThresh;
                    float adjustedPercent = ( percent - alignmentThresh ) / threshDelta;

f = ( 0.5 - ( cos( adjustedPercent * PI_2 ) * -0.5 + 0.5 ) ) * delta;

velocity += normalize(dir) * f;

}

// this make tends to fly around than down or up
        // if (velocity.y > 0.) velocity.y *= (1. - 0.2 * delta);
        // Speed Limits
        if ( length( velocity ) > limit ) {
            velocity = normalize( velocity ) * limit;
        }

gl_FragColor = vec4( velocity, 1.0 );

}
</script>
<script type="x-shader/x-vertex" id="lineVS">

attribute vec2 reference;
    attribute float lineVertex;

attribute vec3 lineColor;

uniform sampler2D texturePosition;
    uniform sampler2D textureVelocity;

varying vec4 vColor;
    varying float z;

uniform float time;

void main() {

vec4 tmpPos = texture2D( texturePosition, reference );
        vec3 pos = tmpPos.xyz;
        vec3 velocity = normalize(texture2D( textureVelocity, reference ).xyz);

vec3 newPosition = position;

if ( lineVertex == 4.0 || lineVertex == 7.0 ) {

newPosition.y = sin( tmpPos.w ) * 1.;
        }

newPosition = mat3( modelMatrix ) * newPosition;

velocity.z *= -1.;
        float xz = length( velocity.xz );
        float xyz = 1.;
        float x = sqrt( 1. - velocity.y * velocity.y );

float cosry = velocity.x / xz;
        float sinry = velocity.z / xz;

float cosrz = x / xyz;
        float sinrz = velocity.y / xyz;

mat3 maty =  mat3(
            cosry, 0, -sinry,
            .1    , 1,      0,
            sinry, .1, cosry

);

mat3 matz =  mat3(
            cosrz , sinrz, 0,
            -sinrz, cosrz, 0,
            0     , 0    , 1
        );

newPosition =  maty * matz * newPosition;
        newPosition += pos;

z = newPosition.z;

vColor = vec4( lineColor, 1.0 );
        gl_Position = projectionMatrix *  viewMatrix  * vec4( newPosition, 1.0 );
    }
</script>

<script type="x-shader/x-fragment" id="lineFS">

varying vec4 vColor;
    varying float z;
    uniform vec3 color;
    void main() {
        // Fake colors for now
        float z2 = 0.2 + ( 1000. - z ) / 1000. * vColor.x;
        gl_FragColor = vec4( z2, z2, z2, 1. );
    }
</script>

带鼠标交互，鼠标所处位置呈现排斥效果。

webgl, three, shader, lines

编辑器支持Emmet

快捷键

带鼠标交互，鼠标所处位置呈现排斥效果。

webgl, three, shader, lines

WebGL Three.js实现的三维空间镜面反射特效

原生WebGL Shader实现的体积光（上帝之光）特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：