#threejs

The Architecture Behind Trionn: Coordinating GSAP, Three.js, Lenis, and Web Audio

Bài viết hé lộ cách tích hợp đồng bộ các thư viện GSAP, Three.js, Lenis và Web Audio để tạo nên trải nghiệm web mượt mà. Kiến trúc hệ thống được thiết kế nhằm thống nhất nhiều lớp animation, rendering và tương tác.

Những lập trình viên muốn tối ưu hóa hiệu suất và quản lý các lớp hoạt hình, render và tương tác phức tạp trên web sẽ tìm hiểu cách Trionn kết hợp GSAP, Three.js, Lenis và Web Audio thành một hệ thống hoạt động nhẹ nhàng và đồng bộ.

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ả.

Three.js – JavaScript 3D Library

Three.js là thư viện JavaScript 3D cung cấp nhiều tài nguyên, hỗ trợ cộng đồng và ví dụ mã nguồn.

Lập trình viên cần đọc bài này để khám phá cách Three.js giúp tạo ra các ứng dụng 3D tương tác hiệu quả với JavaScript, mở rộng khả năng phát triển game, mô hình ảo và giao diện tương tác không gian với ít code hơn.

The Department Is Open: Building the PX PUSH Website

Một studio thiết kế theo mô hình đăng ký đã xây dựng website của mình dựa trên ý tưởng chủ đạo: một máy chủ cũ luôn hoạt động bên dưới kiến trúc hiện đại sử dụng Nuxt và Three.js.

Một lập trình viên nên đọc bài này để hiểu cách kết hợp kiến trúc hiện đại như Nuxt.js và Three.js với thiết kế cơ sở logic đơn giản—tương tự như một "máy chạy liên tục" để tạo ra trải nghiệm web độc đáo, hiệu suất cao và dễ bảo trì.

Garden Anomaly: A Tiny WebGPU and TSL Experiment

Thử nghiệm nhỏ trên WebGPU và TSL kết hợp vật lý, biến dạng và âm thanh thủ tục bên trong một khối cầu để khám phá tương tác.

Lập trình viên muốn khám phá cách kết hợp WebGPU và TSL (Transformational Spatial Language) để tạo ra những hiệu ứng vật lý và âm thanh sinh động trong giao diện web, đặc biệt khi muốn tối ưu hiệu suất cho ứng dụng đồ họa hoặc game 3D.

One-shotting a Raccoon Heist game using Claude Fable 5

Simon Willison đã dùng Claude Fable 5 (qua Claude Code cho web) để tạo ra game trình duyệt 3D "Raccoon Heist" chỉ từ một prompt, sử dụng Three.js, tạo texture bằng gpt-image-2, viết test Playwright và triển khai lên GitHub Pages. Mặc dù game có đồ họa 3D, âm thanh thủ tục, điều khiển cảm ứng và độ khó tăng dần, gameplay vẫn đơn giản và chưa đủ hấp dẫn, cho thấy AI vẫn chưa thể thay thế sáng tạo trò chơi của con người.

Là người phát triển, bạn nên đọc để khám phá cách AI tự động hóa từ thiết kế đến triển khai game 3D trong một lần thực hiện, giúp hiểu về cách ứng dụng công nghệ hiện đại tối ưu hóa quy trình phát triển và tạo ra kết quả nhanh chóng mà không cần kiến thức chuyên sâu về từng bước.

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.

The Art of Continuous Transformation: How Garden Eight Blends Integrity with Play

Garden Eight kết hợp giữa sự toàn vẹn (integrity) và tính sáng tạo (play) để xây dựng những website vừa đẹp mắt, vừa có khả năng tiến hóa, thu hút và bền vững theo thời gian.

Những người phát triển web tìm hiểu cách Garden Eight kết hợp sự chính xác kỹ thuật với tính sáng tạo để xây dựng các dự án linh hoạt, dễ bảo trì và thích ứng với xu hướng mới.

Introducing Voxacon, the 2026 Tighten Laracon Puzzle

Hàng năm, Tighten đều tạo ra một thử thách puzzle cho Laracon, từ đánh máy, lập trình đến xây dựng game. Năm 2026, họ giới thiệu Voxacon như một thử thách mới.

Những năm gần đây, Tighten đã tạo ra những thử thách sáng tạo như game xây dựng, giúp bạn hiểu cách ứng dụng kỹ năng lập trình trong các dự án thực tế và khám phá những kỹ năng mới từ những thách thức đa dạng.

ZERO: The Engineering Behind a Defiant Interactive Narrative

Bài viết phân tích kỹ thuật về quy trình sản xuất, kỹ thuật render và tối ưu hiệu năng đằng sau ZERO, một trải nghiệm WebGL cuộn tương tác (scroll-driven) dành cho desktop và mobile.

Lập trình viên muốn xây dựng các ứng dụng WebGL hoặc game tương tác trên nền tảng di động nên đọc để hiểu cách tối ưu hóa hiệu suất và thiết kế pipeline kỹ thuật cho các dự án tương tác phức tạp.

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.

Building an Interactive Wave Propagation Cube Grid with Three.js

