Chuyển đến nội dung
Chandler Nguyen
AI11 phút đọc

Tôi mất bốn lần thử mới dựng xong một căn phòng bằng three.js

Tôi muốn thử xây một thứ gì đó bằng three.js sau khi thấy những tác phẩm 3D tuyệt vời trên X. Phải mất bốn lần thử, nhiều model AI và rất nhiều phiên bản bị loại thì mới có một căn phòng đạt mức tôi đặt ra. Mỗi lần đã sai ở đâu, và tôi học được gì về gu thẩm mỹ.

Tôi vừa đưa một căn phòng lên trang web này. Đó là một phòng làm việc trong một ngôi nhà không có thật, nằm trên ngọn đồi nhìn xuống đại dương. Bạn có thể đi quanh phòng, ngồi xuống và cầm đồ vật lên xem. Ngôi nhà là tưởng tượng. Mọi thứ bạn cầm lên được trong đó đều có thật: sách của tôi, các khóa học tôi đã học, những sản phẩm tôi đã xây, những công viên tôi đã ghé thăm và những lời giới thiệu đồng nghiệp viết cho tôi trên LinkedIn.

Tôi mất bốn lần thử mới tới được đây, và ba lần đầu đều thất bại. Tôi nghĩ chuyện chúng thất bại thế nào hữu ích hơn bản thân căn phòng, nên bài này kể về điều đó.

Vì sao lại là three.js

Mọi thứ bắt đầu trên X (Twitter). Tôi cứ liên tục thấy ở đó những tác phẩm 3D tuyệt vời, những thứ người ta xây để chạy ngay trong trình duyệt bằng three.js, và tôi muốn tự thử. Thật ra lý do chỉ có vậy. Khi chúng tôi ghi lại mục tiêu cho lần thử đầu tiên, dòng ghi chỉ đơn giản là: mục đích là xây một thứ gì đó bằng three.js. Tôi tò mò.

Lần thứ nhất: mười diện mạo cho cùng một ý tưởng

Cuối tháng 9, tôi bắt đầu với kho bài blog của mình làm chủ đề: 523 bài, sắp xếp trong không gian theo thời gian và chủ đề. Chúng tôi dựng sáu ý tưởng thành các bản render thật: một khung cảnh những cột trụ, một bản in risograph hai màu mực, một bản đồ sao, một cơn bão giấy, một mô hình địa hình nổi và một diorama bàn làm việc thu nhỏ. Bốn ý tưởng nữa (một cuốn sách, một cái cây, một xưởng in, mực loang trong nước) mới dừng ở bản phác thô. Chín trong mười ý tưởng nằm ngay bên dưới. Khung cảnh những cột trụ thì chưa bao giờ được lưu lại.

Một bản in hai màu mực
Một bản đồ sao
Một mô hình địa hình
Một cơn bão giấy
Một bàn đầy giấy
Một cuốn sách, bản phác
Một máy in, bản phác
Một cái cây, bản phác
Mực trong nước, bản phác

Tôi loại cả mười. Khi chúng tôi ghi lại lý do, kết luận rất đơn giản. Lần nào cũng là cùng một ý tưởng, những chấm tạo từ cùng các bài viết, chỉ khác công cụ render. Đổi kỹ thuật mười lần cũng không sửa được việc tác phẩm không có chủ đề thật. Chúng tôi cũng đã vẽ cùng dữ liệu đó thành một biểu đồ 2D đơn giản, làm mức chuẩn mà bản 3D phải vượt qua. Đó là một phép thử hay mà tôi muốn giới thiệu cho bất kỳ ai bị 3D cuốn hút chỉ vì bản thân nó.

Biểu đồ 2D đơn giản của 523 bài viết trong mười chín năm, mỗi chủ đề một hàng, dùng làm mức chuẩn mà mọi bản 3D phải vượt qua

Lần thứ hai và thứ ba: một chủ đề thật, và cuộc đấu sai chỗ

Đầu tháng 10, tôi thử lại với những chủ đề thật: cách Ask Sydney tìm ra các nguồn đứng sau một câu trả lời, và cách một sản phẩm của tôi vận hành bên trong. Những phiên bản đầu khá đơn giản, và thật ra chúng được làm cho những người như tôi, những người vốn đã quan tâm một pipeline hoạt động ra sao.

Vậy nên chúng tôi làm một vòng chỉ đạo nghệ thuật bài bản cho cả hai. Các model dựng bằng Blender, một môi trường có ánh sáng, bloom, độ sâu trường ảnh, sương mù và bóng đổ mềm. Các tác phẩm đã được kiểm thử, dễ tiếp cận và sẵn sàng để dịch. Tuy vậy, tôi vẫn thấy chúng chưa đủ tốt, vì tôi đang so với concept art mà tôi đã tạo bằng một model hình ảnh trước khi bắt đầu, và đặt cạnh đó thì lần nào chúng cũng thua.

