#creative-coding

Built with Rust: Processing Foundation

Série Built with Rust của Rust Foundation giới thiệu cách các thành viên công ty sử dụng Rust để giải quyết vấn đề kỹ thuật thực tế. Trong bài này, Processing Foundation chia sẻ nghiên cứu phát triển Rust của họ nhằm mở rộng khả năng xử lý đồ họa và tương tác trong trình duyệt. Họ đã tích hợp Rust vào các công cụ xử lý ảnh và animation, biên dịch thành WebAssembly để đạt hiệu suất gần native. Kết quả là các ứng dụng web của Processing Foundation có thể chạy các hiệu ứng phức tạp với tốc độ cao hơn và tiêu thụ tài nguyên thấp hơn. Điều này cho thấy Rust không chỉ phù hợp với hệ thống backend mà còn mang lại lợi ích rõ rệt cho phát triển ứng dụng web hiện đại.

Bài viết này cung cấp cái nhìn sâu sắc về cách Rust đang thay đổi những gì có thể thực hiện được trên trình duyệt qua dự án R&D của Processing Foundation.

Modernist Tiles with CSS Grid

Bài viết hướng dẫn cách tạo hoa văn sàn gạch thủy lực bằng CSS Grid và custom properties, sử dụng một họa tiết duy nhất, quy tắc xoay và không có yếu tố ngẫu nhiên.

Nếu bạn muốn tạo ra các mẫu gạch sàn hiện đại với độ chính xác cao và hiệu suất tốt bằng CSS Grid mà không cần phụ thuộc vào ngẫu nhiên, bài viết này sẽ hướng dẫn cách áp dụng các thuộc tính tùy chỉnh và quy tắc lặp lại để tạo ra những mẫu đẹp, dễ kiểm soát và hiệu suất cao.

Meet the Speakers of the First Three.js Conference

Trước thềm hội nghị Three.js đầu tiên tại Paris, các diễn giả chia sẻ về dự án họ đang phát triển, suy nghĩ của họ và một "vật phẩm" luôn mang theo từ dự án này sang dự án khác.

Lập trình viên WebGL và Three.js sẽ tìm hiểu cách các chuyên gia chia sẻ kinh nghiệm thực tế về các dự án sáng tạo, từ kỹ thuật đến tư duy thiết kế, giúp nâng cao kỹ năng và mở rộng kiến thức về cách xây dựng các ứng dụng đồ họa 3D hiệu quả.

Where Stories Become Interactive Worlds: How makemepulse Brings Ideas to Life Across Web, XR, and Beyond

makemepulse, studio công nghệ sáng tạo tại Paris thành lập năm 2008, chuyên phát triển các trải nghiệm kỹ thuật số đa dạng như website immersive, WebXR, VR/AR, cài đặt phygital và storytelling tương tác. Studio nổi tiếng với các dự án đột phá như bảo tàng ảo UNESCO tái dựng di sản bị đánh cắp bằng AI, trải nghiệm 3D thời gian thực cho Audemars Piguet, và game tương tác mở rộng cho Ubisoft's For Honor, cùng công cụ nội bộ NanoGL và nhiều giải thưởng danh giá từ FWA, Awwwards, Cannes Lions.

Nếu bạn đang tìm cách kết hợp nghệ thuật, công nghệ và tương tác để tạo ra những trải nghiệm độc đáo cho người dùng, studio này sẽ là nguồn cảm hứng và kiến thức thực tế về cách xây dựng các thế giới tương tác từ website đến VR/AR, từ AI đến phygital.

Sixty Frames for the Record: A Three.js Game, Seven Fly-Throughs, and a Wall of CRTs

