Đồ họa Psychedelic 0: Giới thiệu

Psychedelic Graphics 0: Giới thiệu

• Loạt bài này giới thiệu cách tạo ra hình ảnh psychedelic cho hoạt hình và trò chơi. Nội dung được xây dựng để có thể hiểu được ngay cả khi không có kiến thức nền về đồ họa hay lập trình. Nếu có kiến thức cơ bản về lượng giác và lập trình thì sẽ hữu ích hơn.
• Hy vọng qua loạt bài này, bạn có thể hiểu được những nền tảng cơ bản của đồ họa psychedelic được sử dụng trong video. Phần lớn video được tạo bằng Blender, nhưng các kỹ thuật được dạy trong loạt bài này có thể dễ dàng chuyển đổi sang công cụ khác, và sau này sẽ đi sâu hơn vào Blender.

UV là gì?

Mô hình 3D

• Đồ họa máy tính thường trông như là 3D, nhưng khi viết mã đồ họa thì ta thường phải suy nghĩ theo 2D. Nếu bạn đã tạo ra một hình dạng đẹp trong phần mềm mô hình hóa 3D, thì thực ra bạn đã tạo các điểm (đỉnh) lơ lửng trong không gian và nối một số điểm lại để tạo thành hình khối (mặt).
• Mô hình 3D phần lớn là rỗng, và chúng ta chỉ có thể nhìn thấy bề mặt. Cách tiêu chuẩn để tô màu cho mô hình 3D là UV mapping/texturing. Cũng giống như hình chiếu 2D của Trái Đất trông hơi bị kéo giãn và nén lại, màu sắc của mô hình 3D khi được chiếu xuống 2D cũng có cảm giác tương tự.

Vẽ texture

• Khi vẽ texture, nó sẽ xuất hiện trên mô hình 3D. Hầu hết phần mềm cho phép tô trực tiếp lên mô hình 3D để tô màu cho image texture.

Tọa độ UV

• Có thể hiểu UV là vị trí, tức là tọa độ 2D. Tọa độ UV được định nghĩa bằng không gian từ (0, 0) đến (1, 1). UV map là dữ liệu kết nối image texture màu với các mặt của mô hình 3D.

Cách mã đồ họa hoạt động

Màu sắc trong đồ họa

• Màu sắc trong đồ họa máy tính thường được biểu diễn bằng RGB. Bằng cách trộn đỏ, xanh lá và xanh dương, ta có thể tạo ra gần như mọi màu mà con người có thể nhận biết. Trong đồ họa máy tính, lượng đỏ, xanh lá và xanh dương thường nằm trong khoảng từ 0.0 đến 1.0.

Màu của UV

• Tọa độ UV được chuyển thành màu để hỗ trợ trực quan hóa và khắc phục sự cố. Giá trị đầu tiên của UV (giá trị X) được dùng làm màu đỏ, giá trị thứ hai (giá trị Y) được dùng làm màu xanh lá.

Số thực dấu chấm động và vector vec2, vec3

• float là một số thập phân đơn. vec có nghĩa là vector; vec2 gồm hai số thập phân, còn vec3 gồm ba số thập phân.

Cấu trúc của chương trình đồ họa

• Đồ họa phải được điều khiển theo cách phân tán. Không phải là mã chạy một lần để tạo ra toàn bộ màu sắc, mà là được chạy hàng triệu lần cho từng phần rất nhỏ của màn hình. Nếu bạn có kinh nghiệm lập trình, đây là một cách tư duy rất khác.

• Giờ thì đã sẵn sàng để bắt đầu phần 1. Ở phần 1, bạn sẽ thấy cách tạo ra những hình ảnh thú vị bất chấp các điều kiện ràng buộc này.

[GN⁺]

Ý kiến trên Hacker News

• David Tristram là thành viên sáng lập của Raster Masters, một nhóm biểu diễn đồ họa máy tính từ thập niên 1990, đã dùng các máy trạm Silicon Graphics để tạo ra hình ảnh tổng hợp đồng bộ với nhạc sống của Grateful Dead, Herbie Hancock, Graham Nash và nhiều nghệ sĩ khác

  • Hiện nay ông chủ yếu làm việc trong môi trường xử lý video 2D bằng Resolume Avenue và TouchDesigner
  • Hydra là một môi trường live coding dựa trên JavaScript rất hay để thử nghiệm đồ họa ảo giác mà không cần đi xuống mức quá thấp

• Trước đây ông từng nghiên cứu cách biến đổi tọa độ texture UV, còn hiện tại thì dùng fragment shader kiểu như trên ShaderToy

  • Quá trình dịch chuyển tọa độ texture theo flow field rất thú vị
  • Cũng có một cách đơn giản để áp dụng lực “phục hồi” nhằm đưa tọa độ quay lại vị trí ban đầu
  • Kết hợp feedback và hiệu ứng dịch chuyển để tạo ra chuyển động giống như dòng chảy chất lỏng

• Việc viết shader để xử lý hình ảnh trong HTML thật tuyệt vì khá dễ

  • Chỉ với một phép xấp xỉ đơn giản của depth map cũng có thể tạo ra kết quả thú vị
  • Trước đây ông từng thực hiện một dự án dùng WebGL để làm mượt hiệu ứng crossfade giữa các hình ảnh

• Ông rất quan tâm đến việc tái hiện trực quan các trải nghiệm ảo giác

  • Bài viết Rolling Hills giải thích cách tái hiện các ảo giác thị giác
  • Có những nghệ sĩ triển khai hình ảnh ảo giác rất tốt bằng công nghệ hiện đại

• Todd Rundgren đã phát triển một ứng dụng Mac tên là Flowfazer vào đầu thập niên 1990, nhằm giúp người dùng tìm cảm hứng sáng tạo

• Các buổi biểu diễn của Tipper và Fractaled Visions là một trong những mô tả chính xác nhất về hình ảnh ảo giác

  • Hình ảnh của Fractaled Vision phức tạp và phong phú đến mức gây kinh ngạc

• Khi viết WebGL shader, ông đang cố gắng triển khai các hiệu ứng camera vật lý

  • Điều đó giúp nâng cao hiểu biết về đồ họa, toán học, GPU, bộ nhớ, CPU, hoạt ảnh và xử lý thời gian

• Nghiên cứu của Jim Crutchfield về hệ thống video feedback cung cấp một hệ thống thực nghiệm hữu ích để nghiên cứu các động lực không gian và thời gian phức tạp