Đồ họa ảo giác 0: Giới thiệu

• Là phần nhập môn về cách tạo visual hoạt hình và game mang phong cách ảo giác, bắt đầu từ UV và tính toán màu sắc để có thể theo dõi mà không cần kiến thức nền
• Khi tô màu cho mô hình 3D, điều cốt lõi là hiểu UV mapping/texturing, tức liên kết vùng ảnh 2D với bề mặt 3D
• Tọa độ UV là hai giá trị trong khoảng 0.0~1.0 biểu thị vị trí trên texture; (0.5, 1.0) tương ứng điểm ngang 50%, dọc 100%
• Màu trong đồ họa thường được biểu diễn bằng ba giá trị RGB; nếu biến X·Y của UV thành đỏ·xanh lá, sự thay đổi tọa độ sẽ hiện thành gradient màu
• Mã ví dụ quyết định màu bằng tính toán độc lập cho từng pixel trên một mặt 3D phủ toàn màn hình, nên cần một cách tư duy khác với lập trình thông thường

---

Mục tiêu và tiền đề của loạt bài

• Loạt bài Đồ họa ảo giác bàn về cách tạo visual ảo giác có thể dùng trong hoạt hình và game
• Không yêu cầu kiến thức nền về đồ họa hay lập trình, nhưng nếu có kinh nghiệm về lượng giác và lập trình thì sẽ giúp dễ hiểu hơn
• Mục tiêu là nắm các nguyên lý cơ bản của đồ họa ảo giác được dùng trong ví dụ video
• Phần lớn video được làm bằng Blender, nhưng các kỹ thuật trong loạt bài này dễ chuyển sang môi trường khác; Blender sẽ được đề cập ở part 3
• Phần 0 và part 1 sẽ hướng tới một ví dụ chạy trên web

Mô hình 3D và UV mapping

• Mô hình 3D là bề mặt gồm các điểm và mặt

  • Đồ họa máy tính trông như 3D, nhưng khi viết mã đồ họa, nhiều khi cần nghĩ theo 2D
  • Khi tạo mô hình trong phần mềm biên tập 3D, thực chất là tạo các đỉnh (vertices), tức các điểm lơ lửng trong không gian, và các mặt (faces) nối các đỉnh đó
  • Mô hình là một bề mặt rỗng bên trong; thứ nhìn thấy trên màn hình chỉ là bề mặt
  • Gần như mọi hình khối 3D trong game và hoạt hình đều quy về các điểm và mặt như vậy
  • Ngay cả các mô hình trông mượt mà cũng thường chỉ là có đủ nhiều điểm và mặt khiến khó nhận ra ranh giới

• Texture là ảnh 2D để dán lên bề mặt 3D

  • Cách chuẩn để thêm màu cho bề mặt 3D là dùng UV mapping/texturing
  • Giống như bản đồ chiếu 2D của Trái Đất có thể bị kéo giãn hoặc méo ở một số vùng, hình ảnh trải phẳng màu sắc của mô hình 3D thành 2D cũng có thể bị biến dạng
  • Ảnh 2D đã trải phẳng này là texture, chứa màu sẽ được phủ lên bề mặt mô hình 3D sau đó
  • Một cách tạo image texture là tạo một file ảnh trống, rồi với từng mặt của đối tượng 3D, xác định phần nào của ảnh sẽ được dùng
  • Các mặt 3D khác nhau có thể chia sẻ cùng một vùng texture; với cơ thể đối xứng, cách phổ biến là chỉ tô một bên rồi gán cùng vùng đó cho cả hai bên
  • Vùng texture mà mỗi mặt sử dụng không cần có cùng kích thước hay tỉ lệ với mặt 3D thực tế

Vẽ texture và tọa độ UV

• Tô lên texture thì sẽ hiện trên mô hình

  • Mọi thứ được tô trên texture sẽ hiển thị trên mô hình 3D
  • Phần lớn phần mềm cung cấp chức năng cho phép tô trực tiếp lên mô hình 3D, và phía sau sẽ tô image texture thay cho bạn

• Tọa độ UV là vị trí 2D trên texture

  • Vùng texture được dành riêng cho từng mặt của mô hình 3D là UV map, dữ liệu liên kết một phần của image texture với mô hình 3D
  • Có thể xem UV là tọa độ 2D biểu thị vị trí trên image texture
  • Mỗi mặt 3D được định nghĩa bằng nhiều điểm; khi các điểm đó được đặt lên image texture, mỗi điểm sẽ có tọa độ UV
  • Trong (0.5, 1.0), giá trị đầu 0.5 nghĩa là điểm giữa theo chiều trái-phải, còn giá trị thứ hai 1.0 nghĩa là mép trên theo chiều dọc
  • Cả hai giá trị UV thường nằm trong khoảng 0.0 đến 1.0, và chủ yếu dùng không gian tọa độ bên trong hình vuông bao quanh bởi (0, 0) và (1, 1)
  • Dùng 0 và 1 thay vì vị trí pixel cho phép biểu diễn đã di chuyển bao nhiêu theo chiều trái-phải và trên-dưới dưới dạng tỉ lệ; nhân với 100 thì có thể hiểu như phần trăm
  • Tên thật của hai chiều là U và V; vì X·Y·Z đã được dùng cho vị trí 3D nên người ta dùng tên UV