A detailed tutorial on building an interactive 3D wave propagation cube grid using Three.js. Covers project structure with Vite, setting up an InstancedMesh grid with MeshPhongMaterial, implementing a mouse trail system using DataTexture to pass trail data to the GPU, and writing a custom vertex shader via onBeforeCompile to create Gaussian wave envelopes with time-fade, distance attenuation, and speed attenuation. Also covers color mixing in the fragment shader, syncing shadow depth materials, post-processing with EffectComposer using a custom vignette + chromatic aberration shader, GPU optimizations, and a mobile fallback with auto-generated random trail points.

Ten Years Away: Designing an Interactive Comic for Studio375’s Tenth Anniversary

Studio375 built an interactive scroll-driven comic to celebrate their tenth anniversary, using React Three Fiber, Three.js, GSAP, and Lenis. The experience features a horizontal WebGL canvas where the camera drifts through illustrated comic panels as you scroll. Technical highlights include a GLSL shader background with fBm noise that reacts to scroll velocity, a 3D flipbook rendered in Three.js, a two-pass WebGL halftone mouse trail referencing benday dot printing, KTX2 texture compression, and Howler.js audio with per-chapter tracks that crossfade and sync to scroll speed. The post covers both the creative process — including a year-long hiatus — and the technical implementation decisions behind the project.

Building a Scroll-Driven 3D Gallery Using a Blender Camera Path with Three.js and GSAP

A step-by-step guide to building a cinematic scroll-driven 3D image gallery. The workflow starts in Blender, where a Bezier curve is drawn and exported as JSON via a Python script with coordinate-system remapping. Three.js reconstructs the curve using CatmullRomCurve3, distributes 500 image planes along it with randomized lateral and depth offsets, and renders the scene with fog for depth. GSAP's Observer plugin captures scroll input across wheel, touch, and pointer devices, while gsap.quickTo() smoothly animates the camera along the path. A per-frame focus system scales nearby planes up to 14× using a cubic proximity function, also driven by quickTo() to avoid creating new tweens every frame. Additional features include animated path switching between five curves and an auto-scroll dolly mode.

Artist Shares Real-Time Snowfall System Built with Three.js & WebGL

Nhà phát triển Chiro Visuals đã chia sẻ hệ thống tuyết rơi theo thời gian thực mã nguồn mở, được xây dựng bằng Three.js và WebGL. Hệ thống này bao gồm các yếu tố như tuyết rơi theo thể tích GPU, tinh thể băng lấp lánh, mặt hồ, và shader tích tụ tuyết bằng FBM noise trong không gian thế giới. Nó hỗ trợ nhập mô hình tùy chỉnh để điều khiển tương tác tuyết và có sẵn trên GitHub.

Nếu bạn muốn khám phá cách áp dụng hiệu năng GPU và kỹ thuật shader tiên tiến để tạo ra cảnh vật lý thực tế như tuyết rơi trong game hoặc ứng dụng web, bài này sẽ là nguồn tham khảo lý thuyết và thực hành không thể bỏ qua.

Three.js Port Of Evan Wallace's WebGL Water

Yong Su has ported Evan Wallace's classic WebGL Water demo to Three.js, adding enhancements like configurable pool shapes (rounded boxes), a light-follow camera mode, and an extensible object system. The simulation features ray-traced reflections, refractions, caustics, and interactive objects. A live browser demo and GitHub repository are available, allowing users to draw ripples, move objects, and toggle gravity.

Engineering the Web Experience Behind Shopify’s Spring ’26 Edition: Everywhere

Bài viết giới thiệu kiến trúc rendering đằng sau trải nghiệm web "Spring '26 Edition: Everywhere" của Shopify, tập trung vào hai kỹ thuật WebGL tùy chỉnh: volumetric light từ video sử dụng KTX2 array textures và raymarched boxes trong Three.js, cùng giải pháp video trong suốt đa trình duyệt bằng cách xếp chồng RGB+alpha video với shader WebGL2. Ngoài ra, hệ thống còn bao gồm định dạng point-cloud (.mdpc) tối ưu, hệ thống trường fluid chia sẻ cho hiệu ứng con trỏ/ cuộn, hệ thống bốn cấp GPU cho hiệu suất mở rộng, và kiến trúc cuộn tách các cập nhật tần suất cao khỏi React renders. Định dạng cài đặt cảnh chia sẻ giúp nhà thiết kế và lập trình viên cộng tác trực tiếp.

Lập trình viên nên đọc bài này để khám phá cách Shopify áp dụng các kỹ thuật WebGL tiên tiến, từ hiệu suất GPU đến quản lý trạng thái và giao diện cộng tác giữa thiết kế và phát triển, giúp hiểu cách xây dựng trải nghiệm web cao cấp và hiệu quả.

Podium: Building a Website Where Running Becomes Storytelling

A case study on building Podium, a production studio portfolio site focused on running and athletic filmmaking. The developers share how they used Next.js, React, GSAP (ScrollTrigger, Flip), Lenis, Three.js/React Three Fiber, and Zustand to create a continuous scroll-driven narrative experience. Key technical highlights include a cursor-reactive grain shader using trail textures with difference blend mode, character-by-character text animations with random stagger, and seamless page transitions where the clicked media element expands into the project hero. The design philosophy centers on restraint, rhythm, and pacing — deliberately slowing the experience to mirror the progressive nature of running.