Dưới đây là mỗi tác phẩm qua ba giai đoạn: phiên bản đầu tiên, phiên bản đã chỉ đạo nghệ thuật, và concept art tôi dùng để so. Trước hết là cách Ask Sydney tìm nguồn:

Phiên bản đầu tiên
Đã chỉ đạo nghệ thuật
Concept art

Và cách DIALØGUE làm ra một tập podcast:

Phiên bản đầu tiên
Đã chỉ đạo nghệ thuật
Concept art

Bài học chúng tôi ghi lại là three.js thời gian thực không thể sánh được với một ảnh render offline chân thực như ảnh chụp. Một ảnh tĩnh có thể dành hàng phút cho một khung hình, chỉnh ánh sáng, độ sâu trường ảnh và từng chất liệu cho thật chuẩn. Một trình duyệt chỉ có vài mili giây cho mỗi khung hình. Vì thế quy tắc cho lần thử sau trở thành: đồ họa 3D thời gian thực không bao giờ cạnh tranh bằng độ chân thực. Nó thắng bằng cách phản hồi người đang đứng trước nó, và nếu một đoạn video có thể thay thế tác phẩm thì tác phẩm đó sai rồi.

Lần thứ tư, và vẫn còn rất nhiều lần nói không

Ba lần thử đó dùng các model và công cụ khác nhau, trong đó có DeepSeek và GPT của OpenAI. Không lần nào đạt mức chất lượng tôi đặt ra. Lần thứ tư, vào đầu tháng 11, là với Claude Opus 5.5 trong Claude Code.

Tôi rất muốn nói rằng nó thành công ngay từ lần đầu. Nhưng không phải vậy. Trước khi có căn phòng, tôi đã nói không với một dãy ly nước thể hiện cách chia ngân sách truyền thông (quá chiến thuật), một tác phẩm về mực, một khung cảnh giấy cắt để bay qua (quá nhạt), bốn bản phác về những thế giới khác, một bảo tàng đi bộ về sự nghiệp của tôi và một studio có sáu cái bàn, mỗi bàn cho một mảng marketing. Ghi chú của tôi về studio là nó "rất xa yếu tố wow" mà tôi đang tìm và "sáu cái bàn thật tệ". Đúng là vậy.

Những ly nước: quá chiến thuật
Một tác phẩm về mực
Một khung cảnh giấy: quá nhạt
Một đàn chim
Một đại sảnh kính màu
Một thế giới nhỏ
Một thành phố về đêm
Một bảo tàng về sự nghiệp của tôi
Một studio có sáu cái bàn

Ý tưởng hiệu quả đến từ tôi, không phải từ model. Nếu người xem là khách trong ngôi nhà mơ ước của tôi, và tôi cho họ xem phòng làm việc của mình thì sao? Tôi mô tả căn phòng như tôi hình dung: chiếc bàn làm việc với lưng tôi quay về phía cửa sổ, giá sách, một chiếc sofa dài và một cái bàn để ngồi quanh uống cà phê và trò chuyện, một lò sưởi, còn bên ngoài là cây cối và sóng biển, như ở Big Sur. Khi thấy bản chạy được đầu tiên, tôi nói "đúng rồi, hướng này đây".

Sau đó mới tới các chi tiết. Tôi loại những chiếc sofa phồng, một cái bàn chung chung, một cánh cửa xấu, một cây đèn sàn và những hàng cây không giống Big Sur. Thứ tôi yêu cầu là một "phòng làm việc đẳng cấp thế giới, quiet luxury". Trước đó trong dự án, tôi đã thử mô tả cảm giác ấy bằng sảnh của một khách sạn tốt, nơi mùi hương và hoa khiến bạn thấy an tâm và được chăm sóc, và bằng một bát mì ramen, thứ "nhìn thì đơn giản nhưng làm cho đúng thì rất khó". Đến giờ đó vẫn là cách mô tả tốt nhất tôi có.

Bên trái là một phiên bản đầu của căn phòng, bên phải là căn phòng hiện nay.

Cùng một góc nhìn từ ghế sofa, hai lần: phiên bản đầu với những chiếc sofa phồng, một cái bàn oval tối màu và một cây đèn sàn, và căn phòng hiện nay với một chiếc sofa thấp may đo, một cái bàn đá sáng màu, một chiếc ghế tròn và bờ biển bên ngoài

Nó được làm thế nào

