3D transparency proposal

Đang mở
  • Có gì không ổn?
#8,112 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
8/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript
Lĩnh vực
data-visualization

Hướng nghiên cứu

This is a design proposal for screen-space blue-noise transparency in plotly.js's 3D surfaces, and the payload names no files, tests or entry points. Start by reading the linked issues (#1267, #3243, #4918) to see what has already been tried. Done would mean a maintainer-agreed design and a prototype, so a first-time contributor should discuss the approach in the thread before writing code.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

enhancement feature P3 plotly-internal size: 5

3D transparency has always been tricky, and has never worked very well in plotly.js. - see eg https://github.com/plotly/plotly.js/issues/1267 https://github.com/plotly/plotly.js/issues/3243 https://github.com/plotly/plotly.js/issues/4918 for just a few examples. Several years ago I played with an approach that seemed promising - treating opacity as a semi-random probability of drawing or not drawing a pixel, then oversampling / averaging to smooth the result. I never got it working well enough to include in the library, but in another project (not using plotly.js) a colleague of mine has refined the concept into what I think is a really beautiful, performant, and useful result so I'm sharing here in case someone wants to bring it into plotly.js

  • Each transparent surface gets a repeatable, screen-space random blue noise function that yields values between 0 and 1. This means if you pass through multiple layers of the same surface we will not make it as opaque as it really should be (because they all use the same screen-space function), but because of the next point, the result still looks physically reasonable, and arguably more useful than the full opacity of a complete physical model. If you don't use screen space for the noise function (use full 3D space for example) then there's a distracting amount of motion to the noise as you move the viewport.
  • The transparency at each pixel becomes T^(1/cos(theta)) where T is the given transparency and theta is the angle at that pixel between the surface normal and the camera. This makes shallow-incidence areas more opaque, modeling a physical system where you're passing through a greater thickness of the material depending on this angle.
  • Only pixels where the final opacity is greater than the blue noise function (and where we haven't already drawn a surface closer to the camera) are drawn. All the same lighting effects used for opaque surfaces can still be used.
  • During mouse interactions this is what we display, so it looks grainy but you still see the features and on average they are correct. This is one area I still think the algorithm we're using could be improved, it often looks kind of like those old "Magic Eye" books whereas I think with some experimentation we could get it a bit flatter, but it's entirely usable in this form.
  • Once the mouse stops moving we average many frames (in the video below we use 64 frames) of this with different random seeds on the blue noise functions, to smooth away the graininess. In the averaging process it's important to distinguish between sRGB and linear color.

https://github.com/user-attachments/assets/29266885-2745-4077-a7db-33d24d96daee

Ngôn ngữ chính
JavaScript
Star
18.4k
Fork
2.1k
Merge trung bình
1 ngày 5 giờ
Pull request đã merge (30 ngày)
12

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của plotly/plotly.js

Tất cả issue của plotly/plotly.js

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.