在我寻找一种渲染云状纹理的方法时，我了解到我需要使用纹理等来存储下一帧的数据。进一步研究这让我找到了一些使用 FBO 和 webgl 渲染目标进行粒子的示例。即使听起来不错，似乎任何示例都可以在更新版本的threejs（如50或51）中使用。如果我要切换到three49，它将呈现它应该如何。
为了说明这个问题，我做了这个（小提琴）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; 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">
<style>
body {
font-family: Monospace;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
color: #ffffff;
font-family: Monospace;
font-size: 13px;
text-align: center;
font-weight: bold;
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
}
a {
color: #0040ff;
}
</style>
</head>
<body>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-86951-7']);
_gaq.push(['_trackPageview']);
(function()
{
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>
<!-- <script src="helvetiker_bold.typeface.js"></script> -->
<script id="texture_vertex_simulation_shader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = vec2(uv.x, 1.0 - uv.y);
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="texture_fragment_simulation_shader" type="x-shader/x-fragment">
// simulation
varying vec2 vUv;
uniform vec3 origin;
uniform sampler2D tPositions;
uniform float timer;
float rand(vec2 co){
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
void main() {
vec3 pos = texture2D( tPositions, vUv ).xyz;
if ( rand( vUv + timer ) > 0.99 ) {
pos = origin;
vec3 random = vec3( rand( vUv + 1.0 ) - 1.0, rand( vUv + 2.0 ) - 1.0, rand( vUv + 3.0 ) - 1.0 );
pos += normalize( random ) * rand( vUv + 1.0 );
} else {
float x = pos.x + timer;
float y = pos.y;
float z = pos.z;
pos.x += sin( y * 3.3 ) * cos( z * 10.3 ) * 0.005;
pos.y += sin( x * 3.5 ) * cos( z * 10.5 ) * 0.005;
pos.z += sin( x * 3.7 ) * cos( y * 10.7 ) * 0.005;
}
// Write new position out
gl_FragColor = vec4(pos, 1.0);
}
</script>
<!-- zz85 - end simulations -->
<script id="vs-particles" type="x-shader/x-vertex">
uniform sampler2D map;
uniform float width;
uniform float height;
uniform float pointSize;
varying vec2 vUv;
varying vec4 vPosition;
varying vec4 vColor;
void main() {
vec2 uv = position.xy + vec2( 0.5 / width, 0.5 / height );
vec3 color = texture2D( map, uv ).rgb * 200.0 - 100.0;
gl_PointSize = pointSize;
gl_Position = projectionMatrix * modelViewMatrix * vec4( color, 1.0 );
}
</script>
<script id="fs-particles" type="x-shader/x-fragment">
uniform vec4 pointColor;
void main() {
gl_FragColor = pointColor;
}
</script>
<script>
var container;
var scene, camera, light, renderer;
var geometry, cube, mesh, material;
var data, texture, points;
var controls;
var fboParticles, rtTexturePos, rtTexturePos2, simulationShader;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
scene.add( camera );
controls = new THREE.OrbitControls2( camera );
controls.radius = 400;
controls.speed = 3;
//
var width = 1024, height = 1024;
// var width = 64, height = 64;
// var width = 128, height = 128;
if ( ! renderer.context.getExtension( 'OES_texture_float' ) ) {
alert( 'OES_texture_float is not :(' );
}
// Start Creation of DataTexture
// Could it be simplified with THREE.FBOUtils.createTextureFromData(textureWidth, textureWidth, data); ?
data = new Float32Array( width * height * 3 );
texture = new THREE.DataTexture( data, width, height, THREE.RGBFormat, THREE.FloatType );
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
texture.needsUpdate = true;
// zz85 - fbo init
rtTexturePos = new THREE.WebGLRenderTarget(width, height, {
wrapS:THREE.RepeatWrapping,
wrapT:THREE.RepeatWrapping,
minFilter: THREE.NearestFilter,
magFilter: THREE.NearestFilter,
format: THREE.RGBFormat,
type:THREE.FloatType,
stencilBuffer: false
});
rtTexturePos2 = rtTexturePos.clone();
simulationShader = new THREE.ShaderMaterial({
uniforms: {
tPositions: { type: "t", value: 0, texture: texture },
origin: { type: "v3", value: new THREE.Vector3() },
timer: { type: "f", value: 0 }
},
vertexShader: document.getElementById('texture_vertex_simulation_shader').textContent,
fragmentShader: document.getElementById('texture_fragment_simulation_shader').textContent
});
fboParticles = new THREE.FBOUtils( width, renderer, simulationShader );
fboParticles.renderToTexture(rtTexturePos, rtTexturePos2);
fboParticles.in = rtTexturePos;
fboParticles.out = rtTexturePos2;
geometry = new THREE.Geometry();
for ( var i = 0, l = width * height; i < l; i ++ ) {
var vertex = new THREE.Vector3();
vertex.x = ( i % width ) / width ;
vertex.y = Math.floor( i / width ) / height;
geometry.vertices.push( vertex );
}
material = new THREE.ShaderMaterial( {
uniforms: {
"map": { type: "t", value: 0, texture: rtTexturePos },
"width": { type: "f", value: width },
"height": { type: "f", value: height },
"pointColor": { type: "v4", value: new THREE.Vector4( 0.25, 0.50, 1.0, 0.25 ) },
"pointSize": { type: "f", value: 1 }
},
vertexShader: document.getElementById( 'vs-particles' ).textContent,
fragmentShader: document.getElementById( 'fs-particles' ).textContent,
blending: THREE.AdditiveBlending,
transparent: true,
depthWrite: false,
depthTest: false
} );
mesh = new THREE.ParticleSystem( geometry, material );
scene.add( mesh );
var gui = new dat.GUI();
gui.add( material.uniforms.pointColor.value, 'x', 0.0, 1.0 ).name( 'red' );
gui.add( material.uniforms.pointColor.value, 'y', 0.0, 1.0 ).name( 'green' );
gui.add( material.uniforms.pointColor.value, 'z', 0.0, 1.0 ).name( 'blue' );
gui.add( material.uniforms.pointColor.value, 'w', 0.0, 1.0 ).name( 'alpha' );
gui.add( material.uniforms.pointSize, 'value', 0.0, 10.0 ).name( 'size' );
gui.add( controls, 'enabled' ).name( 'auto move' );
scene.add( new THREE.Mesh( new THREE.CubeGeometry( 500, 500, 500 ), new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, opacity: 0.15 } ) ) );
}
function animate() {
requestAnimationFrame( animate );
render();
}
var timer = 0;
function render() {
timer += 0.01;
simulationShader.uniforms.timer.value = timer;
simulationShader.uniforms.origin.value.x = Math.sin( timer * 2.3 ) * 0.5 + 0.5;
simulationShader.uniforms.origin.value.y = Math.cos( timer * 2.5 ) * 0.5 + 0.5;
simulationShader.uniforms.origin.value.z = Math.sin( timer * 2.7 ) * 0.5 + 0.5;
// swap
var tmp = fboParticles.in;
fboParticles.in = fboParticles.out;
fboParticles.out = tmp;
simulationShader.uniforms.tPositions.texture = fboParticles.in;
fboParticles.simulate(fboParticles.out);
material.uniforms.map.texture = fboParticles.out;
controls.update();
renderer.render( scene, camera );
}
</script>
</body>
</html>
这是 mrdoob 用于的代码magicdust，您可以在那里看到如何只渲染一个粒子而不是所有粒子。此外，几乎（如果不是全部）来自https://github.com/mrdoob/three.js/issues/1183的示例都不起作用。
所以我的问题是：
- 谁能告诉我我能做些什么来解决这个问题？
- （即使标题中没有提到）谁能给我一个关于如何使用最后一帧计算下一帧的基本且简单但相关的示例？我想这是我的云模拟所需要的。
编辑1：
调查这个问题，似乎所有粒子都渲染在同一个地方。并且粒子系统对象上的缩放只会在一个轴或另一个轴上移动它。（就好像它们被几何的边界推到了一起……）
有谁知道如何解决这个问题？
编辑2：
似乎它们以某种方式呈现，但从一个版本到另一个版本，它们的尺寸和比例不同。我设法以某种方式在three52中看到了它们，将相机移动到非常接近0,0,0的地方，它们在那里，但现在就像我所期望的那样立方体，而是一个简单的平面。在three51中，我需要使用的，根本没有。
那么，任何人都可以告诉我如何使用粒子系统吗？