ánh sáng bên ngoài ba.js cho đối tượng hình cầu?

Question

Tôi đang xây dựng một số loại hệ thống hành tinh trong three.js và tôi đã dành vài giờ để tìm giải pháp tốt để có được ánh sáng bên ngoài bên ngoài trên một hành tinh - một đối tượng hình cầu có kết cấu.

Tôi đã xem qua ví dụ này http://stemkoski.github.io/Three.js/Selective-Glow.html loại mẹo nào, nhưng vấn đề là - hình thức phát sáng này cũng ảnh hưởng đến đối tượng 3D chính dẫn đến thay đổi màu sắc (như đã thấy ở đó).

Một ví dụ phát sáng đẹp khác có thể tìm thấy ở đây http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html nhưng một lần nữa nó phát sáng toàn bộ khu vực, không chỉ là "bên ngoài".

Tôi đã đọc một số chuỗi thảo luận về thuộc tính "ghi đè lên tài liệu" trên GitHub nhưng điều này có vẻ như thử nghiệm, không được sử dụng và không có giấy tờ ... thậm chí không chắc chắn liệu điều này có thể giải quyết được sự cố của tôi hay không.

Hãy chia sẻ ý tưởng của bạn, cảm ơn!

Answer 1

Tôi đã làm việc một chút để tách phần của mã WebGL Globe (được liên kết với ở trên) tạo ra hiệu ứng khí quyển. Một phiên bản làm việc ban đầu là ở đây:

http://stemkoski.github.io/Three.js/Atmosphere.html

Để tốt nhất của sự hiểu biết của tôi, có một vài điều thú vị xảy ra trong mã gốc để tạo hiệu ứng khí quyển. Đầu tiên, kết cấu phát sáng được đặt trên một hình cầu khác - hãy gọi nó là Atmo Sphere :) - bao quanh hình cầu với hình ảnh trái đất trên đó. Vật liệu Atmosphere được lật sao cho mặt trước không render, chỉ phía sau, do đó nó không che khuất trái đất mặc dù nó bao quanh nó. Thứ hai, hiệu ứng ánh sáng gradient đạt được bằng cách sử dụng một shader fragment chứ không phải là một texture. Tuy nhiên, không khí sẽ thay đổi diện mạo của nó nếu bạn phóng to và thu nhỏ; điều này không hiển nhiên trong thử nghiệm WebGL Globe vì việc thu phóng bị vô hiệu hóa.

[cập nhật tháng 4 30]

Tiếp theo, tương tự như mã nguồn từ

http://stemkoski.github.io/Three.js/Selective-Glow.html

lĩnh vực với các kết cấu ánh sáng gradient (và một quả cầu màu đen kết cấu) được đặt trong một giây cảnh, và sau đó kết quả từ cảnh đó được tạo thành với cảnh ban đầu bằng cách sử dụng một máy xay phụ. Và chỉ để bạn có thể thử nghiệm với các tham số được sử dụng để tạo hiệu ứng ánh sáng, tôi đã bao gồm một vài thanh trượt để bạn có thể thay đổi các giá trị và xem các hiệu ứng ánh sáng khác nhau tạo ra.

Tôi hy vọng điều này sẽ giúp bạn bắt đầu. Chúc may mắn!

[cập nhật ngày 11 tháng 6]

Tôi có một ví dụ mới mà đạt được tác dụng tương tự một cách nhiều đơn giản hơn, thay vì sử dụng sau chế biến và lối cộng trộn hai cảnh, tôi chỉ thay đổi một số thông số trong tài liệu tùy chỉnh. (Có vẻ như rõ ràng khi nhìn lại.) Đối với một ví dụ được cập nhật, hãy kiểm tra:

http://stemkoski.github.io/Three.js/Shader-Halo.html

Vẫn chưa tìm ra các vấn đề pan/zoom mặc dù.

[Cập nhật ngày 24 tháng 7]

Tôi đã tìm ra các vấn đề về xoay/thu phóng. Nó đòi hỏi phải sử dụng một shader; để biết chi tiết về sự phức tạp, hãy xem câu hỏi liên quan Three.js - shader code for halo effect, normals need transformation và cho ví dụ làm việc cuối cùng, xem:

http://stemkoski.github.io/Three.js/Shader-Glow.html.

Tôi rất hài lòng với kết quả cuối cùng, vì vậy tôi sẽ không cập nhật câu trả lời này nữa :)

Answer 2

Trong ví dụ bạn đang đề cập đến, tôi đã sử dụng ánh sáng màu xanh với pha trộn phụ - nếu bạn đã sử dụng màu trắng thay vì có thể sẽ tạo ra hiệu ứng bạn muốn.