THREE.JS 입문 튜토리얼(4) 파티클 시스템 생성

번역
Three.js는 WebGL을 통해 JavaScript가 GPU를 작동하고 브라우저 측에서 진정한 3D를 구현할 수 있게 해주는 훌륭한 오픈 소스 WebGL 라이브러리입니다. 하지만 이 기술은 아직 개발 단계이고 정보가 극히 부족합니다. 매니아들은 기본적으로 Demo 소스 코드와 Three.js 자체의 소스 코드를 통해 배워야 합니다.
0. 소개
안녕하세요, 또 만났습니다. 그래서 우리는 Three.js를 배우기 시작했습니다. 이전 세 가지 튜토리얼을 읽지 않았다면 먼저 읽어 보시기 바랍니다. 이전 튜토리얼을 읽었다면 입자로 뭔가를 하고 싶을 수도 있습니다. 솔직히 말해서, 모두가 입자 효과를 좋아합니다. 알든 모르든 쉽게 만들 수 있습니다.
1. 파티클 시스템 만들기
Three.js는 파티클 시스템을 기본 지오메트리와 같기 때문에 모양, 위치, 배율, 회전 속성을 포함하여 기본 지오메트리로 취급합니다. 입자 시스템은 형상 개체의 각 점을 별도의 입자로 처리합니다. 왜 이런 일을 하는가? 그 이유는 다음과 같습니다. 첫째, 전체 입자 시스템을 그리려면 특정 그리기 함수를 수천 번 호출하는 대신 한 번만 호출하면 됩니다. 입자 시스템의 구성 요소.

파티클 시스템이 전체 개체로 처리되더라도 각 파티클에 개별적으로 색상을 지정할 수 있습니다. 파티클 시스템을 그리는 과정에서 Three.js가 속성 변수 color를 통해 이를 셰이더에 전달하기 때문입니다. 각 꼭지점의 색상입니다. 이 튜토리얼에서는 이 작업을 수행하지 않을 것입니다. 이것이 어떻게 수행되는지 알고 싶다면 GitHub로 이동하여 Three.js 예제를 볼 수 있습니다.

파티클 시스템에는 주의가 필요한 특수 효과가 있을 수 있습니다. Three.js는 파티클 시스템이 처음 렌더링될 때 이후에 시스템의 데이터를 늘리거나 줄일 수 없습니다. .입자. 입자를 보고 싶지 않은 경우 해당 색상의 알파 값을 0으로 설정할 수 있지만 삭제할 수는 없습니다. 따라서 입자 시스템을 만들 때 표시해야 할 모든 입자를 고려해야 합니다.
입자 시스템 생성을 시작하려면 이 정도만 있으면 됩니다:

코드 복사 코드는 다음과 같습니다:

 
// 입자 형상 생성 
var ParticleCount = 1800, 
particles = new THREE.Geometry(), 
pMaterial = 
new THREE. ParticleBasicMaterial({ 
 color: 0xFFFFFF, 
size: 20 
}) 
// 순차적으로 개별 입자를 생성합니다 
for(var p = 0; p < ParticleCount; p ) { 
// 입자 범위 -250에서 250 사이 
var pX = Math.random() * 500 - 250, 
pY = Math.random() * 500 - 250, 
pZ = Math. 무작위() * 500 - 250, 
particle = new THREE.Vertex( 
new THREE.Vector3(pX, pY, pZ) 
)// 입자 기하학에 입자 추가 
 입자.vertices.push (입자) 
} 
// 입자 시스템 생성 
var 입자 시스템 = 
new THREE.ParticleSystem( 
particles, 
pMaterial); / 파티클 시스템 추가 Scene 
scene.addChild(particleSystem); 


을 실행하면 

파티클이 모두 정사각형임을 알 수 있습니다.
2. 입자가 다 사각형이에요 가만히하나하나 고쳐보겠습니다.
2. 스타일

파티클 기본 재질 생성 시 색상과 크기를 전달했습니다. 우리가 원하는 것은 텍스처 이미지를 전달하여 입자를 표시하는 것입니다. 그러면 입자가 어떻게 보이는지 잘 제어할 수 있습니다.
파티클이 사각형 모양으로 그려져 있는 것을 볼 수 있으므로 사각형 텍스처 이미지도 사용해야 합니다. 더 보기 좋게 만들기 위해 추가 블렌딩도 사용하지만 이렇게 하면 텍스처 이미지의 배경이 투명하지 않고 검은색이 됩니다. 내가 이해하는 이유는 이제 첨가물 혼합과 투명 재료 사이에 비호환성이 있기 때문입니다. 그러나 그것은 중요하지 않습니다. 결국에는 멋져 보일 것입니다.
파티클 기본 재질과 파티클 시스템을 업데이트하고 추가로 혼합된 투명 파티클을 추가해 보겠습니다. 원한다면 내 입자 사진을 사용할 수도 있습니다.

