Sứa biển sâu vàng óng

Tạo một trang web sứa tương tác bằng Three.js. Trên nền đại dương sáng ở trung tâm và xanh thẳm ở rìa, hiển thị 6–10 con sứa vàng trong mờ từ từ xoay và đập nhịp đi lên; luôn phải có ít nhất ba con hiển thị, và mọi con sứa vượt qua ranh giới phía trên sẽ xuất hiện lại từ phía dưới. Mỗi con sứa có các sọc tỏa tia màu cam và trắng kem, các đốm, ánh sáng từ bên trong và viền trong mờ rõ nét; có thể nhìn thấy các tay miệng xếp nếp qua chuông sứa. Khi chuông sứa co lại, mép chuông phải loe ra rõ rệt.

Mỗi con sứa gồm một lớp chuông bên trong và một lớp bên ngoài, một vạt mềm, 20 xúc tu mảnh như sợi tóc và 4 tay miệng xếp nếp. Chuông sứa co bóp theo chu kỳ, còn vạt, xúc tu và tay miệng chuyển động theo hệ vật lý lò xo Verlet ổn định — không dùng hoạt ảnh dựng sẵn. Mọi chuyển động chạy trên một đồng hồ vật lý thống nhất; giới hạn các khoảng khung hình lớn và dùng đủ số bước con để mô phỏng không bị phân kỳ hoặc trôi lệch vị trí khi chạy lâu.

Thêm hiệu ứng caustic mềm, các màn ánh sáng thể tích giả lập và sinh vật phù du lấp lánh vào nền, dựng bằng hiệu ứng bloom mềm và ánh xạ tông màu ACES để tạo cảm giác ánh sáng biển sâu. Xử lý đúng việc sắp xếp các lớp trong suốt và khử răng cưa để xúc tu luôn liền mạch, sắc nét. Khi chuột đến gần một con sứa, nhịp đập của nó tăng tốc, ánh sáng mạnh hơn và xúc tu nhận một lực đẩy nhẹ. Hỗ trợ kéo chuột để xoay góc nhìn và dùng bánh xe cuộn để thu phóng, với khoảng cách quan sát và góc nghiêng được giới hạn. Thay sứa vàng bằng 15–20 con cá nhiệt đới phát sáng màu xanh lam-lục. Giữ vật lý lò xo Verlet cho chuyển động của đuôi và vây, đồng thời cho đàn cá bơi vòng chậm qua cảnh trong khi tránh va chạm. Dùng WebGL2 với mô hình và vật liệu tạo theo thủ tục. Không dùng WebGPU, mô hình bên ngoài, âm thanh, bảng điều khiển hay chuyển đổi nhiều cảnh. Cung cấp một trang web tĩnh có thể chạy trực tiếp, với các phần phụ thuộc được đóng gói cục bộ. Tuân theo cách tiếp cận về hình ảnh và vật lý của Aurelia, đồng thời giữ lại ghi công và ghi chú giấy phép cho mọi mã và thuật toán được sử dụng; nếu tái sử dụng tác phẩm gốc hoặc thuật toán caustic của Dave Hoskins, hãy giữ lại phần ghi công giấy phép tương ứng.

Tạo một trang web sứa tương tác bằng Three.js. Trên nền đại dương sáng ở trung tâm và xanh thẳm ở rìa, hiển thị 6–10 con sứa vàng trong mờ từ từ xoay và đập nhịp đi lên; luôn phải có ít nhất ba con hiển thị, và mọi con sứa vượt qua ranh giới phía trên sẽ xuất hiện lại từ phía dưới. Mỗi con sứa có các sọc tỏa tia màu cam và trắng kem, các đốm, ánh sáng từ bên trong và viền trong mờ rõ nét; có thể nhìn thấy các tay miệng xếp nếp qua chuông sứa. Khi chuông sứa co lại, mép chuông phải loe ra rõ rệt.

Mỗi con sứa gồm một lớp chuông bên trong và một lớp bên ngoài, một vạt mềm, 20 xúc tu mảnh như sợi tóc và 4 tay miệng xếp nếp. Chuông sứa co bóp theo chu kỳ, còn vạt, xúc tu và tay miệng chuyển động theo hệ vật lý lò xo Verlet ổn định — không dùng hoạt ảnh dựng sẵn. Mọi chuyển động chạy trên một đồng hồ vật lý thống nhất; giới hạn các khoảng khung hình lớn và dùng đủ số bước con để mô phỏng không bị phân kỳ hoặc trôi lệch vị trí khi chạy lâu.

Thêm hiệu ứng caustic mềm, các màn ánh sáng thể tích giả lập và sinh vật phù du lấp lánh vào nền, dựng bằng hiệu ứng bloom mềm và ánh xạ tông màu ACES để tạo cảm giác ánh sáng biển sâu. Xử lý đúng việc sắp xếp các lớp trong suốt và khử răng cưa để xúc tu luôn liền mạch, sắc nét. Khi chuột đến gần một con sứa, nhịp đập của nó tăng tốc, ánh sáng mạnh hơn và xúc tu nhận một lực đẩy nhẹ. Hỗ trợ kéo chuột để xoay góc nhìn và dùng bánh xe cuộn để thu phóng, với khoảng cách quan sát và góc nghiêng được giới hạn. Cho phép nhấp vào từng con sứa. Khi nhấp, dừng chuyển động của nó và hiển thị thẻ thông tin gồm tên loài, độ sâu môi trường sống và hai thông tin ngắn dành cho công chúng. Dùng WebGL2 với mô hình và vật liệu tạo theo thủ tục. Không dùng WebGPU, mô hình bên ngoài, âm thanh, bảng điều khiển hay chuyển đổi nhiều cảnh. Cung cấp một trang web tĩnh có thể chạy trực tiếp, với các phần phụ thuộc được đóng gói cục bộ. Tuân theo cách tiếp cận về hình ảnh và vật lý của Aurelia, đồng thời giữ lại ghi công và ghi chú giấy phép cho mọi mã và thuật toán được sử dụng; nếu tái sử dụng tác phẩm gốc hoặc thuật toán caustic của Dave Hoskins, hãy giữ lại phần ghi công giấy phép tương ứng.