Xây dựng engine đồ họa WebGPU cho... phòng khám tâm lý? Dự án Therapy Warsaw sử dụng hơn 10.000 hạt chuyển động để tạo ra trải nghiệm thị giác mượt mà (60FPS).
Điểm nổi bật:
- Chạy song song WebGPU & WebGL2, đảm bảo tương thích từ thiết bị cũ đến mới.
- Dùng Web Worker và OffscreenCanvas để không gây lag trình duyệt khi cuộn.
- Hệ thống vật lý giúp chuyển đổi màu sắc và tốc độ tự nhiên.
Sự kết hợp độc đáo giữa nghệ thuật tạo sinh và kỹ thuật đồ họa web.
All of this and running smoothly without losing any frames. This is the current state of graphics on the web.
#webgpu #wgsl #graphicsprogramming #javascript #webdev #webdevelopment #genart #creativecoding #digitalart #3d #cgi #computeshaders #shaders #generativeart
This demo has a 262K+ instanced particles (cubes) animated in compute shader, movement driven by a noise texture, it uses the depth map to create a slight depth of field and also some particles are emissive and to make the effect complete it has some bloom that affects only the bright particles, this thanks to the HDR output that allows those cubes to have a brightness beyond white and then those values are tonemapped to fit in the final output.
With the new version of my WebGPU library POINTS v0.6.0 (https://github.com/Absulit/points), I added a bunch of new features like support for depth maps, cameras, bloom and others, so I wanted to make a demo that used all of these.
#webgpu #wgsl #graphicsprogramming #javascript #webdev #webdevelopment #genart #creativecoding #digitalart #3d #cgi #computeshaders #shaders #generativeart
I also updated my POINTS library a couple of days ago to v0.6.0 (and a fix in the queue) with depth maps/shadow maps, bloom, wireframes
https://github.com/Absulit/points
The image is from a personal demo I'm currently working
#webgpu #wgsl #javascript #generativeart #genart #digitalArt #webdev
I think I understand better compute shaders than before. A thing that still eludes me is the fact that, even when I know I have 1 million particles, they are not all visible, even when I thought that was the case. I'm not entirely sure what it is, (not an expert but I manage to) it could be some sync issue related to random numbers, like it generates the same value and the particles overlaps
We got Mesh Shaders to work on #wgpu!
https://github.com/gfx-rs/wgpu/issues/7197#issuecomment-3668283192
Mesh pipelines are great for many things such as skinning, LODs, and procedural meshes.
Now that three.js supports BC5/EAC normal maps, I've updated the spark.js gltf demo with new texture assets.
Last time I simply used gltf-transform with default settings, but this time I tailored the settings to each specific texture type and the resulting quality is much better:
DevTo VN Bot
absulit
Qiita - 人気の記事
Colin 🐈🌱
Ignacio Castaño🍉