코드 복사

코드는 다음과 같습니다. // 입자 기초재료 생성 var pMaterial =

new THREE.ParticleBasicMaterial({

color: 0xFFFFFF,
size: 20,
map: THREE.ImageUtils.loadTexture(
"images/particle.png"
),
blending: THREE.AdditiveBlending,
transparent: true
})
// 입자 시스템이 원하는 효과를 얻기 위해 입자를 정렬하도록 허용
particleSystem.sortParticles = true;

벌써 훨씬 나아 보이는군요. 이제 약간의 물리학을 소개하고 입자를 움직여 보겠습니다.
3. 물리학 소개
기본적으로 입자 시스템은 3차원 공간에서 움직이지 않는 것이 좋습니다. 하지만 나는 그들이 움직이기를 원하며 입자 시스템도 다음과 같이 움직이기를 원합니다. 입자가 y축을 중심으로 회전하도록 하십시오. 그리고 각 축의 입자 범위는 -250에서 250 사이이므로 y축을 중심으로 회전한다는 것은 입자가 시스템 중심을 중심으로 회전한다는 의미입니다.

또한 셰이더에 대한 지난 튜토리얼에서 했던 것과 유사한 프레임 루프 코드가 이미 어딘가에 있다고 가정합니다. 따라서 여기서는 다음만 수행하면 됩니다.

코드 복사 코드는 다음과 같습니다.

 
 // 프레임 루프
function update() { 
// 약간의 회전 추가 
particleSystem.rotation.y = 0.01; 
// 입자 시스템 그리기 
renderer.render(scene, 카메라); 
 //다음 프레임이 새로 고쳐질 때 업데이트하도록 호출 설정 
requestAnimFrame(update) 
} 

이제 단일 프레임의 움직임을 정의하기 시작합니다. 입자(역자 주: 이전 회전은 전체 입자 시스템의 동작입니다). 간단한 빗방울 효과를 만들어 보겠습니다: 1. 각 입자에 0
2의 초기 속도를 할당합니다. 각 A 입자에 무작위 중력이 할당됩니다. 가속도
3. 각 프레임에서는 가속도를 통해 속도가 업데이트되고 속도를 통해 위치가 업데이트됩니다
4. 입자가 시야에서 벗어나면 초기 위치와 속도를 재설정합니다
많을 것 같은데요, 하지만 실제로 작성하는 데는 코드가 거의 필요하지 않습니다. 먼저 파티클을 생성하는 과정에서 각 파티클에 수평 속도를 추가합니다.

코드 복사 코드는 다음과 같습니다. :

// 각 입자에 대한 수평 운동 속도 생성 
particle.velocity = new THREE.Vector3( 
0, // x 
-Math.random(), // y: 난수 
0); // z 

 

다음으로, 프레임 버퍼의 각 입자를 전달하고 입자가 화면 하단을 떠날 때 재설정합니다. 위치와 속도를 재설정합니다.

코드 복사 코드는 다음과 같습니다.

// 프레임 루프
기능 업데이트 () { 
// 회전량 증가 
particleSystem.rotation.y = 0.01; 
var pCount = ParticleCount 
while(pCount--) { 
// 단일 가져오기 입자
var 입자 = 입자.vertices[pCount]; 
// 재설정이 필요한지 확인 
if(particle.position.y < -200) { 
particle.position.y = 200 ; 
particle.velocity.y = 0; 
} 
// 수평 속도 구성요소를 임의의 숫자로 업데이트하고 속도에 따라 위치를 업데이트합니다. 
particle.velocity.y -= Math. random() * .1; 
 Particle.position.addSelf( 
particle.velocity); 
} 
// 입자 위치를 변경했음을 입자 시스템에 알립니다. 
particleSystem.geometry. __dirtyVertices = true; 
// 그리기
renderer.render(scene, Camera) 
//다음 호출 설정
requestAnimFrame(update); 🎜>충분히 충격적이지는 않지만, 이 입자는 적어도 어떻게 해야 하는지를 보여줍니다. 멋진 입자 효과를 직접 만들어서 알려주세요. 
여기에 주의해야 할 경고가 있습니다. 프레임 루프를 사용하면 너무 과격해졌습니다. 하나의 루프에서 모든 파티클을 반복했는데 이는 실제로 매우 거친 접근 방식입니다. 프레임 루프에서 너무 많은 작업을 수행하는 경우(번역자 참고 사항: 프레임 루프의 js 코드는 CPU에서 실행되며 한 번에 수천 개의 간단한 프로세스를 실행할 수 있는 GPU와는 다르다는 점에 유의하세요) 실제로 requestAnimationFrame을 사용하면 해당 보기가 초당 60번 새로 고쳐집니다. 따라서 코드를 최적화하고 프레임 루프에서 가능한 한 적은 작업을 수행하는 것이 좋습니다. 

4. 요약