Three.js WebGL 3D鸟群动画

使用精灵图和WebGL混合实现

webgl, bird, shader

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* TEXTURE WIDTH FOR SIMULATION */
var WIDTH = 32;

var BIRDS = WIDTH * WIDTH;

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 = 800,
    BOUNDS_HALF = BOUNDS / 2;

var last = performance.now();

var gpuCompute;
var velocityVariable;
var positionVariable;
var positionUniforms;
var velocityUniforms;
var birdUniforms;
var birdTextures = [];

init();

function init() {

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

loader = new THREE.TextureLoader();
    birdTextures[0] = loader.load('/uploads/161201/crow-00.png');
    birdTextures[1] = loader.load('/uploads/161201/crow-01.png');
    birdTextures[2] = loader.load('/uploads/161201/crow-02.png');
    birdTextures[3] = loader.load('/uploads/161201/crow-03.png');
    birdTextures[4] = loader.load('/uploads/161201/crow-04.png');
    birdTextures[5] = loader.load('/uploads/161201/crow-05.png');
    birdTextures[6] = loader.load('/uploads/161201/crow-06.png');
    birdTextures[7] = loader.load('/uploads/161201/crow-07.png');
    birdTextures[8] = loader.load('/uploads/161201/crow-08.png');

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);

var effectController = {
        seperation: 20.0,
        alignment: 20.0,
        cohesion: 20.0,
        freedom: 0.75
    };

var valuesChanger = function() {

velocityUniforms.seperationDistance.value = effectController.seperation;
        velocityUniforms.alignmentDistance.value = effectController.alignment;
        velocityUniforms.cohesionDistance.value = effectController.cohesion;
        velocityUniforms.freedomFactor.value = effectController.freedom;

};

valuesChanger();

initBirds();

animate();
}

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 initBirds() {

var geometry = new THREE.BufferGeometry();
    var positions = new Float32Array(BIRDS * 3);
    var references = new THREE.BufferAttribute(new Float32Array(BIRDS * 2), 2);
    var frameIds = new THREE.BufferAttribute(new Float32Array(BIRDS), 1);

geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
    geometry.addAttribute('reference', references);
    geometry.addAttribute('frameId', frameIds);

for (var i = 0; i < BIRDS; i++) {
        var x = (i % WIDTH) / WIDTH;
        var y = ~~(i / WIDTH) / WIDTH;
        references.array[i * 2] = x;
        references.array[i * 2 + 1] = y;
        frameIds.array[i] = Math.random() * 9.0;
    }

// For Vertex and Fragment
    birdUniforms = {
        texturesBird: {
            value: birdTextures
        },
        color: {
            value: new THREE.Color(0xff2200)
        },
        texturePosition: {
            value: null
        },
        textureVelocity: {
            value: null
        },
        time: {
            value: 1.0
        },
        delta: {
            value: 0.0
        }
    };

var shaderMaterial = new THREE.ShaderMaterial({

uniforms: birdUniforms,
        vertexShader: document.getElementById('birdVS').textContent,
        fragmentShader: document.getElementById('birdFS').textContent,
        depthTest: false,
        transparent: true
    });

var particles = new THREE.Points(geometry, shaderMaterial);
    scene.add(particles);
}

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 += 4) {

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) / 1000;

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;
    birdUniforms.time.value = now;
    birdUniforms.delta.value = delta;

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

mouseX = 10000;
    mouseY = 10000;

gpuCompute.compute();

birdUniforms.texturePosition.value = gpuCompute.getCurrentRenderTarget(positionVariable).texture;
    birdUniforms.textureVelocity.value = gpuCompute.getCurrentRenderTarget(velocityVariable).texture;

renderer.render(scene, camera);

}

编译

CSS

HTML

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

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.55;

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 = 9.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 birdPosition, birdVelocity;

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 = 150.0;
        float preyRadiusSq = preyRadius * preyRadius;

// move birds 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( 0., 0., 0. );
        dir = selfPosition - central;
        dist = length( dir );

dir.y *= 2.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;
                birdPosition = texture2D( texturePosition, ref ).xyz;

dir = birdPosition - 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;

birdVelocity = texture2D( textureVelocity, ref ).xyz;

f = ( 0.5 - cos( adjustedPercent * PI_2 ) * 0.5 + 0.5 ) * delta;
                    velocity += normalize(birdVelocity) * 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>

attribute vec2 reference;
    attribute float frameId;

uniform sampler2D texturePosition;
    uniform sampler2D textureVelocity;

varying vec2 vUV;
    varying mat2 vUVRot;
    varying float vFrameId;

uniform float time;

void main() {

vec3 pos = texture2D( texturePosition, reference ).xyz;
        vec3 vel = normalize( texture2D( textureVelocity, reference ).xyz );

vec4 mvPos = modelViewMatrix * vec4( pos, 1.0 );

gl_PointSize = 20.0 * ( 800.0 / -mvPos.z );

vUV = vec2( vel.x * 0.5 + 0.5, vel.y * 0.5 + 0.5 );
        vUV = floor( vUV * 11.0 ) / 11.0 + 0.5 / 11.0;
      // TODO: better movement later
        vUVRot = mat2( 1, 0, 0, 1 );

vFrameId = floor( mod( frameId + time * 0.5, 9.0 ) );
        gl_Position = projectionMatrix * mvPos;
    }

</script>

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

uniform sampler2D texturesBird[ 9 ];

varying vec2 vUV;
    varying mat2 vUVRot;
    varying float vFrameId;

uniform vec3 color;

void main() {
        vec2 uv = 0.9 * vec2( 1.0 / 11.0 ) * ( gl_PointCoord - 0.5 ) * vUVRot + vUV;
        int id = int( vFrameId );
        vec4 col;
        if ( id == 0 ) { col = texture2D( texturesBird[ 0 ], uv ); }
        else if ( id == 1 ) { col = texture2D( texturesBird[ 1 ], uv ); }
        else if ( id == 2 ) { col = texture2D( texturesBird[ 2 ], uv ); }
        else if ( id == 3 ) { col = texture2D( texturesBird[ 3 ], uv ); }
        else if ( id == 4 ) { col = texture2D( texturesBird[ 4 ], uv ); }
        else if ( id == 5 ) { col = texture2D( texturesBird[ 5 ], uv ); }
        else if ( id == 6 ) { col = texture2D( texturesBird[ 6 ], uv ); }
        else if ( id == 7 ) { col = texture2D( texturesBird[ 7 ], uv ); }
        else if ( id == 8 ) { col = texture2D( texturesBird[ 8 ], uv ); }

gl_FragColor = col;
    }

</script>

使用精灵图和WebGL混合实现

webgl, bird, shader

编辑器支持Emmet

快捷键

使用精灵图和WebGL混合实现

webgl, bird, shader

WebGL Three.js构造的3D空间涟漪波传播动画

WebGL Three.js 3D十字架的毛发化动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：