Обновление: по этой ссылке я решил реализовать простое световое решение http://blog.edankwan.com/post/three-js-advanced-tips-shadow,, предложенное ScieCode. Это первая часть связанной страницы. Результат можно увидеть на картинке внизу этого поста.
Связанная страница содержит информацию о том, как отбрасывать тени, используя материал нестандартного шейдера в ThreeJS, но я чувствую, что он больше подходит для сеток и базовых систем частиц. Я работаю с системой частиц FBO.
У меня есть система частиц, использующая FBO. Он построен с использованием шейдерных материалов в ThreeJS. Частицы становятся высокими кучевыми облаками. Как я могу применить освещение и тени к этим частицам, как если бы они были одной сплошной сеткой?
Ниже приведен последний набор шейдеров, которые визуализируют частицы на экране:
Если честно, я даже не до конца понимаю, как вершинный шейдер выводит позиции. Я нашел этот пример кода и подходит для того, что я делаю. Я понимаю большинство из них, но хвост вершинного шейдера мне неясен.
Vertex:
precision highp float;
attribute vec2 id;
attribute vec3 p_color;
attribute float p_size;
uniform vec2 dimensions;
uniform float size;
uniform sampler2D infoTexture;
uniform sampler2D originalTexture;
uniform sampler2D positionTexture;
uniform sampler2D previousPositionTexture;
uniform sampler2D velocityTexture;
varying vec2 vUv;
varying float life;
varying vec2 vSpeed;
varying float vSize;
float modI(float a,float b) {
float m=a-floor((a+0.5)/b)*b;
return floor(m+0.5);
}
const float PI = 3.14159265359;
void main() {
float size_modifier = 1. * p_size;
float ptr = id.x;
float u = modI( ptr, dimensions.x ) / dimensions.x;
float v = ( ptr / dimensions.x ) / dimensions.y;
vec2 puv = vec2( u, v );
vec4 velocity = texture2D( velocityTexture, puv );
// vSpeed = .1 * ( projectionMatrix * modelViewMatrix * vec4( velocity.xyz, 1. ) ).xy;
vec4 i = texture2D( infoTexture, puv );
vec4 prev_pos = texture2D( previousPositionTexture, puv );
vec4 origin_pos = texture2D( originalTexture, puv );
vec4 c = texture2D( positionTexture, puv );
vec3 p = c.xyz;
vUv = uv;
float life_time = 1000.;
life = 1. - ( c.a / life_time );
// if( c.a == 0. ) life = 0.;
if( velocity.a != 1. ){
size_modifier = .0;
}
vec4 modified = modelViewMatrix * vec4( p, 1. );
// float a = -atan( vSpeed.y, vSpeed.x ) - .5 * PI;
// float l = clamp( length( vSpeed ), .5, 4. );
// mat2 rot = mat2( cos( a ), -sin( a ), sin( a ), cos( a ) );
// modified.xyz += size * i.x * 10. * vec3( rot * position.xy, 0. );
// modified.xyz += size * size_modifier * i.x * 10. * vec3( rot * position.xy, 0. );
modified.xyz += size * size_modifier * i.x * 10. * vec3( position.xy, 0. );
gl_Position = projectionMatrix * modified;
}
Фрагмент:
precision highp float;
varying float vSize;
varying vec2 vUv;
varying float life;
varying vec2 vSpeed;
varying vec3 p_color_f;
uniform float useTriangles;
const vec2 barycenter = vec2( .5, .6666 );
void main() {
// render circles
float d = smoothstep( .5, .55, 1. - 2. * length( vUv - barycenter ) );
if( d <= 0. ) discard;
vec3 frag_c = vec3( p_color_f );
gl_FragColor = vec4( frag_c, 1.);
}
Как я добавил куски шейдера в пользовательский шейдер:
particleMaterial = new THREE.ShaderMaterial( {
uniforms: THREE.UniformsUtils.merge([
THREE.UniformsLib.shadowmap,
THREE.UniformsLib.lights,
THREE.UniformsLib.ambient,
{
size: { type: 'f', value: 1 },
useTriangles: { type: 'f', value: 0 },
originalTexture: { type: 't', value: texture },
infoTexture: { type: 't', value: texture2 },
positionTexture: { type: 't', value: positionSim.fbos[ 0 ] },
previousPositionTexture: { type: 't', value: positionSim.fbos[ 1 ] },
velocityTexture: { type: 't', value: velocitySim.fbos[ 1 ] },
dimensions: { type: 'v2', value: dimensions },
cameraPosition: { type: 'v3', value: new THREE.Vector3() },
prevModelViewMatrix: { type: 'm4', value: new THREE.Matrix4() },
prevProjectionMatrix: { type: 'm4', value: new THREE.Matrix4() }
} ]),
vertexShader: document.getElementById( 'particle-vs' ).textContent,
fragmentShader: document.getElementById( 'particle-fs' ).textContent,
transparent: false,
side: THREE.DoubleSide,
depthTest: true,
depthWrite: true,
lights: true
// blending: THREE.NoBlending
} );
Основной результат освещения:
Даже это добавило много глубины шторму.