Màu sắc và kiểu dữ liệu trong đồ họa

• RGB biểu diễn màu bằng ba giá trị

  • Màu trong đồ họa máy tính thường được biểu diễn bằng RGB, tức đỏ·xanh lá·xanh dương
  • Lượng đỏ, xanh lá và xanh dương của một màu đơn thường là các giá trị từ 0.0 đến 1.0
  • Màu đỏ được biểu diễn là (1.0, 0.0, 0.0), màu đen là (0.0, 0.0, 0.0), màu trắng là (1.0, 1.0, 1.0)
  • Cách ghi thập lục phân như 0xff0000 trong đồ họa web cũng biểu thị cùng thông tin theo một cách khác

• Nhìn UV như màu thì sẽ thấy tọa độ

  • Khi trực quan hóa tọa độ UV, theo thông lệ người ta dùng giá trị đầu tiên X làm đỏ, giá trị thứ hai Y làm xanh lá, và để xanh dương là 0.0
  • UV (0, 1) trở thành màu (0.0, 1.0, 0.0), nên nhìn là màu xanh lá
  • UV (1, 0) trở thành màu (1.0, 0.0, 0.0), nên nhìn là màu đỏ
  • Nếu tô màu một hình vuông theo vị trí UV, càng về góc trên trái thì xanh lá càng mạnh, còn góc dưới phải sẽ là đỏ
  • Góc dưới trái có cả đỏ và xanh lá đều bằng 0 nên thành đen, còn góc trên phải có cả đỏ và xanh lá nên thành vàng

• float, vec2, vec3

  • float là một số thập phân, tức số dấu phẩy động
  • vec nghĩa là vector; vec2 là cặp hai số thập phân, còn vec3 là nhóm ba số thập phân
  • Màu RGB có ba giá trị đỏ·xanh lá·xanh dương nên được biểu diễn bằng vec3
  • UV có hai giá trị X và Y nên tương ứng với vec2

Cách mã đồ họa ví dụ được thực thi

• Các ví dụ mã trong loạt bài này không dùng mô hình 3D riêng, mà dùng một mặt 3D chiếm toàn bộ màn hình
• Không thêm màu bằng image texture; thay vào đó mã trực tiếp quyết định màu trên image texture
• Luồng xử lý như sau
  • Camera của cảnh 3D tính toán mặt 3D nào đang được nhìn thấy
  • Dùng vùng texture đã dành riêng cho từng mặt, tức UV mapping, để tính tọa độ UV
  • Truyền tọa độ UV đã tính cùng các thông tin như vị trí 3D vào mã
  • Mã quyết định màu tại vị trí đó
• Có thể hiểu quá trình này diễn ra hàng triệu lần mỗi giây
• Mã đồ họa không trực tiếp vẽ một đường liên tục từ điểm này đến điểm khác trên màn hình; nó gần với việc trả lời màu của một vị trí khi vị trí đó được chọn
• Mã bạn viết không chạy chỉ một lần để tạo toàn bộ màu sắc, mà chạy cho từng pixel, tức từng phần nhỏ của màn hình
• Do có ràng buộc là không thể kiểm tra màu của các vùng màn hình khác, lập trình đồ họa đòi hỏi một cách tư duy khác dù bạn đã có kinh nghiệm lập trình thông thường
• part 1 sẽ tiếp tục với cách tạo visual thú vị trong những ràng buộc này

[GN⁺]

Ý kiến trên Hacker News

• Tôi là David Tristram. Tôi từng là thành viên sáng lập của Raster Masters, một nhóm trình diễn đồ họa máy tính những năm 1990, và như @hopkins đã nói, chúng tôi dùng các máy trạm Silicon Graphics cao cấp để tạo video tổng hợp theo nhạc sống của Grateful Dead, Herbie Hancock, Graham Nash, v.v.
  Sau nhiều lần thay đổi, hiện tôi chủ yếu làm việc trong các môi trường xử lý video 2D là Resolume Avenue và TouchDesigner. Những liên kết này đem lại cảm hứng

  • Tôi tò mò không biết các thành viên khác của Raster Masters là ai, và có những giai thoại điên rồ nào ở các buổi diễn của Grateful Dead
    Ngày nay, mỗi lần thuyết trình chỉ cắm máy chiếu vào laptop mà màn hình có hiện lên không cũng đã như gieo xúc xắc, khá căng thẳng; nên tôi cũng tò mò hồi đó để chiếu video SGI độ phân giải cao trực tiếp lên màn hình phía trên ban nhạc thì cần loại máy chiếu, hiệu chỉnh và chuẩn bị như thế nào
  • Tôi tò mò liệu có liên kết nào để xem các tác phẩm không
  • Tôi nghĩ mình đã thấy tác phẩm của họ ở vài buổi diễn của Dead khoảng năm 1992

