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ố.
Why read it: 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.
Answer 3 short questions to earn reward points for this article. Only do it if you want the points.
3 questions · under a minute · optional
Source: https://tympanus.net/codrops/2026/09/08/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl. 8 Sync News only summarizes and links out; content copyright belongs to the authors and original sources.
Đang tải bình luận…
Cần tạo hiệu ứng mặt nạ 3D thời gian thực trên web mà không phụ thuộc vào phần cứng chuyên dụng. Bài viết sử dụng MediaPipe Face Mesh để trích xuất 468 điểm landmark khuôn mặt, sau đó ánh xạ chúng lên mô hình mặt chuẩn của Google để tạo lưới đa giác phù hợp. Các điểm landmark được truyền qua Threlte – bộ bao Svelte cho Three.js – để cập nhật vị trí và hướng của đối tượng Three.js mỗi khung hình, cho phép render mặt nạ có texture ở khoảng 60 FPS trên trình duyệt hiện đại. Kết hợp việc ước lượng tư thế dựa trên ML với rendering WebGL qua framework component-based giúp giảm lượng mã boilerplate và duy trì hiệu suất cao mà không cần viết shader phức tạp. Điều này cho thấy việc tách biệt giai đoạn xử lý landmark (CPU) và giai đoạn render (GPU) là chìa khóa để đạt được trải nghiệm AR mượt mà trên web.
Bài này sẽ giúp bạn nắm cách kết hợp MediaPipe, Threlte và Three.js để tạo mặt nạ 3D thời gian thực trên trình duyệt.
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.
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.
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.
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ả.
Nhiều nhà phát triển thường tạo mô hình trong Blender rồi xuất sang Three.js để chạy trên web, nhưng quy trình xuất‑nhập thủ công thường làm chậm vòng lặp phát triển. Bài viết đưa ra 10 mẹo thực tiễn sử dụng AI và plugin Blender MCP để tự động hoá việc xuất glTF/GLB, nén texture và thiết lập cảnh trực tiếp từ Blender. Khi áp dụng những mẹo này, người dùng cho thấy thời gian chuẩn bị tài sản giảm tới 40 % và giảm đáng kể sự không khớp giữa cảnh Blender và kết quả render trong Three.js, giúp xem trước real‑time mượt mà hơn. Bài học chính là việc kết hợp quy tắc đặt tên do AI tạo ra và các file cấu hình từ Blender MCP vào quy trình làm việc sẽ tạo ra một pipeline lặp lại, giảm thiểu thao tác thủ công và giữ mã Three.js sạch sẽ. Nếu bạn đang cân nhắc đọc bài gốc để cải thiện quy trình 3D‑to‑web, các con số cụ thể và tên công cụ như Blender, Three.js, AI và Blender MCP làm cho bài viết đáng để tham khảo.
Bài viết này giúp bạn tối ưu hóa quy trình làm việc giữa Blender và Three.js bằng cách kết hợp với AI và Blender MCP.
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ộ.
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.
Read the news here, practice coding, follow structured courses and train for IELTS on our sibling products — all connected through one 8 Sync account.
The ecosystem home: product overviews, blog and full pricing.
ExploreLearn along a clear roadmap: videos, auto-graded quizzes, certificates and mentors who ship for a living.
View the roadmap1,000+ DSA problems in Vietnamese, auto-graded across 7 languages — many FREE, right in your browser.
Practice for freeAI grading for all four IELTS skills with detailed rubric feedback.
Try it freeA 22 MB AI IDE for Vietnamese devs.
Download freeOrganizational memory for AI agents.
ExploreAI that staffs your Fanpage and qualifies leads for you.
Try it