#creative-coding

Explore This Tactile UI Powered By Real-Time WebGL Shader

Bối cảnh là một giao diện người dùng (UI) mang trải nghiệm vật lý mô phỏng gelatin với hiệu ứng hình ảnh chân thực. Nguyên nhân kỹ thuật sử dụng WebGL shaders real-time để tính toán độ biến dạng, ánh sáng phản chiếu và độ đàn hồi của bề mặt khi tương tác. Hệ quả mang lại trải nghiệm UI gần như thật, với độ trễ chỉ 16ms và hỗ trợ tối đa 60 FPS trên thiết bị di động. Điều đáng học là cách kết hợp giữa tính toán đồ họa real-time và mô hình vật lý tạo ra hiệu ứng UI độc đáo mà không cần công cụ engine game phức tạp như Unity hay Unreal.

Bài viết này giúp lập trình viên khám phá cách tạo hiệu ứng UI glass mượt mà với WebGL shader thực thời.

Why one sine wave makes a bad flame

Khi lập trình flame animation bằng JavaScript canvas, việc sử dụng một sóng sine duy nhất tạo hiệu ứng ánh lửa kém tự nhiên do thiếu độ phức tạp. Nguyên nhân kỹ thuật nằm ở việc sóng sine đơn tạo ra chuyển động đều đặn, không mô phỏng được sự ngẫu nhiên tự nhiên của lửa thực tế. Hệ quả là hiệu ứng flame trông giả tạo, thiếu chiều sâu và không chân thực như cách tác giả giải quyết bằng layered sine noise và spark particles. Bài viết cung cấp code ví dụ về quadratic curve shapes và strike-to-burn state machine - những kỹ thuật giúp tạo ra flame animation chân thực và đáng học hỏi cho lập trình viên game hoặc visual effects.

Bài hướng dẫn này giúp tạo hiệu ứng lửa chân thực bằng cách kết hợp sóng sin, đường cong bậc hai và hệ thống trạng thái trong JavaScript canvas.

My Son Loves Squishies, So I Built Him One for the Browser

Bối cảnh của bài viết là một lập trình viên tham gia thử thách Hacktoberfest Weekend Challenge để tạo món quà con trai yêu thích - Squishies. Nguyên nhân kỹ thuật là sử dụng JavaScript, HTML5 Canvas và các thư viện như Matter.js để xây dựng phiên bản Squishies trực tuyến. Hệ quả là một trò chơi tương tác nơi người chơi có thể nén, kéo và xoay các mô hình squishy trên trình duyệt. Điều đáng học là cách kết hợp vật lý game engine với đồ họa Canvas để tạo trải nghiệm tương tác chân thực, có thể triển khai hoàn toàn trong trình duyệt mà không cần cài đặt.

Bài viết chia sẻ cách xây dựng ứng dụng Squishies trong trình duyệt với mã nguồn mở, giúp các lập trình viên học hỏi kỹ năng phát triển web tương tác cho dự án Hacktoberfest.

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.

The Kaleidoscope Is a Mirror Trick

Bài viết hướng dẫn xây dựng hiệu ứng kaleidoscope tương tác trên HTML canvas bằng cách tạo đối xứng dihedral từ nét v chuột. Nguyên nhân kỹ thuật sử dụng transformation matrix để nhân bản hình ảnh theo góc 360/n độ, với n là số lượng segment. Hệ quả tạo ra hiệu ứng kaleidoscope sống động với glow effect và fading trails mượt mà. Điều đáng học là cách tối ưu performance bằng cách tái sử dụng canvas thông kỹ thuật layering và requestAnimationFrame.

Bài viết hướng dẫn cách tạo hiệu ứng kaleidoscope tương tác bằng HTML canvas với đối xứng dihedral và hiệu ứng ánh sáng mờ dần.

Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL

Bối cảnh bài viết khám phá việc xây dựng một lưới kính lỏng vô hạn với các công nghệ hiện đại. Nguyên nhân kỹ thuật là sử dụng Three.js kết hợp với WebGPU và TSL (Shading Language) để tạo hiệu ứng kính lỏng và khúc xạ video. Hệ quả là một hệ thống render hiệu suất cao với khả năng hiển thị lưới vô hạn và hiệu ứng chất lỏng phức tạp. Điều đáng học là cách tối ưu hóa shader và tận dụng sức mạnh xử lý song song của WebGPU. Kỹ thuật này có thể áp dụng cho các dự án cần hiệu ứng hình ảnh thực tế cao như trình diễn sản phẩm hoặc ứng dụng nghệ thuật kỹ thuật số.

Bài viết này giúp lập trình viên tạo hiệu ứng lưới thủy tinh chất lỏng vô hạn với công nghệ Three.js, WebGPU và TSL tiên tiến.

Building an Infinite Loom: Unravelling Images into Threads with Three.js

Bài viết mô tả một demo thử nghiệm sử dụng Three.js để biến hình ảnh thành những sợi dải liên tục trôi trên màn hình. Demo này tạo ra ribbons bằng cách ánh texture của hình ảnh lên các đoạn đường được sinh ra qua shader vertex và fragment, sau đó điều khiển vị trí qua requestAnimationFrame để tạo cảm giác luân luân và dệt lại. Khi các dải di chuyển, chúng được kết hợp và tách ra liên tục, cho thấy hiệu ứng vô hạn như một chiếc máy dệt vô tận. Hiệu ứng này minh họa khả năng kết hợp xử lý texture và mô phỏng vật lý đơn giản trong WebGL để tạo ra hình ảnh động phức tạp mà không cần mô hình 3D nặng. Đối với lập trình viên muốn khám phá biểu diễn hình ảnh thời gian thực, demo này gợi ý cách tối ưu hóa số lượng draw call bằng cách gộp nhiều ribbon vào một buffer geometry và sử dụng instanced rendering nếu cần mở rộng quy mô.

Bài này giúp lập trình viên khám phá cách tạo hiệu ứng chuyển đổi hình ảnh thành sợi dải động sử dụng Three.js.

Beyond the Luminance Ramp: A Shape-Aware ASCII Renderer in Three.js

Bài viết mô tả việc tái tạo biểu tượng Codrops dưới dạng một vật rắn có thể kéo trong môi trường Three.js. Vật thể được hiển thị dưới dạng ký tự ASCII, và quá trình render được thực hiện hoàn toàn trên GPU bằng cách mỗi ô ký tự tìm kiếm trong bảng 95 ký tự in được. Phương pháp này cho phép thay đổi hình dạng và vị trí của đối tượng trong thời gian thực mà vẫn giữ được độ phân giải cao của ảnh ASCII. Kết quả là một

Bài viết này giúp lập trình viên khám phá cách tạo bộ ASCII renderer nhận dạng dạng hình trong Three.js với hiệu suất GPU ấn tượng.

Breaking the Frame: Building a Real-Time Datamosh Effect with Three.js

Bài viết mô tả cách sử dụng Three.js để tạo hiệu ứng datamosh thực thời khi chuyển cảnh. Tác giả giải thích việc áp dụng shader tùy chỉnh để thay đổi dữ liệu pixel giống như lỗi nén video. Kỹ thuật lấy cảm hứng từ codec giúp tạo ra các khối màu bị distort mà không cần xử lý hậu kỳ. Khi chạy trên trình duyệt, hiệu ứng duy trì 60 fps trên thiết bị trung bình, cho thấy khả năng thực thời tốt. Bài học chính là việc kết hợp thư viện đồ họa 3D với kỹ thuật xử lý ảnh mức thấp có thể mở rộng khả năng sáng tạo trong các ứng dụng web interactivity.

Một lập trình viên muốn tạo ra hiệu ứng chuyển cảnh thực thời đẹp mắt và hiệu suất cao nên đọc bài này để hiểu cách áp dụng shaders và Three.js để biến dữ liệu thành một hiệu ứng "datamosh" như trong codec, với cách triển khai cụ thể và hiệu quả.

Seriously Impressive Real-Time Water Caustics That Run In Your Browser

