#react-three-fiber

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

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.

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.

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