Bối cảnh: Tác giả dựng một phòng thí nghiệm Three.js để phát nhạc riêng, ghi lại 60 khung hình mỗi giây để đồng bộ âm thanh. Nguyên nhân kỹ thuật: Để duy trì 60 FPS, họ thực hiện bảy lần fly‑through và kết nối một tường CRTs để hiển thị hình ảnh, khiến bộ renderer phải xử lý tải dữ liệu lớn. Hệ quả: Khi áp dụng các hiệu ứng âm thanh và ánh sáng, bộ đệm đồ họa gặp bottleneck, gây drop frame và giảm chất lượng hình ảnh trên tường CRT. Điều đáng học: Việc cân bằng giữa độ phức tạp hiệu ứng và giới hạn framerate của Three.js là then chốt để tránh overdraw và memory leak. Nếu bạn đang cân nhắc đọc bài gốc, hãy quan tâm tới cách họ tối ưu hoá pipeline và đo lường 60 FPS trên môi trường CRT, vì đó là ví dụ thực tiễn về quản lý tài nguyên trong Three.js.

Bài viết chia sẻ kiến thức thực tế về tối ưu hóa Three.js thông qua dự án âm nhạc trực quan giúp bạn hiểu sâu về renderer performance.

Music theory for programmers

I can't play an instrument, so I worked out music theory in JavaScript instead. Twelve notes, scales and chords, derived from scratch with code you can hear.

Run Rob Run: Building a Music-Reactive Goo with Three.js and WebGPU

Bài viết khám phá kỹ thuật tạo cảnh 3D phản ứng âm nhạc với Three.js và WebGPU, bao gồm biến đổi hình học tùy chỉnh, phân tích âm nhạc và tối ưu hiệu suất.

Bài viết này hướng dẫn bạn tạo hiệu ứng chất lỏng phản ứng với âm thanh bằng Three.js và WebGPU, kết hợp phân tích nhạc học và tối ưu hiệu suất.

Relighting Images with Depth Maps and Three.js

Kết hợp depth maps, TSL (Three.js Shader Language) và WebGPU để biến ảnh 2D thành bề mặt 3D động với hiệu ứng chiếu sáng, chi tiết bề mặt và đổ bóng tự nhiên.

Một lập trình viên cần đọc bài này để tìm hiểu cách áp dụng depth maps và Three.js kết hợp với WebGPU để tạo ra hiệu ứng relighting thực tế trên các hình ảnh 2D, giúp nâng cao khả năng tạo nội dung 3D, game hoặc ứng dụng web với ánh sáng tự động và chi tiết bề mặt.

Inside HAOQI.DESIGN: Letting DOM and WebGL Share a Retro-Futurist Stage

Bài viết phân tích kỹ thuật cách xây dựng trang HAOQI.DESIGN, tập trung vào việc đồng bộ cuộn (scroll sync), hiệu ứng kính (glass shaders) và sự tương tác giữa DOM, CSS cùng WebGL trong một portfolio retro-futurist.

Lập trình viên cần đọc bài này để hiểu cách kết hợp DOM, CSS và WebGL một cách sáng tạo trong giao diện web, giúp khám phá những kỹ thuật tiên tiến như scroll sync và shaders để tạo ra những hiệu ứng đồ họa độc đáo cho trang portfolio.

Spirograph Explorer: Hypotrochoid Curves in Canvas — Lab

Một ứng dụng tương tác vẽ hypotrochoid bằng HTML5 Canvas, sử dụng công thức tham số thực tế. Người dùng có thể kéo điều chỉnh kích thước bánh răng và độ lệch bút, quan sát đường cong được vẽ lại theo thời gian thực.

Là người viết mã, bạn sẽ khám phá cách chuyển đổi lý thuyết về đường cong hypotrochoid thành mã thực tế, giúp hiểu rõ hơn về các hàm tham số và cách ứng dụng chúng trong giao diện người dùng, từ đó nâng cao khả năng tạo ra các hiệu ứng đồ họa phức tạp và sáng tạo trong các dự án.

From Motion to Meaning: Denis Avramenko’s Approach to Interactive Design

Denis Avramenko chia sẻ quy trình sáng tạo đằng sau các dự án thiết kế tương tác, tập trung vào chuyển động (motion), typography, tương tác (interaction) và công nghệ. Bài viết hé lộ cách anh tiếp cận và kết hợp những yếu tố này trong các sản phẩm kỹ thuật số.

Lập trình viên nên đọc bài này để hiểu cách kết hợp logic kỹ thuật với nghệ thuật thiết kế tương tác, giúp họ nâng cao khả năng tạo ra giao diện người dùng không chỉ đẹp mắt mà còn có ý nghĩa thực sự thông qua các giải pháp kỹ thuật sáng tạo.

