Bộ phim hoạt hình được tạo trong 8kB
(ctrl-alt-test.fr)- Nhóm Ctrl-Alt-Test bắt đầu thử nghiệm từ tháng 11/2022 để đưa một demo thời gian thực trông như phim hoạt hình ngắn vào trong 8kB, và công bố The Sheep and the Flower vào tháng 4/2023
- Thành quả là một tệp
.exeduy nhất tạo ra đồ họa và âm nhạc mà không cần tệp tài nguyên hay phụ thuộc bên ngoài; các cảnh được tính toán thời gian thực trên GPU bằng GLSL shader và raymarching - Con cừu, biển báo, camera và timeline không phải là model hay texture được lưu sẵn, mà được cấu thành từ SDF, texture 3D thủ tục và các tham số thời gian hardcode; khoảng 25 cảnh quay camera được tinh chỉnh thủ công
- Âm nhạc được tạo bằng OpenMPT và 4klang; số lượng nhạc cụ được giảm từ 16 xuống 13 và tăng phần lặp lại để nâng hiệu quả nén
- Tệp 8kB cuối cùng có được nhờ nén Crinkler và các cải tiến Shader Minifier; mã shader 42kB sau khi thu gọn và nén vừa trong khoảng 5kB, chừa chỗ cho âm nhạc và mã C++
Một tệp thực thi duy nhất nằm trong 8kB
- The Sheep and the Flower là một hoạt hình thời gian thực dưới dạng tệp thực thi Windows, được công bố vào tháng 4/2023
- Một tệp
.exeduy nhất tạo ra mọi thứ, không có tệp tài nguyên riêng hay phụ thuộc bên ngoài- Cần Windows và driver mới để chạy
- Mục tiêu là đưa toàn bộ đồ họa, hoạt hình, dàn dựng, chuyển động camera và âm nhạc vào trong 8kB
- Mã nguồn được công bố trên GitHub: ctrl-alt-test/mouton
Các công cụ dùng cho đồ họa, âm nhạc và nén
- Tất cả yếu tố hình ảnh được tính toán thời gian thực trên GPU
- GLSL shader bao gồm cả thông tin timeline, thiết lập camera và biểu diễn cảnh
- Việc render được thực hiện bằng raymarching
- Shader được thu gọn bằng Shader Minifier
- Âm nhạc được tạo bằng OpenMPT và synthesizer 4klang
- Nhạc cụ được mô tả theo thủ tục
- Danh sách nốt nhạc được nén
- Mã được viết bằng C++ trong Visual Studio 2022
- Cờ compiler và phần khởi tạo bắt đầu dựa trên framework Leviathan
- Tệp thực thi cuối cùng được nén bằng Crinkler
Vì sao là 8kB
- Trong demoscene, các hạng mục giới hạn kích thước như 4kB và 64kB khá phổ biến
- Các tác phẩm trước đây chủ yếu nhắm đến 64kB, nhưng 8kB đem lại những ràng buộc và quy tắc hoàn toàn khác
- Kỹ thuật intro 4kB rất thú vị, nhưng được xem là quá hạn chế cho kể chuyện đúng nghĩa
- Revision demoparty đã thêm hạng mục thi 8kB vài năm trước, và nhóm xem đây là cơ hội tốt để thử nghiệm
Vẽ cả thế giới bằng hai tam giác
- Giống phương pháp được dùng như chuẩn trong demoscene từ sau năm 2008, họ vẽ một hình chữ nhật phủ toàn màn hình bằng hai tam giác
- Trên hình chữ nhật này, GLSL shader tính màu cho từng pixel và từng frame
- Hàm shader nhận tọa độ và thời gian làm đầu vào, rồi trả về màu sắc
- Thách thức cốt lõi là làm sao biểu diễn con cừu và toàn bộ cảnh trong hàm này
Dựng cảnh bằng SDF
- Signed distance field (SDF) là hàm tính khoảng cách từ một điểm trong không gian đến vật thể gần nhất
- Trên bề mặt, nó trả về 0
- Bên trong vật thể, nó trả về giá trị âm
- Các hình cơ bản như hình cầu hay hình hộp có thể được biểu diễn bằng công thức đơn giản
- Cảnh được dựng bằng cách kết hợp nhiều trường khoảng cách
- Hợp của hai vật thể có thể tạo bằng giá trị nhỏ nhất của khoảng cách
- Giao có thể tạo bằng giá trị lớn nhất
- Dùng smooth union có thể tạo hình dạng hữu cơ hơn
- Con cừu được tạo bằng cách lắp ghép và hợp nhất các hình đơn giản như hình nón, hình cầu; phần thân và lông được cấu thành bằng hàm noise 3D
Cách raymarching quyết định pixel
- Raymarching là kỹ thuật render dùng SDF để tiến tia từng bước trong cảnh 3D
- Không tính trực tiếp giao điểm bằng toán học như ray tracing truyền thống
- SDF cho biết có thể di chuyển bao xa mà không va chạm, rồi lặp lại quá trình tiến tia thêm từng đó
- Khi khoảng cách trở thành 0 hoặc gần 0, xem như đã tìm được giao điểm
- Khi có giao điểm, có thể biết pixel hiện tại tương ứng với con cừu, bầu trời hay vật thể khác
- Chiếu sáng cần pháp tuyến bề mặt, và pháp tuyến được ước lượng bằng cách tính độ dốc xung quanh
- Bóng được tính bằng cách bắn một tia khác từ giao điểm về phía mặt trời để kiểm tra có vật thể ở giữa hay không
Cách truyền tải câu chuyện với khả năng biểu đạt nhỏ
- Demo không có giọng nói hay chữ, và chỉ có một nhân vật
- Con cừu chỉ có thể đi bộ, cử động đầu và mắt ở mức cơ bản, thậm chí không thể xoay người
- Để truyền tải cảm xúc trong các ràng buộc này, họ loại bỏ những yếu tố không liên quan đến câu chuyện
- Ban đầu từng nghĩ đến sa mạc, cồn cát và bầu trời, nhưng đánh giá là không cần cho câu chuyện
- Nền được giữ trắng tinh
- Giảm texture, ngoại trừ biển báo và đôi mắt dùng để truyền đạt ý nghĩa
- Giữ phạm vi nhỏ để tập trung vào chi tiết, đánh bóng, camera work, dựng phim và đồng bộ âm nhạc
- Mỗi shot được dựng thủ công, và hoạt hình được tinh chỉnh lặp lại nhiều lần để dòng chảy có cảm giác tự nhiên
Camera và dàn dựng
- Camera được dùng như công cụ kể chuyện
- Ở cảnh con cừu lang thang trong thời gian dài, dùng wide shot để tạo cảm giác cô độc
- Khoảnh khắc nó nhận ra biển báo, dùng extreme close-up vào mắt
- Khi con cừu nhìn biển báo, camera zoom chậm về phía đầu để tăng sự tập trung
- Sự phấn khích của con cừu được truyền tải bằng cách chồng nhiều biểu đạt lên nhau
- Hiệu ứng 2D kiểu hoạt hình
- Bước đi nhanh hơn
- Chuyển động đuôi được nhấn mạnh
- Lắc đầu phóng đại
- Thay đổi kịch tính trong âm nhạc
Cách phát triển để lặp nhanh
- Mã nguồn chứa nhiều hằng số hardcode
- Kích thước mắt của cừu
- Tốc độ di chuyển camera
- Độ dài từng shot
- Các giá trị như màu của hoa được điều chỉnh lặp đi lặp lại
- Để có phản hồi nhanh, shader được biên dịch lại lúc runtime và cập nhật đồ họa trong vòng 1 giây
- Cần một player để điều chỉnh hoạt hình và camera
- Tạm dừng
- Phát
- Điều khiển thời gian
- Kiểm tra ngay sau khi live reload shader
- Hỗ trợ âm nhạc cũng là bắt buộc để đồng bộ chính xác âm nhạc và hoạt hình
- Prototype ban đầu được tạo trên Shadertoy, sau đó chuyển qua KodeLife rồi sang dự án C++
Âm nhạc tạo bằng 4klang
- Âm nhạc là yếu tố quan trọng trong kể chuyện, cần nhiều sắc thái và các chuyển đổi ở những thời điểm cụ thể
- Họ dùng nguyên công cụ dành cho intro 4kB, nhưng phân bổ thêm dung lượng cho cấu trúc phức tạp hơn
- 4klang synthesizer cung cấp plugin dùng được trong phần mềm âm nhạc và xuất ra tệp assembly
- Tệp assembly này được biên dịch và liên kết cùng demo
- Khi chạy demo, synth tạo âm thanh dạng sóng theo thủ tục trong một thread riêng và gửi tới sound card
- Bản nhạc đầu tiên lớn hơn dự kiến, nên họ trải qua nhiều chỉnh sửa để giảm kích thước
- Giảm số nhạc cụ từ 16 xuống 13
- Soạn lại chủ đề kết thúc để khớp với tempo của toàn bộ bản nhạc
- Tăng phần lặp lại để nén tốt hơn
- Cải thiện tỷ lệ nén bằng những thay đổi gần như không nghe thấy, như độ dài nốt ở phần nền
- Họ giữ cấu trúc tổng thể của âm nhạc, đồng thời giảm tối thiểu mất mát chất lượng và tiết kiệm dung lượng
Hoạt hình và đồng bộ thời gian
- Demo đánh giá lại mọi thứ ở từng frame, không có tính toán trước hay cache
- Điều này bất lợi cho hiệu năng, nhưng có lợi cho hoạt hình vì mọi yếu tố đều có thể thay đổi theo thời gian
- Toàn bộ demo gồm khoảng 25 shot camera được làm thủ công
- Mỗi shot mô tả cách 18 tham số thay đổi theo thời gian
- Vị trí của từng vật thể
- Trạng thái của con cừu
- Vị trí camera
- Tiêu điểm
- Đối tượng mà camera nhìn vào, v.v.
- Ví dụ, chỉ một dòng
camPos = vec3(22., 2., time*0.6-10.);đã biểu diễn chuyển động tuyến tính của camera trong shot timekhông phải thời gian tuyệt đối kể từ lúc demo bắt đầu, mà là thời gian kể từ lúc shot bắt đầu- Nhờ vậy, việc chèn, xóa hay chỉnh shot ít ảnh hưởng đến phần còn lại của demo hơn
- Nội suy tuyến tính đơn giản có thể trông máy móc, nên trong nhiều trường hợp họ dùng smoothstep
- Mã timeline nằm trong vertex shader
- Định nghĩa shot có nhiều mã lặp lại, nhưng sự lặp lại lại có lợi cho nén
Texture và vật liệu
- Trong renderer truyền thống, texture 2D được phủ lên bề mặt model 3D
- Với raymarching, khó tính tọa độ texture một cách dễ dàng, nên thay vào đó họ tính texture 3D tại chỗ
- Khi raymarcher tìm được vị trí 3D cần render, tọa độ 3D đó được truyền vào hàm texture
- Biển báo giao thông được tạo bằng toán học để vẽ viền tam giác hoặc vuông, còn nội dung bên trong được vẽ bằng cách kết hợp nhiều hàm
- Biểu tượng nhà hàng gồm 4 hình elip đen và 2 hình trắng tạo rãnh
- Để đa dạng hình ảnh, họ không chỉ thiết lập texture mà còn cả vật liệu khác nhau
- Ví dụ, móng của con cừu được xử lý để có phản xạ khác bằng hệ số Fresnel
Phản chiếu giả để làm đôi mắt sống động
- Trong một thời gian dài khi phát triển, đôi mắt trông thiếu sức sống và phẳng
- Đôi mắt là yếu tố quan trọng trong thiết kế nhân vật và kể chuyện
- Từ ảnh tham khảo nhân vật hoạt hình, họ nhận thấy mống mắt xuất hiện nhiều nhưng không bắt buộc, còn đồng tử thường được vẽ lớn
- Để tạo đôi mắt lấp lánh, cần có phản chiếu ánh sáng trong mắt
- Với phương trình chiếu sáng hiện có, phản chiếu chỉ xuất hiện khi mặt trời và camera ở những vị trí nhất định
- Để bổ sung, họ chỉnh vector pháp tuyến bề mặt nhằm tăng xác suất có phản chiếu mặt trời
- Ngoài ra còn dùng environment mapping
- Thông thường trong game, kỹ thuật này dùng để đơn giản hóa và tối ưu phản chiếu môi trường thật
- Ở đây thế giới thực tế gần như trắng hoàn toàn, nên họ thêm chi tiết giả bằng texture
- Lòng trắng và đồng tử của mắt chứa phản chiếu phức tạp hơn nhiều so với thế giới trống rỗng
- Nhiều nguồn sáng giả
- Gradient mô phỏng mặt đất tối và bầu trời xanh
Hậu kỳ và phong cách hình ảnh
- Bầu không khí cuối cùng và chất lượng hình ảnh được tinh chỉnh bằng hậu kỳ
- Các bước hậu kỳ được dùng gồm
- Color grading
- Hiệu chỉnh gamma
- Vignette nhẹ
- Bộ lọc FXAA 2-pass để giảm aliasing
- Một số hiệu ứng cũng được triển khai ở bước hậu kỳ, như hiệu ứng ngôi sao trong mắt hoặc hiệu ứng màn hình kết thúc
- Các hiệu ứng này hoàn toàn là 2D và không tồn tại trong thế giới 3D
- Từng có lúc họ thử phong cách hoạt hình cũ
- Phát hiện đường viền để trông như vẽ tay
- Render đen trắng
- Grain và noise
- Sau khi thảo luận, họ bỏ thử nghiệm này và tập trung vào vẻ ngoài sạch hơn, hiện đại hơn
Nén Crinkler
- Ý tưởng cốt lõi là không lưu dữ liệu, mà lưu mã tạo ra dữ liệu
- Âm nhạc lưu danh sách nốt cần phát và danh sách lệnh của từng nhạc cụ
- Crinkler là công cụ nén được thiết kế cho demoscene và các intro 1kB–8kB
- Tệp thực thi cần có khả năng tự giải nén, nên Crinkler bao gồm một đoạn mã assembly nhỏ có thể giải nén phần còn lại của tệp thực thi
- Crinkler ưu tiên tối ưu kích thước
- Thuật toán nén tốn thời gian
- Giải nén tương đối chậm
- Dùng hàng trăm MB RAM
- Tuy nhiên chỉ Crinkler là chưa đủ, cần thu gọn thêm để đưa 42kB mã nguồn shader vào trong tệp thực thi
Cải tiến Shader Minifier
- Mã nguồn shader được đưa vào binary cuối cùng, nên cần nhỏ nhất có thể
- Có thể thu gọn bằng tay, nhưng sẽ gây vấn đề cho bảo trì và lặp nhanh
- Shader Minifier là công cụ thu gọn shader được phát triển từ năm 2011
- Nó loại bỏ khoảng trắng và comment, rút ngắn tên biến và thực hiện nhiều phép biến đổi hơn
- Intro 8kB chứa nhiều mã hơn hẳn 4kB, tạo ra vấn đề mới; nhóm đã tạm dừng làm demo trong một tháng để thêm các tính năng cần thiết
- Để thu gọn tốt, không chỉ cần một minifier đơn giản mà cần một source-to-source compiler tương tự Closure Compiler
- Các phép biến đổi Shader Minifier thực hiện gồm
- Đổi tên biến và hàm
- Inline biến
- Đánh giá biểu thức số học hằng
- Inline hàm
- Loại bỏ mã chết
- Gộp khai báo
- Chỉ giảm kích thước bản thân mã là chưa đủ, còn cần đầu ra thân thiện với nén
- Một số phép biến đổi làm giảm kích thước mã nhưng có thể làm tăng kích thước sau nén
- Trong quá trình phát triển demo lặp đi lặp lại, họ phải liên tục kiểm tra kích thước sau nén
- Các cải tiến Shader Minifier mới giúp tiết kiệm khoảng 600 byte trong binary đã nén
- Cuối cùng, mã shader 42kB sau thu gọn và nén nằm trong khoảng 5kB
- Phần dung lượng còn lại chứa âm nhạc và mã C++
Kết quả xây trên công việc của người khác
- Demo này được tạo dựa trên công việc của những người khác, như kỹ thuật raymarching, phần mềm tạo nhạc và thuật toán nén
- Nhóm kỳ vọng các tính năng mới được thêm vào Shader Minifier sẽ giúp tạo ra những demo tốt hơn trong tương lai
- Họ cũng kỳ vọng hạng mục 8kB đem lại nhiều khả năng hơn 4kB và sẽ trở nên phổ biến hơn
- Để so sánh, văn bản gốc dài khoảng 21.000 ký tự, và nếu giữ nguyên sẽ cần 21kB
1 bình luận
Ý kiến trên Hacker News
Tôi là người làm ra bộ phim gốc đã truyền cảm hứng cho phim này: https://www.youtube.com/watch?v=khWXdkryBE4
Bản gốc chỉ riêng Blender, SVG và các file âm thanh đã ở mức MB, nên việc bản remake nằm gọn trong 8kB thật sự rất ấn tượng
Thật vui khi thấy giấy phép Creative Commons thực sự hữu dụng, chỉ tiếc là nếu họ dùng cùng nhân vật nhím và giai điệu âm thanh thì còn hay hơn
Sloot đã sống lại!!!
https://en.m.wikipedia.org/wiki/Sloot_Digital_Coding_System
Tập hợp một đống demoscener, cho họ xem phim, rồi nhốt họ một thời gian trong căn phòng có máy tính
Cách này hoạt động tốt hơn nếu có màn hình lớn, hệ thống âm thanh lớn, bia và đồ ăn vặt; sau đó chỉ việc nhận file thực thi kết quả
aTrình thông dịch viết bằng Rust để đạt hiệu năng sẽ đánh giá lệnh
avà in ra STDOUT một payload cụ thể được nhúng trong runtimeQuả là vận rủi khủng khiếp cho tất cả mọi người
Có lẽ họ đã không hiểu rằng a) đó là hàm một chiều và b) ngay cả nếu không phải một chiều, nhiều đầu vào vẫn có thể ánh xạ tới cùng một giá trị băm
Video demoscene khá thú vị nhưng ít được biết đến một cách vô lý
https://www.youtube.com/playlist?list=PLRQwR4-_0PR9HBI_GZs1nTn7q5LTkGeCN
Ước gì có một kênh giải thích bên trong bằng tư liệu trực quan tốt, kiểu như retro game mechanics
Hồi chưa có video, phải chờ khá lâu cho quá trình giải nén và xử lý rồi mới được thán phục hoặc thất vọng
Ngày xưa tôi xem rất nhiều demo vào giờ nghỉ, và chúng là phông nền hoàn hảo cho trạng thái tinh thần của tôi khi đó
https://en.wikipedia.org/wiki/.kkrieger
Xa hơn nữa, ta có thể tạo ra một thế giới gồm các tác nhân thông minh tương tác với nhau nhỏ đến đâu?
Tái bút: những người downvote, các bạn không mơ mộng sao? Phía trước còn rất nhiều thứ điên rồ và kỳ ảo đang chờ
Tôi biết công nghệ phía sau khá khác, nhưng nó làm tôi nhớ đến .kkrieger ngày xưa. Họ đã nén cả một FPS 3D xuống 96k, thật sự rất ngầu
https://en.m.wikipedia.org/wiki/.kkrieger
Khi xem nhiều demoscene và đọc về cách chúng được làm, bạn sẽ hiểu các giới hạn, và rõ ràng là những yếu tố như con cừu, đặc biệt là các tiết diện hình nón ở chân, có thể được biểu diễn bằng các phương trình rất nén và được hoạt họa tương tự
Nhưng theo tôi biết, phần lớn demo dựa vào GPU và khả năng tăng tốc 3D mạnh, trong khi demo 2D phong cách anime Nhật Bản dường như hiếm hoặc hầu như không có ở dung lượng nhỏ
Thực ra hoạt hình 3D có dễ hơn không?
Nói thêm, “mouton” trong tiếng Pháp nghĩa là “cừu”, vì vậy mới có “mutton”
Trong khi đó, cách “toán học” để lưu hoạt hình kiểu 2D phần lớn chỉ là lưu đường viền dưới dạng các đường cong SVG, rồi dùng thuật toán tô vùng cho phần màu
Tính sơ sơ thì một cung cong đơn lẻ hoặc một đường thẳng đã có thể tốn không gian lưu trữ ngang với mô tả cả một khối hình học, và nếu còn phải lưu cả hoạt ảnh của các đường cong đó thì sẽ cần nhiều không gian hơn hẳn so với các ma trận biến đổi nhỏ của khối 3D
Độ phức tạp của thuật toán dựng hình có lẽ cũng tăng, cả về độ phức tạp thuật toán thực tế lẫn độ phức tạp không gian
Lưu ý: nếu lưu nhiều bitmap rồi phát như flipbook, về mặt nào đó cũng có thể gọi là “toán học” nếu dùng thuật toán giải nén thủ tục để tạo toàn bộ khung hình từ phần sai khác
Nhưng tôi không thấy có cách như vậy tồn tại, và yêu cầu không gian của nó sẽ rất lớn so với mô tả khối 3D
Lớn hơn 8kB một chút, nhưng nếu bạn thích những phim hoạt hình u ám bất ngờ về cừu, tôi khuyên xem open movie Cosmos Laundromat của Blender Foundation
Phim của quỹ này lúc nào cũng u ám một cách kỳ lạ so với tư cách demo công nghệ, nhưng tôi thấy tác phẩm này đặc biệt hay
[0] https://www.youtube.com/watch?v=Y-rmzh0PI3c
Cảnh báo trước: bộ phim kết thúc bằng “to be continued”, và trang Wikipedia có ghi như sau:
“Bộ phim này ban đầu được dự định là điểm khởi đầu cho một phim dài. Phần tiếp theo dạng phim ngắn đã có kịch bản và thiết kế, nhưng chưa bao giờ đi vào sản xuất. Năm 2020, [nhà sản xuất] tuyên bố rằng một phim này sẽ là toàn bộ dự án”
Nếu không muốn chịu cảm giác thất vọng vì mãi mãi không được xem cái kết của một ý tưởng thú vị, có lẽ nên bỏ qua
Nó từng hữu ích khi thử nghiệm HDR trong DaVinci Resolve
[1] https://opencontent.netflix.com/#h.uyzoa2bivz2j
8KB là một hạng mục trong demoscene. Trên Pouet có một chỉ mục sắp xếp khá tốt các tác phẩm kiểu này
0. https://www.pouet.net/prodlist.php?type%5B%5D=8k&page=1
Razor 1911. Hoài niệm thuần túy
Gợi lại rất nhiều kỷ niệm đẹp từ vài chục năm trước :-)
Thật sự đáng kinh ngạc, và tôi thích việc câu chuyện vẫn hài hước và sáng tạo đến vậy ngay cả trong hoàn cảnh bị ràng buộc. Thực sự ấn tượng
Muốn nghe thêm chi tiết kỹ thuật về việc họ đã dùng những mánh khóe và cắt giảm như thế nào để giảm số byte
Trong commit này (https://github.com/ctrl-alt-test/mouton/commit/79d2d1eab7a222b434b7041d8fc9bce4e60524f8), họ đã loại bỏ tối ưu hiệu năng để tiết kiệm rất nhiều byte
Ban đầu họ muốn giữ lại, nhưng không còn đủ byte, và nhận ra rằng với các GPU tương đối mới thì tối ưu đó không cần thiết
Vừa buồn cười vừa hoàn toàn đáng kinh ngạc. Cuối cùng cũng xem được một bộ phim mà không đoán được kết thúc