• Nếu muốn thử nghịch đồ họa psychedelic mà không phải xuống quá thấp tầng, hydra là một lựa chọn ổn. Đây là môi trường live coding dựa trên JavaScript và đường cong học tập cũng thoải

  • Tôi tò mò liệu có cái nào hỗ trợ đầu vào âm nhạc không. Thời Winamp tôi rất thích các plugin visualization, nhưng ngày nay loại hình nghệ thuật đó có vẻ đã chết
  • dwitter.net cũng có nhiều ví dụ đồ họa psychedelic viết bằng JavaScript

• Nói về bài gốc và tọa độ UV, trước đây tôi từng khám phá rất nhiều cách dịch chuyển thú vị tọa độ texture UV cho từng đỉnh của mesh hình chữ nhật
  Thời đó tôi dùng màu theo từng đỉnh, còn nếu là ngày nay thì có lẽ sẽ dùng fragment (pixel) shader như trên ShaderToy. Một cách đặc biệt thú vị là advect tọa độ texture theo flow field. Chỉ cần dùng bất kỳ trường vector 2D nào và lặp đi lặp lại việc áp dụng dịch chuyển lên từng tọa độ. Ngay cả các phương pháp explicit không chính xác cũng cho kết quả tốt
  Khi tọa độ bị bóp méo quá xa, hình ảnh sẽ không còn nhận ra được nữa; một cách giải đơn giản là đặt cho tọa độ một lực “khôi phục” kéo chúng về vị trí ban đầu. Khi đó chúng sẽ bật trở lại vị trí cũ, giống như trải phẳng các mảnh giấy bạc gương
  Hiện tôi đang dùng feedback cùng với các hiệu ứng dịch chuyển kiểu này. Nếu lặp áp dụng các dịch chuyển rất nhỏ, chuyển động tạo ra khá giống dòng chảy chất lỏng

  • PostScript melt của Jeremy Huxtable cũng dùng cùng cách đó. Ông vốn là người tạo ra “Big Brother” Eyes của NeWS, thứ đã truyền cảm hứng cho XEyes
    Lặp lại việc chọn một hình chữ nhật bất kỳ rồi sao chép nó với offset ngẫu nhiên sẽ biến một hiệu ứng rất số hóa, vuông vức và sắc cạnh thành hiệu ứng mềm mại, hữu cơ nhờ một chút ngẫu nhiên (dithering). Nó hoạt động tốt cả với đen trắng, và rốt cuộc cũng chỉ là PostScript
    https://www.donhopkins.com/home/archive/news-tape/fun/melt/m...
    Cũng có eye.ps “Big Brother” gốc của Jeremy. Đó là một demo kinh điển hiển thị cửa sổ nhãn cầu tròn của NeWS
    https://www.donhopkins.com/home/archive/news-tape/fun/eye/ey...
  • Tôi nhớ đến niềm vui thao tác trực tiếp, đơn giản của Kai Power Goo
    LGR: Kai's Power Goo – Classic 90s Funware for PC!
    https://www.youtube.com/watch?v=xt06OSIQ0PE

• Tôi thích việc có thể dễ dàng dùng shader hoạt động trên ảnh trong HTML. Trình của tôi ở lĩnh vực này chỉ bình thường, nhưng xem người khác đẩy nó đi xa đến đâu thì rất thú vị
  Chỉ cần cung cấp một xấp xỉ depth map đơn giản thôi, kết quả đã thú vị hơn nhiều. Vài năm trước tôi từng làm một dự án dùng kỹ thuật tương tự để crossfade mượt giữa các ảnh kèm “hiệu ứng thú vị”, có bài viết và demo
  https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...

• Thành thật mà nói, bài Rolling Hills đi kèm bài này thú vị hơn nhiều
  Đặc biệt ấn tượng là đoạn ở khoảng giữa, nơi áp dụng đoạn code dưới đây lên một ảnh tĩnh
  uv.x = uv.x + sin(time + uv.x * 30.0) * 0.02;
