Three.js Chapter 2 section 17 Particles

황상진·2024년 4월 8일

three.js

Three.js

목록 보기

5/15

Particles

Three.js에서 particle은 하나의 plane으로 구성 -> 두개의 삼각형
camera를 향하게 된다.

Particle 만들 때 필요한 요소

a geometry (BufferGeometry)
a material (PointsMaterial)
a Points instance (Mesh 말고)

const particlesGeometry = new THREE.SphereGeometry(1,32,32)
const particlesMaterial = new THREE.PointsMaterial({
    size: 0.02,
    sizeAttenuation: true
})

const particles = new THREE.Points(particlesGeometry,particlesMaterial)
scene.add(particles)

PointsMaterial에서 size는 particle의 size를 의미한다.
PointsMaterial에서 sizeAttenuation은 모든 particle의 사이즈가 거리와 상관 관계를 가지는지를 결정한다.

Custom Geometry

Sphere라는 정해진 Geometry 말고 특정 xyz에 custom 하게 particle을 배치하는 방법
BufferGeometry를 생성해준다.
BufferGeometry의 객체들의 xyz 값을 랜덤하게 생성해준다.
해당 위치 값을 Float32Array에 만들어서 BufferGeometry에 적용한다.
Points 인스턴스에 적용해준다.

const particlesGeometry = new THREE.BufferGeometry()
const particlesMaterial = new THREE.PointsMaterial({
    size: 0.1,
    sizeAttenuation: true
})
const count = 5000

const positions = new Float32Array(count*3)

for(let i=0;i<count*3;i++){
    positions[i] = (Math.random()-0.5)*100
}
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions,3))

const particles = new THREE.Points(particlesGeometry,particlesMaterial)
scene.add(particles)

particle의 색상을 변경하려면 Color 클래스를 활용한다.

particlesMaterial.color = new THREE.Color('#ff88cc')

texture를 사용해서 particle에 적용해줄수 있다.

/**
 * Textures
 */
const textureLoader = new THREE.TextureLoader()
const particleTexture = textureLoader.load('/textures/particles/2.png')

// ...

particlesMaterial.map = particleTexture

map에 texture를 적용해주면 텍스쳐에 가려지는 문제가 발생
이를 위해서 transparent를 true로 하고 map이 아닌 alphaMap에 texture를 적용해준다.

// particlesMaterial.map = particleTexture
particlesMaterial.transparent = true
particlesMaterial.alphaMap = particleTexture

그러나, 아직 edge가 particle에서 보인다.

particle edge 해결방안

alphaTest
depthTest
depthWrite
Blending

alphaTest

Material에서 alphaTest 속성이 있다.
이 속성은 pixel의 투명도에 따라서 pixel을 render할지 말지를 결정한다.
value는 0부터 사이 값이며, default 값은 0이다. 0이여도 어느정도 render된다.
이를 0.001로 설정하면 해결된다.

particlesMaterial.alphaTest = 0.001

depthTest

WebGL은 그려질 객체와 이미 그려진 객체의 거리를 Test한다.
이를 비활성화시키면, 더 나은 결과를 받을 수 있다.
그러나 앞뒤 거리 계산을 안하기 때문에 부자연스럽다.

// particlesMaterial.alphaTest = 0.001
particlesMaterial.depthTest = false

depthWrite

WebGL의 depthTest 과정에서 저장된 depth들은 depth buffer에 저장된다.
Test는 진행하고 write만 하지 않도록 설정할 수 있다.

// particlesMaterial.alphaTest = 0.001
// particlesMaterial.depthTest = false
particlesMaterial.depthWrite = false

Blending

blending 속성을 변경함으로써, pixel만 그릴 뿐 아니라 pixel에 color를 더할 수 있다.
performance에 영향을 준다.
채도 효과를 가진다.

// particlesMaterial.alphaTest = 0.001
// particlesMaterial.depthTest = false
particlesMaterial.depthWrite = false
particlesMaterial.blending = THREE.AdditiveBlending

Different colors

position값을 random으로 준 것 처럼 particle의 color도 random으로 줄 수 있다.
Float32Array를 만들어주고 RGB 세개의 값을 담아야함으로 * 3 해준다.
color 값을 random하게 배정한 훙, color Attributue에 적용해준다.
마지막으로 vertexColor를 사용한다는 의미에서 vertexColors를 true로 바꾸어준다.
Material의 color 값을 미리 설정해두었다면 해당 색상위에 random color가 더해진다. 즉, basecolor로 사용된다.

const positions = new Float32Array(count * 3)
const colors = new Float32Array(count * 3)

for(let i = 0; i < count * 3; i++)
{
    positions[i] = (Math.random() - 0.5) * 10
    colors[i] = Math.random()
}

particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))

particlesMaterial.vertexColors = true

Animate

particle들의 위치 및 색상을 tick 함수에서 변경할 수 있다.
animtate하기 위해서는 particlesGeometry.attributes.position.needsUpdate= true 해주어야한다.

for(let i=0;i<count;i++){
        const i3 = i*3

        const x = particlesGeometry.attributes.position.array[i3]
        particlesGeometry.attributes.position.array[i3+1] = Math.sin(elapsedTime+x)
    }
    particlesGeometry.attributes.position.needsUpdate= true