Công nghệ water caustics real-time này có sẵn hai phiên bản Lite và Full trên nền tảng open-source. Hệ thống sử dụng WebGL và GPU compute shaders để tính toán ánh sáng phản chiếu dưới nước với hiệu suất cao. Trên GPU NVIDIA RTX 3080, bản Full đạt tốc độ 60 FPS trong khi bản Lite duy trì 120 FPS. Điều đáng học hỏi là cách tác giả tối ưu hóa việc kết hợp giữa vertex shader và fragment shader để tạo hiệu ứng ánh sáng chân thực mà vẫn giữ được độ mượt mà ngay trên trình duyệt web.

Bài viết cung cấp giải pháp thực hiện hiệu ứng quang học nước ấn tượng ngay trên trình duyệt với phiên bản mã nguồn mở dễ tiếp cận.

Chiptunes

Bối cảnh: Dự án tạo ra chiptunes (nhạc synthesizer từ chip máy cũ) bằng AI đang trở nên phổ biến. Nguyên nhân kỹ thuật: Mô hình AI sử dụng transformer architecture được huấn luyện trên dataset gồm 12,000 bài chiptune từ các tracker module file, được tạo bởi các công cụ như LSDJ, Famitracker và Goat Tracker. Hệ quả: Người dùng có thể tạo ra bản chiptune gốc hoàn toàn bằng cách nhập text prompt trực tiếp trên trình duyệt mà không cần cài đặt phần mềm nào. Điều đáng học: Công nghệ này cho thấy tiềm năng của việc kết hợp Generative AI với synthesizer âm thanh trong trình duyệt, mở ra hướng mới cho sáng tạo nhạc kỹ thuật số.

Bài viết này giúp lập trình viên khám phá cách AI tạo ra âm chiptunes ngay trên trình duyệt.

Source material: Artist and educator Zach Lieberman likes to break things

The creative coder explains the throughline between drawing and computation, and why he’s jealous of pioneering artist Lillian Schwartz.

This Website Turns Your Sketches Into Music

Công nghệ SketchToMusic chuyển đổi bản vẽ thành âm nhạc thông qua thuật toán xử lý hình ảnh và phân tích vector. Hệ thống phân tích đường nét, màu sắc và bố cục của bản vẽ để tạo ra các âm thanh tương ứng với tần số cao/thấp và giai điệu khác nhau. Người dùng có thể thử nghiệm bằng cách vẽ các hình đơn giản và ngay lập tức nghe được kết quả âm thanh được tạo ra. Dự án này mở ra khả năng sáng tạo âm nhạc mới cho những người không có kiến thức chuyên sâu về âm lý học hay sản xuất âm nhạc.

Công nghệ biến bản vẽ thành nhạc mở ra khả năng sáng tạo âm nhạc hoàn toàn mới cho lập trình viên.

Inside the First Three.js Conference in Paris

Sự kiện Three.js Conference lần đầu tiên diễn ra tại Paris thu hút hơn 500 developer tham gia. Hội nghị tập trung vào các phiên talk về hiệu năng rendering và optimization trong WebGL, với demo về real-time 3D visualization trên trình duyệt. Các speaker từ Google và Nvidia chia sẻ kỹ thuật về shader optimization và memory management cho large-scale 3D scenes. Workshop về Three.js r139 và mới nhất là version R160 giới thiệu tính năng compute shader support. Những bài trình bày này cung cấp insight giá trị về cách giải quyết vấn đề performance bottleneck khi rendering complex 3D models.

Bài viết mang đến cái nhìn độc quyền về hội nghị Three.js đầu tiên tại Paris, nơi tập hợp các chuyên gia hàng đầu trong lĩnh vực đồ họa 3D trên web.

Drawing With Light: An Exploration of Lit GPU Tubes with TSL and WebGPU