uv.y = uv.y + sin(time + uv.y * 30.0) * 0.02;
  Với tư cách người đã trải qua nhiều trải nghiệm psychedelic, ít nhất ở liều thấp không kiểu “anh hùng”, nó trông gần với trải nghiệm thị giác thực tế nhất. Nếu làm sóng chậm hơn một chút và giảm nhẹ biên độ chuyển động thì có lẽ sẽ giống hơn
  Tôi quan tâm đến việc tái tạo ảo giác thị giác do các chất psychedelic gây ra hơn là các hiệu ứng thị giác hoành tráng cho biểu diễn. Tất nhiên tôi tôn trọng nghệ sĩ ở cả hai phía
  Có một nghệ sĩ dùng các công cụ hiện đại để tạo video psychedelic rất xuất sắc, nhưng tôi hoàn toàn không nhớ tên tài khoản. Nếu tìm ra tôi sẽ để lại bên dưới
  So với phần này của bài Rolling Hills, tôi nghĩ đến cảnh trà nấm trong Midsommar, đặc biệt là cảnh vỏ cây. Hiệu ứng các vật thể “thở” và chảy là một trải nghiệm thị giác thật sự độc đáo, và thật hay khi thấy nó được triển khai theo nhiều cách

  • Có thể không phải tài khoản được nhắc đến, nhưng kênh YouTube này tái hiện khá tốt trải nghiệm thị giác đồng thời cũng đề cập các hiệu ứng khác
    Các video khi nhìn thiên nhiên, cách các họa tiết hình học bắt đầu hình thành, và hiệu ứng “thở” đều rất mạnh. Kênh bao quát nhiều chất khác nhau, từ mức bề mặt chỉ hơi thở hoặc nhịp đập cho đến những “thế giới” hình học hoàn chỉnh do các chất như DMT tạo ra
    https://www.youtube.com/@josikinz

• Đầu những năm 90, Todd Rundgren đã phát hành ứng dụng Mac Flowfazer. Nó không mô phỏng trải nghiệm đó, nhưng giúp duy trì trạng thái dòng chảy bằng cách chuyển hướng sự chú ý sang nơi khác
  Một số người còn dùng nó như một chỉ dẫn cho sáng tác của mình
  [1] https://grokware.com/
  [2] https://m.youtube.com/watch?v=3Z4X4FmIhIw
  Khi đó là thời của trình bảo vệ màn hình và palette animation

• Nếu bạn thích những thứ kiểu này và có dịp xem Fractaled Visions phụ trách phần hình ảnh trong buổi diễn của nhạc sĩ Tipper, đó sẽ là một trải nghiệm tuyệt vời
  Đây là mô tả trực quan chính xác nhất về các artifact ảo giác mà tôi từng thấy. Tôi đã xem một buổi diễn chung của họ năm ngoái, và đó là trải nghiệm nghệ thuật tuyệt vời nhất đời tôi. Hình ảnh của Fractaled Visions phong phú và phức tạp đến mức gần như khó tin
  Dù tôi khá hiểu về lập trình shader và những thứ tương tự, một vài hiệu ứng vẫn khiến tôi nghĩ “rốt cuộc họ làm thế nào vậy”. Video set dưới đây không thể truyền tải trọn vẹn trải nghiệm, nhưng cũng cho thấy được bầu không khí. Xem ở 4K 60fps là một đẳng cấp hoàn toàn khác
  https://youtu.be/qMcqw12-eSk?si=R5mCaIbR01w3Tbyv

• Ở đây cần có liên kết ShaderToy: https://www.shadertoy.com

• Tôi nhớ đến một tác phẩm Flash kinh điển lâu đời trong lĩnh vực này, Flashback.swf. Bản render video có ở đây: https://m.youtube.com/watch?v=KaSqrx93rS0

  • Thời Flash, nhờ video này mà tôi biết đến nhóm nhạc điện tử Shpongle
    Animation này dùng bản remix Divine Moments of Truth, có lẽ là phiên bản “Russian Bootleg”. Trước đó tôi cũng đã nghe nhạc điện tử, nhưng khi lần đầu nghe thể loại nhạc điện tử này, tôi thực sự có cảm giác như đầu óc mình nổ tung

• Tuần này trong lúc làm việc, tôi đã viết WebGL shader và tinh chỉnh các chi tiết để trông giống hiệu ứng camera vật lý
  Nhưng thỉnh thoảng, khi tôi làm sai thứ gì đó, kết quả lại giống những gì trong bài này, và nói thật là thú vị hơn nhiều so với các hiệu ứng hình ảnh tiêu chuẩn
  Có thể các trường hợp dùng được về mặt thị giác khá hạn chế, nhưng việc nghịch với những mô hình mà chúng ta tạo ra về cách đồ họa máy tính hoạt động là một cách rất tốt để học từng hệ thống. Không chỉ đồ họa, bạn còn có thể học cả toán cơ bản của lập trình, cách GPU hoạt động và kết nối với bộ nhớ/CPU, cách mắt hoạt động, cũng như cách xử lý animation và thời gian