Creating an Interactive 3D Cluster with Three.js, TSL and Three Start

Bài hướng dẫn từng bước biến khối icosahedron đơn giản thành cụm 3D tương tác động bằng Three.js, TSL, WebGPU, noise, tương tác và post-processing.

Bạn nên đọc bài này để khám phá cách tạo ra các cấu trúc 3D tương tác phức tạp từ cơ sở hình học đơn giản bằng công cụ hiện đại như Three.js và WebGPU, giúp mở rộng kỹ năng xây dựng hiệu ứng đồ họa tự động và hiệu suất cao trong game hoặc ứng dụng web.

Building an Endless Interactive Glass Xylophone with Three.js

Xylophone kính tương tác vô tận với thanh kính mờ xếp thành helix, phát ra âm thanh khi chạm vào, được dựng bằng Three.js sử dụng instancing, mô phỏng chất lỏng và hiệu ứng thủy tinh giả lập hoàn toàn qua shader.

Là người phát triển game hoặc ứng dụng 3D, bạn sẽ tìm hiểu cách tối ưu hiệu suất và tạo hiệu ứng vật lý giả tưởng bằng shader để giải quyết vấn đề render nhiều đối tượng phức tạp mà không cần tăng tải CPU/GPU.

Creative Technologists are moving from the margins to the center

Vai trò Creative Technologist đang dần trở nên quan trọng trong các nhóm sản phẩm hiện đại, từ vị trí ít người biết đến nay trở thành năng lực cốt lõi.

Những người phát triển công nghệ sáng tạo đang thay đổi cách làm việc và trở thành nhân tố quyết định trong các sản phẩm hiện đại, giúp bạn hiểu cách ứng dụng nghệ thuật và kỹ thuật để tạo ra những giải pháp độc đáo và cạnh tranh hơn trong thị trường ngày càng cạnh tranh.

G'mic 4.0: Squaring the Pixel, Easier

G'mic 4.0 là framework mã nguồn mở toàn diện hỗ trợ xử lý ảnh 2D, 3D, 3D+t đa dạng thông qua nhiều giao diện: command-line (CLI), plugin cho GIMP, dịch vụ web, plugin Qt và thư viện C++.

Là người phát triển muốn tự động hóa xử lý hình ảnh hoặc tích hợp công cụ mạnh mẽ vào dự án của mình mà không cần phụ thuộc vào các phần mềm độc lập, G'mic 4.0 sẽ giúp bạn tiết kiệm thời gian và code với nhiều cách tiếp cận đa dạng.

Magnetic Commerce: Building the Dash Creative Website

How a simple branding concept shaped the interaction design, animation, and WebGL implementation of the Dash Creative website.

The Craft Behind Memorable Digital Experiences: Inside Unseen Studio

Unseen Studio biến những ý tưởng trừu tượng, câu chuyện ẩn giấu và khái niệm phức tạp thành những trải nghiệm kỹ thuật số đáng nhớ thông qua cách tiếp cận sáng tạo.

Lập trình viên nên đọc bài này để hiểu cách thiết kế hệ thống và giao diện không chỉ đáp ứng chức năng mà còn tạo trải nghiệm sâu sắc, giúp người dùng nhớ lại và trải nghiệm lại những ý tưởng phức tạp thông qua công nghệ.

The Sleepers: Creating an Atmospheric WebGL Experience with Lightweight Techniques

A technical breakdown of lightweight WebGL techniques used to build 'The Sleepers', a submission for Bruno Simon's Three.js challenge. Covers four main areas: a swirling intro transition using a black-and-white texture as a per-pixel threshold in a post-processing shader; animated fog achieved via shader injection with onBeforeCompile, using world position and noise textures for organic movement; mesh outlines using the inverted hull (backface) technique originating from Blender's Solidify modifier; and an infinite scrolling city built with a 3×3 tile grid that repositions chunks around the camera. Also briefly mentions Three.js LightKit, the author's own tool for browsing HDR lighting presets.