webgl을 사용하는 입자 시스템

Question

그래픽 코스의 경우 WebGL에서 입자 시스템을 구현합니다. JavaScript로 입자 시뮬레이션 계산을 수행하는 것은 매우 느릴 수 있습니다. 우리 교수는 GPU에서 입자 시뮬레이션을 수행하기를 원합니다.

입자 시뮬레이션을하려면 입자 데이터 (위치, 속도, 질량 등)가 포함 된 버텍스 버퍼를 업로드 한 다음 내 버텍스 쉐이더에 시뮬레이션을위한 수학 연산을 수행하고 그 결과를 입자의 다음 상태를 나타내는 다른 정점 버퍼. 그런 다음 렌더링을 위해 다른 셰이더 프로그램을 사용하여 gl.POINTS을 사용하여 입자를 렌더링 할 수 있습니다. http://open.gl/feedback

그러나, 피드백을 변환 것 같아 현재 WebGL에 포함되지 않습니다

이 내가 여기에서 배우고 피드백을 변환 처럼 보인다. This blog post은 변환 피드백이 WebGL 2.0에서 나올 것이라고 말합니다. 실제로 gl.beginTransformFeedback;과 같은 명령문을 실행하면 메서드가 정의되지 않는다는 오류가 발생합니다.

변환 피드백을 사용할 수없는 경우 어떻게 WebGL에서 입자 시뮬레이션을 수행해야합니까?

Answer 1

제안

는 대신 포인트의 쿼드를 사용하여 방법 이상의 디스플레이 유연성을 얻을 수 있습니다. 기본적으로 각 입자에 대한 정점 데이터를 넣습니다.

//localX, localY, data for particle, data for particle, ... 
    -1,  -1, gravityForParticle0, velocityForParticle0, etc.., 
     1,  -1, gravityForParticle0, velocityForParticle0, etc.., 
    -1,  1, gravityForParticle0, velocityForParticle0, etc.., 
     1,  1, gravityForParticle0, velocityForParticle0, etc.., 
    -1,  -1, gravityForParticle1, velocityForParticle1, etc.., 
     1,  -1, gravityForParticle1, velocityForParticle1, etc.., 
    -1,  1, gravityForParticle1, velocityForParticle1, etc.., 
     1,  1, gravityForParticle1, velocityForParticle1, etc.., 
    -1,  -1, gravityForParticle2, velocityForParticle2, etc.., 
     1,  -1, gravityForParticle2, velocityForParticle2, etc.., 

따라서 각 입자의 데이터는 각 쿼드의 각 정점마다 동일합니다. 즉 당신은

unit vertex #0, particle0 data 
unit vertex #1, particle0 data 
unit vertex #2, particle0 data 
unit vertex #3, particle0 data 

unit vertex #0, particle1 data 
unit vertex #1, particle1 data 
unit vertex #2, particle1 data 
unit vertex #3, particle1 data 

unit vertex #0, particle2 data 
unit vertex #1, particle2 data 
unit vertex #2, particle2 data 
unit vertex #3, particle2 data 

지금 당신이 회전 스케일, 그리고 쉐이더에서 쿼드 방향을, 그것은 그러나 당신이 원하는 당신이 POINTS 함께 할 수없는 무언가를 상쇄 할 수있다.

입자 시스템이 결정적 일 경우 (모든 입자의 위치가 전적으로 시간 만 기반이기 때문에) 모든 변수를 특성 및 유니폼에 넣을 수 있으며 유니폼으로 시간을 전달할 수 있습니다.

an example of this kind of system here을 볼 수 있습니다. 이 입자는 전적으로 GPU에서 실행됩니다. 전달 된 유일한 것은 투영을위한 시간과 매트릭스입니다. 시간이 지남에 따라 회전, 시간에 따라 회전, 시간에 따른 속도 및 가속도, 심지어 시간에 따른 애니메이션 텍스처 (예에서 숫자 참조)를 사용하여 입자를 3D로 방향 지정합니다 (예제의 숫자 참조).

이러한 기술 위에, particle 시스템은 결정적이지 않습니다. 즉, 모든 프레임이 바뀌는 상태를 의미합니다. 텍스처를 프레임 버퍼 객체에 첨부하여 텍스처에 상태를 쓸 수 있습니다. 시스템이 부동 소수점 텍스처를 지원하는 경우 RGBA/FLOAT에 쓰고 이후 그리기 호출에서 해당 텍스처를 버텍스 또는 프래그먼트 셰이더의 입력으로 읽을 수 있습니다.

There's an example here. 계산에 사용되는 텍스처를 볼 수도 있습니다.

Answer 2

FBO을 사용하고 여러 텍스처 첨부 파일을 사용하여 simulation 변수를 저장할 수 있습니다. 렌더링하기 위해서는 vertex displacement 기술을 사용할 수 있습니다.

Answer 3

초기 속도와 가속도 벡터를 속성으로 속성으로 전달하여 정점 쉐이더에 전달할 수 있으며 각 프레임 루프에서 1/60 씩 수정 된 유니폼으로 시간을 전달할 수 있습니다. 예를 들어 당신이 안정적인 가속이있는 경우, 버텍스 쉐이더의 위치 차이를 계산하기 위해이 운동 공식을 사용할 수 있습니다

positionNew = positionOld + (dx, dy, dz) 

그런 다음 positionNew 벡터를 곱 수 있습니다

dx = vInitial.x + (0.5 * acceleration.x * time^2) 
dy = vInitial.y + (0.5 * acceleration.y * time^2) 
dz = vInitial.z + (0.5 * acceleration.z * time^2) 

물론

모델 및 뷰 매트릭스 & 투영 행렬을 사용하여 주어진 정점의 최종 위치를 얻습니다.