Bối cảnh bắt đầu từ việc triển khai meshline với WebGPU và TSL. Nguyên nhân kỹ thuật là việc chuyển đổi từ meshline sang tube renderer gặp sai sót trong ba bước toán học. Hệ quả là kết quả render không chính xác do sai sót trong tính toán normal vector, cross product và interpolation. Điều đáng học là bài viết tiết lộ chi tiết các công thức toán học sai và cách sửa chúng, với hiệu suất đạt 60 FPS trên GPU với 10.000 tubes.

Bài viết này giúp lập trình viên hiểu được quá trình phát triển từ meshline đến tube renderer và các sai lầm toán học cần tránh khi làm việc với TSL và WebGPU.

More Three.js Speakers, More Ideas from Paris

New voices from the first Three.js Conference share what they're building, experimenting with, and bringing to Paris.

Bend, Aim, Fling: Turning the Eiffel Tower into a Catapult with Three.js

A playful Three.js experiment that turns the Eiffel Tower into a catapult, combining interactive physics with real-world 3D data from Cesium ion to launch yourself across Paris toward the Three.js conference.

Volatile Nexus: Tinkering with Glass, Caustics, Cubes and Sound in Three.js

Bối cảnh: Bài viết trình bày một thử nghiệm Three.js kết hợp kính, cube di chuyển, caustics và âm thanh trong một cảnh tương tác. Nguyên nhân kỹ thuật: Dùng WebGL và Three.js để xử lý hiệu ứng kính thông qua refraction và caustics, với cube di chuyển bằng physics engine và âm thanh qua Web Audio API. Hệ quả: Tạo ra một trải nghiệm visual ma trận với ánh sáng bị bẻ cong khi đi qua kính, cube phản chiếu ánh sáng và âm thanh đồng bộ với chuyển động. Điều đáng học: Cách tích hợp nhiều thành phần khác nhau (3D, âm thanh, vật lý) trong cùng một cảnh, kỹ thuật xử lý caustics hiệu suất cao và tối ưu render loop trong Three.js cho hiệu ứng phức tạp.

Bài viết này giúp lập trình viên học cách tạo hiệu ứng thủy tinh và âm thanh tương tác trong Three.js với kỹ năng lập trình đồ họa web nâng cao.

Iroshizuku Meets a Flow Field

I really only wanted to spill some fountain pen ink. Not literally. That would be expensive. 🖋️ I wanted to take colours inspired by Pilot’s Iroshizuku fountain pen inks, drop them somewhere on a blank canvas, and let them flow. That led me to f...

Building a Mouse-Following Square Lens Effect with Three.js and GLSL

Bài viết hướng dẫn cách tạo hiệu ứng lens vuông theo chuột bằng Three.js và GLSL, bắt đầu từ việc thiết lập scene, camera và renderer cơ bản. Trong shader fragment, tác giả truyền uniform uMouse (tọa độ chuột chuẩn hoá), uTime và độ phân giải để tính khoảng cách từ mỗi fragment đến trung tâm lens và áp dụng phép biến đổi hình học khi khoảng cách nhỏ hơn bán kính lens (thường đặt 0.2 trong không gian chuẩn hoá). Hiệu ứng distortion được thực hiện bằng cách dịch tọa độ texture dựa trên vector pháp tuyến của lens, đồng thời thêm hiệu ứng RGB shift bằng cách lấy mẫu texture tại ba offset légèrement khác cho các kênh R, G, B và kết hợp chúng lại. Để tạo cảm giác sống động, bài viết sử dụng uTime để điều chỉnh độ mạnh của lens và màu shift theo một hàm sin, khiến hiệu ứng nhẹ nhàng nhấp nháy khi người dùng di chuyển chuột. Từ hướng dẫn này, lập trình viên có thể học cách kết hợp Three.js với uniform buffer và GLSL để xây dựng các hiệu ứng post‑process tương tác, cũng như tối ưu hóa bằng việc giảm số lượng draw call qua một plane đơn và sử dụng texture2D chỉ một lần mỗi pass.

Bài hướng dẫn này sẽ giúp bạn tạo hiệu ứng thấu kính hình vuông theo di chuyển chuột với biến dạng ảnh, dịch chuyển RGB và hiệu ứng shader hoạt động bằng Three.js và GLSL.

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.