Blender dựng căn phòng và bake ánh sáng vào đó bằng bộ render Cycles, để trình duyệt không phải tính xem ánh nắng đổ lên sàn nhà ra sao. Sau đó three.js dựng hình căn phòng theo thời gian thực và xử lý mọi thứ phản ứng với bạn: đi lại, ngồi xuống, cầm đồ vật lên, ở lại cho tới buổi tối.

Có một quy tắc về sự trung thực. Ngôi nhà là tưởng tượng và nói rõ như vậy, nhưng mọi thứ khách cầm lên đều có thật và có nguồn. Chữ trên mỗi đồ vật rất ngắn, vì quy tắc của tôi cho căn phòng là thể hiện nó bằng 3D, chỉ một dòng ngắn, không có cả bức tường chữ.

Căn phòng cũng chạy được bằng 13 ngôn ngữ, và có một phiên bản bằng văn bản dành cho trình đọc màn hình và cho bất kỳ ai có trình duyệt không hiển thị được nó.

Mười giây đầu tiên

Trước khi ra mắt, chúng tôi thử căn phòng trên một bản dev, chậm hơn site thật, với ba người truy cập thay thế, mỗi người được giao một vai trò, thiết bị và tốc độ kết nối khác nhau, và không ai được giải thích gì về trang. Họ là các AI agent chứ không phải người thật, nên tôi coi đây là một bài smoke test chứ không phải nghiên cứu. Dù vậy, kết quả rất rõ. Người nhanh nhất thấy một màn hình đen với dòng "Chào mừng, bạn cứ thong thả." trong khoảng tám giây. Hai người còn lại thấy màn hình đen suốt mười giây. Hai trong số đó nói họ sẽ tự rời đi. "Cứ thong thả" nghe như "chờ đi", và không có gì cho biết trang này là gì.

Vì vậy giờ đây một bức ảnh tĩnh của căn phòng hiện ra ngay từ giây đầu tiên, kèm tên tôi và một dòng bên dưới, còn ảnh các công viên chỉ được tải khi căn phòng đã sẵn sàng. Tôi chưa có dữ liệu từ người truy cập thật.

Sau khi ra mắt tôi vẫn tiếp tục, vì một chiếc điện thoại chậm giả lập vẫn mất khoảng 8 giây mới chạy được. Giờ trình duyệt bắt đầu tải căn phòng cùng lúc với trang, thay vì đợi code của nó tải xong, khung cảnh đại dương đến với kích thước một nửa rồi nét dần lên ngay sau đó, và bản thân mô hình 3D đã giảm từ 2,8 MB xuống 0,81 MB, mà tôi không thấy khác biệt nào. Trên một chiếc điện thoại chậm giả lập, căn phòng giờ chạy được sau khoảng 4,5 giây. Trên điện thoại của chính tôi thì nó mượt.

Tôi học được gì

Gu thẩm mỹ quan trọng hơn bao giờ hết. Bạn cần có gu, và cả vốn từ nữa, để yêu cầu máy tạo ra thứ bạn đang hình dung. Suốt quá trình, những ý tưởng và những lần nói không đều là của tôi, còn các model AI lo phần xây dựng. Điều quyết định nó có trở nên tốt hay không là liệu tôi có nói được cái gì đang sai (phồng, chung chung, quá nhạt, không giống Big Sur) và tôi muốn gì thay vào đó. Khi không mô tả được, tôi nhận lại một phiên bản được làm rất khéo của thứ sai.

Sản phẩm là phương tiện, không phải đích đến. Bạn cần hiểu vì sao mình đang xây nó, nó phục vụ ai, và bạn muốn để lại cho mọi người những kết luận hay ấn tượng gì. Những lần thử đầu bắt đầu từ một kỹ thuật. Căn phòng bắt đầu từ một người xem chưa từng gặp tôi: họ cầm lên thứ gì và nghĩ gì khi ra về. Khi điều đó đã rõ, rất nhiều quyết định tự nó có lời giải.

Model có quan trọng không? Tôi nghĩ là có. Đây là model đầu tiên đưa được căn phòng vượt qua mức tôi đặt ra. Tuy nhiên, khi đọc lại ghi chú của cả bốn lần thử, chủ đề và mục đích đã thay đổi nhiều không kém model, và thành thật mà nói tôi không tách được hai yếu tố đó ra.

Căn phòng nằm ở chandlernguyen.com/study. Nó chạy được cả trên điện thoại, tôi đã kiểm tra bằng máy của mình. Nếu bạn từng xây thứ gì đó bằng 3D với AI, hoặc đã thử rồi bỏ cuộc, điều gì đã cản bạn? Tôi tò mò không biết đó là do công cụ hay do ý tưởng.