(sim) Viết shader cho Sphere ở Vegas

 (whenistheweekend.com)
1 điểm bởi GN⁺ 2023-12-01 | 1 bình luận | Chia sẻ qua WhatsApp
  • Trang The Sphere cho thấy cách tính màu trên bề mặt khối cầu bằng 5 ví dụ và các đoạn shader GLSL
  • Đầu vào của shader gồm time, vUv, vNormal, trong đó thời gian và tọa độ UV là trung tâm của sự thay đổi màu sắc
  • main() đưa vec4(...) vào gl_FragColor để tính màu cuối cùng của từng pixel
  • Giá trị RGB được tạo dựa trên cos(time + vUv.xyx + vec3(0., 2., 4.)), thể hiện sự thay đổi theo thời gian
  • vNormal đã được khai báo nhưng không được dùng trong đoạn mã được cung cấp, nên hiện không ảnh hưởng đến việc tính màu

Cấu trúc trang The Sphere

  • Tiêu đề là The Sphere
  • Phần nội dung có đánh dấu ví dụ từ example 1 đến example 5
  • Tiếp theo là đoạn mã shader có vẻ được viết bằng GLSL

Luồng mã shader GLSL

  • Có ba biến đầu vào là time, vUv, vNormal
    • time là uniform float
    • vUv là varying vec2
    • vNormal là varying vec3
  • Hàm main() thiết lập gl_FragColor
  • Màu được tính theo dạng 0.5 + 0.5 * cos(...)
  • Đầu vào của cos() đồng thời gồm giá trị thời gian, vUv.xyx, vec3(0., 2., 4.)
  • Giá trị alpha được cố định là 1.

Bài viết liên quan

1 bình luận

 
GN⁺ 2023-12-01
Ý kiến trên Hacker News

  • Đã làm cho hiệu ứng Matrix chạy được
    Tôi đã thử chỉnh UV để phần trên của hình cầu hiện ra rồi bỏ cuộc, nhưng các uniform của three.js là projectionMatrix và modelViewMatrix chỉ cần khai báo ở đầu GLSL là có thể tham chiếu được

  • Đã tạo một lát gạch Penrose tĩnh: https://gist.github.com/vjeranc/265db912d4004c7c0b0f16ae5fda...
    Vì hình cầu không vô hạn nên dùng lát gạch không tuần hoàn không có ý nghĩa thực tiễn, nhưng nhìn vẫn đẹp
    Tôi vẫn chưa biết liệu có một bộ gạch tương tự, hoặc một viên gạch đơn, có thể lát một hình nón vô hạn hay không

    • Nếu là gạch vật lý thì có vẻ không thể vì độ cong không khớp
      Vẫn còn những câu hỏi thú vị, nhưng chưa đủ rõ phép chiếu nào là có ý nghĩa nên khó đào sâu thêm
    • Hiển thị hình cầu di chuyển chậm giữa một mặt phẳng lát gạch không tuần hoàn vô hạn cũng có vẻ thú vị

  • Hơi lạc đề một chút, nhưng điều hấp dẫn là The Sphere thực sự là một dự án kỹ thuật lớn đến mức nào
    Bao gồm mọi thứ từ chính kết cấu công trình, đồng bộ hàng nghìn tấm LED bên trong và bên ngoài hình cầu, làm mát trong cái nóng Las Vegas, cho tới giữ cho 18.000 ghế bên trong đủ mát và thông gió tốt
    Ngay cả nhiều tòa nhà văn phòng bình thường cũng không thông gió đúng cách

    • Bao nhiêu công sức và tài nguyên đó cuối cùng cũng chỉ để giữ thêm nhiều ánh mắt dán vào quảng cáo
    • Nghe nói bên trong Sphere còn có thể tạo gió lạnh cho hiệu ứng đặc biệt, thật sự rất ngầu

  • Tôi đã thử tạo một smiley.frag đơn giản: https://gist.github.com/nickbarth/4ec5147bd1288fd2bcfc4c5b46...

  • Dự án rất hay
    Nếu mỗi đoạn code có URL riêng thì sẽ dễ chia sẻ hơn. Nhúng code vào trong URL cũng có vẻ ổn

  • Tôi đã tạo một shader mặt cười lớn
    Đây là mã GLSL dùng sdRing để tạo miệng, tận dụng đối xứng trái-phải để xử lý hai mắt cùng lúc, rồi xuất ra màu vàng

  • Lần đầu thử nghịch shader và tôi đã làm một quả dưa hấu xoay
    Tôi hiểu đại khái cách xử lý tuple RGB, fract() trông giống phép lấy phần dư, rồi bình phương và cộng các giá trị đó để tạo những dải mềm, nhưng vẫn chưa rõ chính xác shader hoạt động thế nào, vUv là gì, và gl_FragColor được gán vào đâu

    • GPU nhận các đối tượng trong không gian mô hình, tức danh sách các đỉnh tam giác và vị trí camera, cùng với vertex shader để chuyển chúng sang không gian màn hình
      Sau đó nó chia tam giác thành các mảnh, tức pixel, và chạy fragment shader cho từng mảnh
      Ở đây đầu vào là uniform time, có cùng giá trị cho mọi mảnh, và vUv, được xuất ra từ vertex rồi nội suy tuyến tính bên trong tam giác; vUv tương ứng với tọa độ pixel trên hình cầu
      gl_FragColor là đầu ra màu RGBA sẽ được áp dụng cho mảnh đó
      Với shader trong game thông thường hoặc Google Earth thì còn có thêm texturing và ánh sáng; mô hình thực thi của GPU trông như đang lập trình từng pixel một, nhưng thực ra là SIMT, nên NVIDIA xử lý đồng thời 32 pixel, AMD xử lý 64 pixel
      Có thể xem các câu lệnh điều kiện phần lớn được chuyển thành phép toán có điều kiện chạy cả hai nhánh
    • Đây là kiểu chạy code cho mọi pixel trên canvas
      Có lẽ bạn cũng sẽ thích https://www.shadertoy.com/

  • Các shader ở https://www.glslsandbox.com cũng đáng xem
    Tuy nhiên ở đó những người thiếu chín chắn thường đăng shader NSFW, và có vẻ quản trị viên không kiểm duyệt quá kỹ, nên cần chú ý

    • Tạo cơ thể bằng vài trăm dòng GLSL đã đáng nể, nhưng dựng một cảnh orgy chỉ bằng 11 dòng thì lại ở một đẳng cấp khác
      Tò mò không biết độ phức tạp Kolmogorov của “nội dung GLSL NSFW” là cỡ nào
      https://www.glslsandbox.com/e#108133.0
    • Đây là thiên tài thuần túy
      NSFW: https://www.glslsandbox.com/e#108230.3
      Trong chú thích code còn để lại các prompt kiểu bảo ChatGPT làm cơ thể béo hơn, thêm các đường cuộn ở nền, đổi màu, và thêm một số bộ phận cơ thể nhất định
    • Dù sao cũng đã khá hơn nhiều so với những người từng đăng chữ thập ngoặc ở đó

  • Rất hay
    Nhìn vào giải pháp mà ai đó đã đóng góp cho dự án isocity của tôi, nó cho phép chia sẻ thành phố đã tạo bằng URL
    Có vẻ có thể triển khai một cách tương tự: https://github.com/victorqribeiro/isocity/commit/c6588171e37...

  • The Sphere có vẻ sẽ là một địa điểm tuyệt vời để tổ chức demo party
    https://en.wikipedia.org/wiki/Demoscene#Parties