Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 057e36e0 编写于 作者: S santi
浏览文件
操作

convert tabs

上级 4911fcf3
隐藏空白更改
内联 并排
Showing with 443 addition and 443 deletion
examples/webgl_gpgpu_birds_gltf.html
浏览文件 @ 057e36e0
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>three.js webgl - gpgpu - flocking</title> <title>three.js webgl - gpgpu - flocking</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css"> <link type="text/css" rel="stylesheet" href="main.css">
<style> <style>
body { body {
background-color: #fff; background-color: #fff;
color: #444; color: #444;
} }
a { a {
color:#08f; color:#08f;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="info"> <div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl gpgpu birds + GLTF mesh<br/> <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl gpgpu birds + GLTF mesh<br/>
Flamingo by <a href="http://mirada.com/">mirada</a> from <a href="http://ro.me">rome</a><br/> Flamingo by <a href="http://mirada.com/">mirada</a> from <a href="http://ro.me">rome</a><br/>
Move mouse to disturb birds. Move mouse to disturb birds.
</div> </div>
<!-- shader for bird's position --> <!-- shader for bird's position -->
<script id="fragmentShaderPosition" type="x-shader/x-fragment"> <script id="fragmentShaderPosition" type="x-shader/x-fragment">
uniform float time; uniform float time;
uniform float delta; uniform float delta;
void main() { void main() {
vec2 uv = gl_FragCoord.xy / resolution.xy; vec2 uv = gl_FragCoord.xy / resolution.xy;
vec4 tmpPos = texture2D( texturePosition, uv ); vec4 tmpPos = texture2D( texturePosition, uv );
vec3 position = tmpPos.xyz; vec3 position = tmpPos.xyz;
vec3 velocity = texture2D( textureVelocity, uv ).xyz; vec3 velocity = texture2D( textureVelocity, uv ).xyz;
float phase = tmpPos.w; float phase = tmpPos.w;
phase = mod( ( phase + delta + phase = mod( ( phase + delta +
length( velocity.xz ) * delta * 3. + length( velocity.xz ) * delta * 3. +
max( velocity.y, 0.0 ) * delta * 6. ), 62.83 ); max( velocity.y, 0.0 ) * delta * 6. ), 62.83 );
gl_FragColor = vec4( position + velocity * delta * 15. , phase ); gl_FragColor = vec4( position + velocity * delta * 15. , phase );
} }
</script> </script>
<!-- shader for bird's velocity --> <!-- shader for bird's velocity -->
<script id="fragmentShaderVelocity" type="x-shader/x-fragment"> <script id="fragmentShaderVelocity" type="x-shader/x-fragment">
uniform float time; uniform float time;
uniform float testing; uniform float testing;
uniform float delta; // about 0.016 uniform float delta; // about 0.016
uniform float separationDistance; // 20 uniform float separationDistance; // 20
uniform float alignmentDistance; // 40 uniform float alignmentDistance; // 40
uniform float cohesionDistance; // uniform float cohesionDistance; //
uniform float freedomFactor; uniform float freedomFactor;
uniform vec3 predator; uniform vec3 predator;
const float width = resolution.x; const float width = resolution.x;
const float height = resolution.y; const float height = resolution.y;
const float PI = 3.141592653589793; const float PI = 3.141592653589793;
const float PI_2 = PI * 2.0; const float PI_2 = PI * 2.0;
// const float VISION = PI * 0.55; // const float VISION = PI * 0.55;
float zoneRadius = 40.0; float zoneRadius = 40.0;
float zoneRadiusSquared = 1600.0; float zoneRadiusSquared = 1600.0;
float separationThresh = 0.45; float separationThresh = 0.45;
float alignmentThresh = 0.65; float alignmentThresh = 0.65;
const float UPPER_BOUNDS = BOUNDS; const float UPPER_BOUNDS = BOUNDS;
const float LOWER_BOUNDS = -UPPER_BOUNDS; const float LOWER_BOUNDS = -UPPER_BOUNDS;
const float SPEED_LIMIT = 9.0; const float SPEED_LIMIT = 9.0;
float rand( vec2 co ){ float rand( vec2 co ){
return fract( sin( dot( co.xy, vec2(12.9898,78.233) ) ) * 43758.5453 ); return fract( sin( dot( co.xy, vec2(12.9898,78.233) ) ) * 43758.5453 );
} }
void main() { void main() {
zoneRadius = separationDistance + alignmentDistance + cohesionDistance; zoneRadius = separationDistance + alignmentDistance + cohesionDistance;
separationThresh = separationDistance / zoneRadius; separationThresh = separationDistance / zoneRadius;
alignmentThresh = ( separationDistance + alignmentDistance ) / zoneRadius; alignmentThresh = ( separationDistance + alignmentDistance ) / zoneRadius;
zoneRadiusSquared = zoneRadius * zoneRadius; zoneRadiusSquared = zoneRadius * zoneRadius;
vec2 uv = gl_FragCoord.xy / resolution.xy; vec2 uv = gl_FragCoord.xy / resolution.xy;
vec3 birdPosition, birdVelocity; vec3 birdPosition, birdVelocity;
vec3 selfPosition = texture2D( texturePosition, uv ).xyz; vec3 selfPosition = texture2D( texturePosition, uv ).xyz;
vec3 selfVelocity = texture2D( textureVelocity, uv ).xyz; vec3 selfVelocity = texture2D( textureVelocity, uv ).xyz;
float dist; float dist;
vec3 dir; // direction vec3 dir; // direction
float distSquared; float distSquared;
float separationSquared = separationDistance * separationDistance; float separationSquared = separationDistance * separationDistance;
float cohesionSquared = cohesionDistance * cohesionDistance; float cohesionSquared = cohesionDistance * cohesionDistance;
float f; float f;
float percent; float percent;
vec3 velocity = selfVelocity; vec3 velocity = selfVelocity;
float limit = SPEED_LIMIT; float limit = SPEED_LIMIT;
dir = predator * UPPER_BOUNDS - selfPosition; dir = predator * UPPER_BOUNDS - selfPosition;
dir.z = 0.; dir.z = 0.;
// dir.z *= 0.6; // dir.z *= 0.6;
dist = length( dir ); dist = length( dir );
distSquared = dist * dist; distSquared = dist * dist;
float preyRadius = 150.0; float preyRadius = 150.0;
float preyRadiusSq = preyRadius * preyRadius; float preyRadiusSq = preyRadius * preyRadius;
// move birds away from predator // move birds away from predator
if ( dist < preyRadius ) { if ( dist < preyRadius ) {
f = ( distSquared / preyRadiusSq - 1.0 ) * delta * 100.; f = ( distSquared / preyRadiusSq - 1.0 ) * delta * 100.;
velocity += normalize( dir ) * f; velocity += normalize( dir ) * f;
limit += 5.0; limit += 5.0;
} }
// if (testing == 0.0) {} // if (testing == 0.0) {}
// if ( rand( uv + time ) < freedomFactor ) {} // if ( rand( uv + time ) < freedomFactor ) {}
// Attract flocks to the center // Attract flocks to the center
vec3 central = vec3( 0., 0., 0. ); vec3 central = vec3( 0., 0., 0. );
dir = selfPosition - central; dir = selfPosition - central;
dist = length( dir ); dist = length( dir );
dir.y *= 2.5; dir.y *= 2.5;
velocity -= normalize( dir ) * delta * 5.; velocity -= normalize( dir ) * delta * 5.;
for ( float y = 0.0; y < height; y++ ) { for ( float y = 0.0; y < height; y++ ) {
for ( float x = 0.0; x < width; x++ ) { for ( float x = 0.0; x < width; x++ ) {
vec2 ref = vec2( x + 0.5, y + 0.5 ) / resolution.xy; vec2 ref = vec2( x + 0.5, y + 0.5 ) / resolution.xy;
birdPosition = texture2D( texturePosition, ref ).xyz; birdPosition = texture2D( texturePosition, ref ).xyz;
dir = birdPosition - selfPosition; dir = birdPosition - selfPosition;
dist = length( dir ); dist = length( dir );
if ( dist < 0.0001 ) continue; if ( dist < 0.0001 ) continue;
distSquared = dist * dist; distSquared = dist * dist;
if ( distSquared > zoneRadiusSquared ) continue; if ( distSquared > zoneRadiusSquared ) continue;
percent = distSquared / zoneRadiusSquared; percent = distSquared / zoneRadiusSquared;
if ( percent < separationThresh ) { // low if ( percent < separationThresh ) { // low
// Separation - Move apart for comfort // Separation - Move apart for comfort
f = ( separationThresh / percent - 1.0 ) * delta; f = ( separationThresh / percent - 1.0 ) * delta;
velocity -= normalize( dir ) * f; velocity -= normalize( dir ) * f;
} else if ( percent < alignmentThresh ) { // high } else if ( percent < alignmentThresh ) { // high
// Alignment - fly the same direction // Alignment - fly the same direction
float threshDelta = alignmentThresh - separationThresh; float threshDelta = alignmentThresh - separationThresh;
float adjustedPercent = ( percent - separationThresh ) / threshDelta; float adjustedPercent = ( percent - separationThresh ) / threshDelta;
birdVelocity = texture2D( textureVelocity, ref ).xyz; birdVelocity = texture2D( textureVelocity, ref ).xyz;
f = ( 0.5 - cos( adjustedPercent * PI_2 ) * 0.5 + 0.5 ) * delta; f = ( 0.5 - cos( adjustedPercent * PI_2 ) * 0.5 + 0.5 ) * delta;
velocity += normalize( birdVelocity ) * f; velocity += normalize( birdVelocity ) * f;
} else { } else {
// Attraction / Cohesion - move closer // Attraction / Cohesion - move closer
float threshDelta = 1.0 - alignmentThresh; float threshDelta = 1.0 - alignmentThresh;
float adjustedPercent = ( percent - alignmentThresh ) / threshDelta; float adjustedPercent = ( percent - alignmentThresh ) / threshDelta;
f = ( 0.5 - ( cos( adjustedPercent * PI_2 ) * -0.5 + 0.5 ) ) * delta; f = ( 0.5 - ( cos( adjustedPercent * PI_2 ) * -0.5 + 0.5 ) ) * delta;
velocity += normalize( dir ) * f; velocity += normalize( dir ) * f;
} }
} }
} }
// this make tends to fly around than down or up // this make tends to fly around than down or up
// if (velocity.y > 0.) velocity.y *= (1. - 0.2 * delta); // if (velocity.y > 0.) velocity.y *= (1. - 0.2 * delta);
// Speed Limits // Speed Limits
if ( length( velocity ) > limit ) { if ( length( velocity ) > limit ) {
velocity = normalize( velocity ) * limit; velocity = normalize( velocity ) * limit;
} }
gl_FragColor = vec4( velocity, 1.0 ); gl_FragColor = vec4( velocity, 1.0 );
} }
</script> </script>
<script type="module"> <script type="module">
import * as THREE from '../build/three.module.js'; import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js'; import Stats from './jsm/libs/stats.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js'; import { GUI } from './jsm/libs/dat.gui.module.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js'; import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js'; import { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js';
/* TEXTURE WIDTH FOR SIMULATION */ /* TEXTURE WIDTH FOR SIMULATION */
var WIDTH = 64 var WIDTH = 64
var BIRDS = WIDTH * WIDTH; var BIRDS = WIDTH * WIDTH;
/* BAKE ANIMATION INTO TEXTURE and CREATE GEOMETRY FROM BASE MODEL */ /* BAKE ANIMATION INTO TEXTURE and CREATE GEOMETRY FROM BASE MODEL */
var BirdGeometry = new THREE.BufferGeometry(); var BirdGeometry = new THREE.BufferGeometry();
var textureAnimation, durationAnimation, originalMaterial,birdMesh, materialShader, vertexPerBird; var textureAnimation, durationAnimation, originalMaterial,birdMesh, materialShader, vertexPerBird;
function nextPowerOf2( n ) { return Math.pow( 2, Math.ceil( Math.log( n ) / Math.log( 2 ) ) ) }; function nextPowerOf2( n ) { return Math.pow( 2, Math.ceil( Math.log( n ) / Math.log( 2 ) ) ) };
Math.lerp = function (value1, value2, amount) { Math.lerp = function (value1, value2, amount) {
amount = Math.max( Math.min( amount, 1 ), 0 ); amount = Math.max( Math.min( amount, 1 ), 0 );
return value1 + (value2 - value1) * amount; return value1 + (value2 - value1) * amount;
}; };
var gltfs = [ 'models/gltf/Parrot.glb', 'models/gltf/Flamingo.glb' ] var gltfs = [ 'models/gltf/Parrot.glb', 'models/gltf/Flamingo.glb' ]
var colors = [ 0xccFFFF, 0xffdeff ] var colors = [ 0xccFFFF, 0xffdeff ]
var sizes = [ 0.2, 0.1 ] var sizes = [ 0.2, 0.1 ]
var selectModel = Math.floor( Math.random() * gltfs.length ) var selectModel = Math.floor( Math.random() * gltfs.length )
new GLTFLoader().load( gltfs[ selectModel ], function ( gltf ) { new GLTFLoader().load( gltfs[ selectModel ], function ( gltf ) {
var animations = gltf.animations; var animations = gltf.animations;
durationAnimation = Math.round( animations[ 0 ].duration * 60 ); durationAnimation = Math.round( animations[ 0 ].duration * 60 );
var birdGeo = gltf.scene.children[ 0 ].geometry; var birdGeo = gltf.scene.children[ 0 ].geometry;
originalMaterial = gltf.scene.children[ 0 ].material; originalMaterial = gltf.scene.children[ 0 ].material;
var morphAttributes = birdGeo.morphAttributes.position; var morphAttributes = birdGeo.morphAttributes.position;
var tHeight = nextPowerOf2( durationAnimation ); var tHeight = nextPowerOf2( durationAnimation );
var tWidth = nextPowerOf2( birdGeo.getAttribute( 'position' ).count ); var tWidth = nextPowerOf2( birdGeo.getAttribute( 'position' ).count );
vertexPerBird = birdGeo.getAttribute( 'position' ).count; vertexPerBird = birdGeo.getAttribute( 'position' ).count;
var tData = new Float32Array( 3 * tWidth * tHeight ); var tData = new Float32Array( 3 * tWidth * tHeight );
for( var i = 0 ; i < tWidth ; i++ ){ for( var i = 0 ; i < tWidth ; i++ ){
for( var j = 0 ; j < tHeight ; j++ ){ for( var j = 0 ; j < tHeight ; j++ ){
var offset = j * tWidth * 3; var offset = j * tWidth * 3;
var curFrame = j; var curFrame = j;
var curMorph = Math.floor( j / durationAnimation * morphAttributes.length ); var curMorph = Math.floor( j / durationAnimation * morphAttributes.length );
var nextMorph = ( Math.floor( j / durationAnimation * morphAttributes.length ) + 1 ) % morphAttributes.length; var nextMorph = ( Math.floor( j / durationAnimation * morphAttributes.length ) + 1 ) % morphAttributes.length;
var lerpAmount = j / durationAnimation * morphAttributes.length % 1; var lerpAmount = j / durationAnimation * morphAttributes.length % 1;
if( j < durationAnimation ){ if( j < durationAnimation ){
tData[ offset + i * 3 ] = Math.lerp( morphAttributes[ curMorph ].array[ i * 3 ], morphAttributes[ nextMorph ].array[ i * 3 ], lerpAmount ); tData[ offset + i * 3 ] = Math.lerp( morphAttributes[ curMorph ].array[ i * 3 ], morphAttributes[ nextMorph ].array[ i * 3 ], lerpAmount );
tData[ offset + i * 3 + 1 ] = Math.lerp( morphAttributes[ curMorph ].array[ i * 3 + 1 ], morphAttributes[ nextMorph ].array[ i * 3 + 1 ], lerpAmount ); tData[ offset + i * 3 + 1 ] = Math.lerp( morphAttributes[ curMorph ].array[ i * 3 + 1 ], morphAttributes[ nextMorph ].array[ i * 3 + 1 ], lerpAmount );
tData[ offset + i * 3 + 2 ] = Math.lerp( morphAttributes[ curMorph ].array[ i * 3 + 2 ], morphAttributes[ nextMorph ].array[ i * 3 + 2 ], lerpAmount ); tData[ offset + i * 3 + 2 ] = Math.lerp( morphAttributes[ curMorph ].array[ i * 3 + 2 ], morphAttributes[ nextMorph ].array[ i * 3 + 2 ], lerpAmount );
} }
} }
} }
textureAnimation = new THREE.DataTexture( tData, tWidth, tHeight, THREE.RGBFormat, THREE.FloatType ); textureAnimation = new THREE.DataTexture( tData, tWidth, tHeight, THREE.RGBFormat, THREE.FloatType );
textureAnimation.needsUpdate = true; textureAnimation.needsUpdate = true;
var vertices = [], color = [], reference = [], seeds = [], indices = []; var vertices = [], color = [], reference = [], seeds = [], indices = [];
var totalVertices = birdGeo.getAttribute( 'position' ).count * 3 * BIRDS; var totalVertices = birdGeo.getAttribute( 'position' ).count * 3 * BIRDS;
for( var i = 0 ; i < totalVertices ; i++ ){ for( var i = 0 ; i < totalVertices ; i++ ){
var bIndex = i % ( birdGeo.getAttribute( 'position' ).count * 3 ); var bIndex = i % ( birdGeo.getAttribute( 'position' ).count * 3 );
vertices.push( birdGeo.getAttribute( 'position' ).array[ bIndex ] ); vertices.push( birdGeo.getAttribute( 'position' ).array[ bIndex ] );
color.push( birdGeo.getAttribute( 'color' ).array[ bIndex ] ); color.push( birdGeo.getAttribute( 'color' ).array[ bIndex ] );
} }
var r = Math.random(); var r = Math.random();
for( var i = 0 ; i < birdGeo.getAttribute( 'position' ).count * BIRDS ; i++ ){ for( var i = 0 ; i < birdGeo.getAttribute( 'position' ).count * BIRDS ; i++ ){
var bIndex = i % ( birdGeo.getAttribute( 'position' ).count ); var bIndex = i % ( birdGeo.getAttribute( 'position' ).count );
var bird = Math.floor( i / birdGeo.getAttribute( 'position' ).count ); var bird = Math.floor( i / birdGeo.getAttribute( 'position' ).count );
if( bIndex == 0 ) r = Math.random(); if( bIndex == 0 ) r = Math.random();
var j = ~ ~ bird; var j = ~ ~ bird;
var x = ( j % WIDTH ) / WIDTH; var x = ( j % WIDTH ) / WIDTH;
var y = ~ ~ ( j / WIDTH ) / WIDTH; var y = ~ ~ ( j / WIDTH ) / WIDTH;
reference.push( x, y, bIndex / tWidth, durationAnimation / tHeight ); reference.push( x, y, bIndex / tWidth, durationAnimation / tHeight );
seeds.push( bird, r, Math.random(), Math.random() ); seeds.push( bird, r, Math.random(), Math.random() );
} }
for( var i = 0 ; i < birdGeo.index.array.length * BIRDS ; i++ ){ for( var i = 0 ; i < birdGeo.index.array.length * BIRDS ; i++ ){
var offset = Math.floor( i / birdGeo.index.array.length ) * ( birdGeo.getAttribute( 'position' ).count ); var offset = Math.floor( i / birdGeo.index.array.length ) * ( birdGeo.getAttribute( 'position' ).count );
indices.push( birdGeo.index.array[ i % birdGeo.index.array.length ] + offset ); indices.push( birdGeo.index.array[ i % birdGeo.index.array.length ] + offset );
} }
BirdGeometry.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array( vertices ), 3 ) ); BirdGeometry.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array( vertices ), 3 ) );
BirdGeometry.setAttribute( 'birdColor', new THREE.BufferAttribute( new Float32Array( color ), 3 ) ); BirdGeometry.setAttribute( 'birdColor', new THREE.BufferAttribute( new Float32Array( color ), 3 ) );
BirdGeometry.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( color ), 3 ) ); BirdGeometry.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( color ), 3 ) );
BirdGeometry.setAttribute( 'reference', new THREE.BufferAttribute( new Float32Array( reference ), 4 ) ); BirdGeometry.setAttribute( 'reference', new THREE.BufferAttribute( new Float32Array( reference ), 4 ) );
BirdGeometry.setAttribute( 'seeds', new THREE.BufferAttribute( new Float32Array( seeds ), 4 ) ); BirdGeometry.setAttribute( 'seeds', new THREE.BufferAttribute( new Float32Array( seeds ), 4 ) );
BirdGeometry.setIndex( indices ); BirdGeometry.setIndex( indices );
init(); init();
animate(); animate();
} ); } );
var container, stats; var container, stats;
var camera, scene, renderer; var camera, scene, renderer;
var mouseX = 0, mouseY = 0; var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2; var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2; var windowHalfY = window.innerHeight / 2;
var BOUNDS = 800, BOUNDS_HALF = BOUNDS / 2; var BOUNDS = 800, BOUNDS_HALF = BOUNDS / 2;
var last = performance.now(); var last = performance.now();
var gpuCompute; var gpuCompute;
var velocityVariable; var velocityVariable;
var positionVariable; var positionVariable;
var positionUniforms; var positionUniforms;
var velocityUniforms; var velocityUniforms;
var birdUniforms; var birdUniforms;
function init() { function init() {
container = document.createElement( 'div' ); container = document.createElement( 'div' );
document.body.appendChild( container ); document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 ); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 350; camera.position.z = 350;
scene = new THREE.Scene(); scene = new THREE.Scene();
scene.background = new THREE.Color( colors[ selectModel ] ); scene.background = new THREE.Color( colors[ selectModel ] );
scene.fog = new THREE.Fog( colors[ selectModel ], 100, 1000 ); scene.fog = new THREE.Fog( colors[ selectModel ], 100, 1000 );
// LIGHTS // LIGHTS
var hemiLight = new THREE.HemisphereLight( colors[ selectModel ], 0xffffff, 1.6 ); var hemiLight = new THREE.HemisphereLight( colors[ selectModel ], 0xffffff, 1.6 );
hemiLight.color.setHSL( 0.6, 1, 0.6 ); hemiLight.color.setHSL( 0.6, 1, 0.6 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 ); hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
hemiLight.position.set( 0, 50, 0 ); hemiLight.position.set( 0, 50, 0 );
scene.add( hemiLight ); scene.add( hemiLight );
var dirLight = new THREE.DirectionalLight( 0x00CED1, 0.6 ); var dirLight = new THREE.DirectionalLight( 0x00CED1, 0.6 );
dirLight.color.setHSL( 0.1, 1, 0.95 ); dirLight.color.setHSL( 0.1, 1, 0.95 );
dirLight.position.set( - 1, 1.75, 1 ); dirLight.position.set( - 1, 1.75, 1 );
dirLight.position.multiplyScalar( 30 ); dirLight.position.multiplyScalar( 30 );
scene.add( dirLight ); scene.add( dirLight );
renderer = new THREE.WebGLRenderer( { antialias : true, alpha : true } ); renderer = new THREE.WebGLRenderer( { antialias : true, alpha : true } );
renderer.setPixelRatio( window.devicePixelRatio ); renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement ); container.appendChild( renderer.domElement );
initComputeRenderer(); initComputeRenderer();
stats = new Stats(); stats = new Stats();
container.appendChild( stats.dom ); container.appendChild( stats.dom );
document.addEventListener( 'mousemove', onDocumentMouseMove, false ); document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false ); document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false ); document.addEventListener( 'touchmove', onDocumentTouchMove, false );
window.addEventListener( 'resize', onWindowResize, false ); window.addEventListener( 'resize', onWindowResize, false );
var gui = new GUI(); var gui = new GUI();
var effectController = { var effectController = {
separation: 20.0, separation: 20.0,
alignment: 20.0, alignment: 20.0,
cohesion: 20.0, cohesion: 20.0,
freedom: 0.75, freedom: 0.75,
size: sizes[ selectModel ], size: sizes[ selectModel ],
count: BIRDS count: BIRDS
}; };
var valuesChanger = function () { var valuesChanger = function () {
velocityUniforms[ "separationDistance" ].value = effectController.separation; velocityUniforms[ "separationDistance" ].value = effectController.separation;
velocityUniforms[ "alignmentDistance" ].value = effectController.alignment; velocityUniforms[ "alignmentDistance" ].value = effectController.alignment;
velocityUniforms[ "cohesionDistance" ].value = effectController.cohesion; velocityUniforms[ "cohesionDistance" ].value = effectController.cohesion;
velocityUniforms[ "freedomFactor" ].value = effectController.freedom; velocityUniforms[ "freedomFactor" ].value = effectController.freedom;
if( materialShader ) materialShader.uniforms[ "size" ].value = effectController.size; if( materialShader ) materialShader.uniforms[ "size" ].value = effectController.size;
BirdGeometry.setDrawRange ( 0, vertexPerBird * effectController.count ) BirdGeometry.setDrawRange ( 0, vertexPerBird * effectController.count )
}; };
valuesChanger(); valuesChanger();
gui.add( effectController, "separation", 0.0, 100.0, 1.0 ).onChange( valuesChanger ); gui.add( effectController, "separation", 0.0, 100.0, 1.0 ).onChange( valuesChanger );
gui.add( effectController, "alignment", 0.0, 100, 0.001 ).onChange( valuesChanger ); gui.add( effectController, "alignment", 0.0, 100, 0.001 ).onChange( valuesChanger );
gui.add( effectController, "cohesion", 0.0, 100, 0.025 ).onChange( valuesChanger ); gui.add( effectController, "cohesion", 0.0, 100, 0.025 ).onChange( valuesChanger );
gui.add( effectController, "size", 0, 1, 0.01 ).onChange( valuesChanger ); gui.add( effectController, "size", 0, 1, 0.01 ).onChange( valuesChanger );
gui.add( effectController, "count", 0, BIRDS, 1 ).onChange( valuesChanger ); gui.add( effectController, "count", 0, BIRDS, 1 ).onChange( valuesChanger );
gui.close(); gui.close();
initBirds(); initBirds();
} }
function initComputeRenderer() { function initComputeRenderer() {
gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer ); gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
var dtPosition = gpuCompute.createTexture(); var dtPosition = gpuCompute.createTexture();
var dtVelocity = gpuCompute.createTexture(); var dtVelocity = gpuCompute.createTexture();
fillPositionTexture( dtPosition ); fillPositionTexture( dtPosition );
fillVelocityTexture( dtVelocity ); fillVelocityTexture( dtVelocity );
velocityVariable = gpuCompute.addVariable( "textureVelocity", document.getElementById( 'fragmentShaderVelocity' ).textContent, dtVelocity ); velocityVariable = gpuCompute.addVariable( "textureVelocity", document.getElementById( 'fragmentShaderVelocity' ).textContent, dtVelocity );
positionVariable = gpuCompute.addVariable( "texturePosition", document.getElementById( 'fragmentShaderPosition' ).textContent, dtPosition ); positionVariable = gpuCompute.addVariable( "texturePosition", document.getElementById( 'fragmentShaderPosition' ).textContent, dtPosition );
gpuCompute.setVariableDependencies( velocityVariable, [ positionVariable, velocityVariable ] ); gpuCompute.setVariableDependencies( velocityVariable, [ positionVariable, velocityVariable ] );
gpuCompute.setVariableDependencies( positionVariable, [ positionVariable, velocityVariable ] ); gpuCompute.setVariableDependencies( positionVariable, [ positionVariable, velocityVariable ] );
positionUniforms = positionVariable.material.uniforms; positionUniforms = positionVariable.material.uniforms;
velocityUniforms = velocityVariable.material.uniforms; velocityUniforms = velocityVariable.material.uniforms;
positionUniforms[ "time" ] = { value: 0.0 }; positionUniforms[ "time" ] = { value: 0.0 };
positionUniforms[ "delta" ] = { value: 0.0 }; positionUniforms[ "delta" ] = { value: 0.0 };
velocityUniforms[ "time" ] = { value: 1.0 }; velocityUniforms[ "time" ] = { value: 1.0 };
velocityUniforms[ "delta" ] = { value: 0.0 }; velocityUniforms[ "delta" ] = { value: 0.0 };
velocityUniforms[ "testing" ] = { value: 1.0 }; velocityUniforms[ "testing" ] = { value: 1.0 };
velocityUniforms[ "separationDistance" ] = { value: 1.0 }; velocityUniforms[ "separationDistance" ] = { value: 1.0 };
velocityUniforms[ "alignmentDistance" ] = { value: 1.0 }; velocityUniforms[ "alignmentDistance" ] = { value: 1.0 };
velocityUniforms[ "cohesionDistance" ] = { value: 1.0 }; velocityUniforms[ "cohesionDistance" ] = { value: 1.0 };
velocityUniforms[ "freedomFactor" ] = { value: 1.0 }; velocityUniforms[ "freedomFactor" ] = { value: 1.0 };
velocityUniforms[ "predator" ] = { value: new THREE.Vector3() }; velocityUniforms[ "predator" ] = { value: new THREE.Vector3() };
velocityVariable.material.defines.BOUNDS = BOUNDS.toFixed( 2 ); velocityVariable.material.defines.BOUNDS = BOUNDS.toFixed( 2 );
velocityVariable.wrapS = THREE.RepeatWrapping; velocityVariable.wrapS = THREE.RepeatWrapping;
velocityVariable.wrapT = THREE.RepeatWrapping; velocityVariable.wrapT = THREE.RepeatWrapping;
positionVariable.wrapS = THREE.RepeatWrapping; positionVariable.wrapS = THREE.RepeatWrapping;
positionVariable.wrapT = THREE.RepeatWrapping; positionVariable.wrapT = THREE.RepeatWrapping;
var error = gpuCompute.init(); var error = gpuCompute.init();
if ( error !== null ) { if ( error !== null ) {
console.error( error ); console.error( error );
} }
} }
function initBirds() { function initBirds() {
var geometry = BirdGeometry; var geometry = BirdGeometry;
var m = new THREE.MeshStandardMaterial({ var m = new THREE.MeshStandardMaterial({
vertexColors : true, vertexColors : true,
flatShading : true, flatShading : true,
roughness : 1, roughness : 1,
metalness : 0 metalness : 0
}) })
m.onBeforeCompile = ( shader ) => { m.onBeforeCompile = ( shader ) => {
shader.uniforms.texturePosition = { value : null }; shader.uniforms.texturePosition = { value : null };
shader.uniforms.textureVelocity = { value : null }; shader.uniforms.textureVelocity = { value : null };
shader.uniforms.textureAnimation = { value : textureAnimation }; shader.uniforms.textureAnimation = { value : textureAnimation };
shader.uniforms.time = { value : 1.0 }; shader.uniforms.time = { value : 1.0 };
shader.uniforms.size = { value : 0.1 }; shader.uniforms.size = { value : 0.1 };
shader.uniforms.delta = { value : 0.0 }; shader.uniforms.delta = { value : 0.0 };
var token = '#define STANDARD'; var token = '#define STANDARD';
...@@ -485,7 +485,7 @@ ...@@ -485,7 +485,7 @@
uniform float time; uniform float time;
`; `;
shader.vertexShader = shader.vertexShader.replace( token, token + insert ); shader.vertexShader = shader.vertexShader.replace( token, token + insert );
var token = '#include <begin_vertex>'; var token = '#include <begin_vertex>';
...@@ -519,146 +519,146 @@ ...@@ -519,146 +519,146 @@
vec3 transformed = vec3( newPosition ); vec3 transformed = vec3( newPosition );
`; `;
shader.vertexShader = shader.vertexShader.replace( token, insert ); shader.vertexShader = shader.vertexShader.replace( token, insert );
materialShader = shader; materialShader = shader;
} }
birdMesh = new THREE.Mesh( geometry, m ); birdMesh = new THREE.Mesh( geometry, m );
birdMesh.rotation.y = Math.PI / 2; birdMesh.rotation.y = Math.PI / 2;
birdMesh.castShadow = true; birdMesh.castShadow = true;
birdMesh.receiveShadow = true; birdMesh.receiveShadow = true;
scene.add( birdMesh ); scene.add( birdMesh );
} }
function fillPositionTexture( texture ) { function fillPositionTexture( texture ) {
var theArray = texture.image.data; var theArray = texture.image.data;
for ( var k = 0, kl = theArray.length; k < kl; k += 4 ) { for ( var k = 0, kl = theArray.length; k < kl; k += 4 ) {
var x = Math.random() * BOUNDS - BOUNDS_HALF; var x = Math.random() * BOUNDS - BOUNDS_HALF;
var y = Math.random() * BOUNDS - BOUNDS_HALF; var y = Math.random() * BOUNDS - BOUNDS_HALF;
var z = Math.random() * BOUNDS - BOUNDS_HALF; var z = Math.random() * BOUNDS - BOUNDS_HALF;
theArray[ k + 0 ] = x; theArray[ k + 0 ] = x;
theArray[ k + 1 ] = y; theArray[ k + 1 ] = y;
theArray[ k + 2 ] = z; theArray[ k + 2 ] = z;
theArray[ k + 3 ] = 1; theArray[ k + 3 ] = 1;
} }
} }
function fillVelocityTexture( texture ) { function fillVelocityTexture( texture ) {
var theArray = texture.image.data; var theArray = texture.image.data;
for ( var k = 0, kl = theArray.length; k < kl; k += 4 ) { for ( var k = 0, kl = theArray.length; k < kl; k += 4 ) {
var x = Math.random() - 0.5; var x = Math.random() - 0.5;
var y = Math.random() - 0.5; var y = Math.random() - 0.5;
var z = Math.random() - 0.5; var z = Math.random() - 0.5;
theArray[ k + 0 ] = x * 10; theArray[ k + 0 ] = x * 10;
theArray[ k + 1 ] = y * 10; theArray[ k + 1 ] = y * 10;
theArray[ k + 2 ] = z * 10; theArray[ k + 2 ] = z * 10;
theArray[ k + 3 ] = 1; theArray[ k + 3 ] = 1;
} }
} }
function onWindowResize() { function onWindowResize() {
windowHalfX = window.innerWidth / 2; windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2; windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight; camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix(); camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setSize( window.innerWidth, window.innerHeight );
} }
function onDocumentMouseMove( event ) { function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX; mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY; mouseY = event.clientY - windowHalfY;
} }
function onDocumentTouchStart( event ) { function onDocumentTouchStart( event ) {
if ( event.touches.length === 1 ) { if ( event.touches.length === 1 ) {
event.preventDefault(); event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY; mouseY = event.touches[ 0 ].pageY - windowHalfY;
} }
} }
function onDocumentTouchMove( event ) { function onDocumentTouchMove( event ) {
if ( event.touches.length === 1 ) { if ( event.touches.length === 1 ) {
event.preventDefault(); event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY; mouseY = event.touches[ 0 ].pageY - windowHalfY;
} }
} }
// //
function animate() { function animate() {
requestAnimationFrame( animate ); requestAnimationFrame( animate );
render(); render();
stats.update(); stats.update();
} }
function render() { function render() {
var now = performance.now(); var now = performance.now();
var delta = ( now - last ) / 1000; var delta = ( now - last ) / 1000;
if ( delta > 1 ) delta = 1; // safety cap on large deltas if ( delta > 1 ) delta = 1; // safety cap on large deltas
last = now; last = now;
positionUniforms[ "time" ].value = now; positionUniforms[ "time" ].value = now;
positionUniforms[ "delta" ].value = delta; positionUniforms[ "delta" ].value = delta;
velocityUniforms[ "time" ].value = now; velocityUniforms[ "time" ].value = now;
velocityUniforms[ "delta" ].value = delta; velocityUniforms[ "delta" ].value = delta;
if( materialShader ) materialShader.uniforms[ "time" ].value = now; if( materialShader ) materialShader.uniforms[ "time" ].value = now;
if( materialShader ) materialShader.uniforms[ "delta" ].value = delta; if( materialShader ) materialShader.uniforms[ "delta" ].value = delta;
velocityUniforms[ "predator" ].value.set( 0.5 * mouseX / windowHalfX, - 0.5 * mouseY / windowHalfY, 0 ); velocityUniforms[ "predator" ].value.set( 0.5 * mouseX / windowHalfX, - 0.5 * mouseY / windowHalfY, 0 );
mouseX = 10000; mouseX = 10000;
mouseY = 10000; mouseY = 10000;
gpuCompute.compute(); gpuCompute.compute();
if( materialShader ) materialShader.uniforms[ "texturePosition" ].value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture; if( materialShader ) materialShader.uniforms[ "texturePosition" ].value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
if( materialShader ) materialShader.uniforms[ "textureVelocity" ].value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture; if( materialShader ) materialShader.uniforms[ "textureVelocity" ].value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
renderer.render( scene, camera ); renderer.render( scene, camera );
} }
</script> </script>
</body> </body>
</html> </html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或