Hệ thống hạt sử dụng webgl

Question

Đối với khóa học đồ họa, chúng tôi đang triển khai hệ thống hạt trong WebGL. Việc tính toán mô phỏng hạt trong JavaScript sẽ khá chậm, giáo sư của chúng ta muốn chúng ta thực hiện mô phỏng hạt nhân trên GPU. Để làm mô phỏng hạt này, tôi tưởng tượng chúng ta tải lên một vertex buffer chứa dữ liệu hạt của chúng ta (vị trí, vận tốc, khối lượng, vv), và sau đó có vertex shader làm một số toán cho mô phỏng, và ghi kết quả vào bộ đệm đỉnh khác nhau, đại diện cho trạng thái tiếp theo của các hạt. Sau đó, tôi có thể hiển thị các hạt của mình bằng cách sử dụng gl.POINTS bằng cách sử dụng chương trình đổ bóng khác để hiển thị.

Điều này có vẻ như chuyển phản hồi, mà tôi đang học từ đây: http://open.gl/feedback

Tuy nhiên, nó có vẻ như chuyển thông tin phản hồi hiện không được bao gồm trong WebGL. This blog post nói rằng phản hồi chuyển đổi sẽ xuất hiện với WebGL 2.0. Thật vậy, khi tôi thử các câu lệnh như gl.beginTransformFeedback;, tôi gặp lỗi khi nói rằng phương thức đó không được xác định.

Làm cách nào để mô phỏng hạt trong WebGL nếu phản hồi chuyển đổi không khả dụng?

Answer 1

Một số đề xuất

Bạn có thể linh hoạt hơn bằng cách sử dụng quad thay vì điểm. Về cơ bản, bạn đặt dữ liệu đỉnh cho mỗi hạt giống như

//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.., 

Vì vậy, dữ liệu cho mỗi hạt giống hệt nhau cho mỗi đỉnh của mỗi quad. Nói cách khác bạn có

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 

Bây giờ bạn có thể xoay, quy mô và định hướng quad trong shader của bạn và bù đắp nó tuy nhiên bạn muốn, một cái gì đó bạn không thể làm với POINTS.

Ngoài ra, nếu hệ thống hạt của bạn là xác định (như ở vị trí của bất kỳ hạt nào chỉ dựa trên thời gian) thì bạn có thể đặt tất cả các biến của bạn trong thuộc tính và đồng phục và chỉ cần chuyển trong thời gian như một bộ đồng phục.

Bạn có thể xem an example of this kind of system here. Những hạt này chạy hoàn toàn trên GPU. Điều duy nhất trôi qua là thời gian và ma trận để chiếu. Họ xử lý định hướng các hạt trong 3D, thay đổi màu theo thời gian, xoay theo thời gian, vị trí với vận tốc và gia tốc theo thời gian, thậm chí là hoạt ảnh kết cấu theo thời gian (xem các số trong ví dụ)

Trên hết các kỹ thuật đó, hệ thống hạt không xác định, nghĩa là bạn có trạng thái thay đổi mọi khung hình, bạn có thể viết trạng thái thành một kết cấu bằng cách gắn kết cấu vào đối tượng framebuffer. Nếu máy của bạn hỗ trợ các kết cấu dấu chấm động thì bạn có thể ghi vào một số RGBA/FLOAT và đọc kết cấu đó làm đầu vào trong bóng đổ hoặc phần đổ bóng trong cuộc gọi vẽ tiếp theo.

There's an example here. Bạn thậm chí có thể xem kết cấu đang được sử dụng để tính toán.

Answer 2

Bạn có thể sử dụng FBO và sử dụng nhiều tệp đính kèm kết cấu để lưu trữ biến số simulation của mình. Để hiển thị, bạn có thể sử dụng kỹ thuật vertex displacement.

Answer 3

Bạn có thể truyền vận tốc ban đầu và vectơ tăng tốc làm thuộc tính cho bóng đổ đỉnh và chuyển thời gian dưới dạng đồng phục được làm mờ trên mỗi vòng khung bằng 1/60. Nếu ví dụ bạn có một khả năng tăng tốc ổn định, bạn có thể sử dụng công thức chuyển động này để tính toán sự khác biệt vị trí trong vertex shader:

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) 

và tất nhiên:

positionNew = positionOld + (dx, dy, dz) 

Sau đó, bạn có thể nhân vector positionNew để ma trận mô hình và xem ma trận & để có được vị trí cuối cùng của đỉnh đã cho.