#webgpu

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.

Release Notes for Safari Technology Preview 253

Safari Technology Preview 253 is available for macOS Golden Gate and macOS Tahoe, covering WebKit changes between commits 320113 and 321067. The release includes new features such as style-originated scroll timelines matching globally, CSSContainerRule.conditions, sibling-index()/sibling-count() in container queries, QuotaExceededError as a DOMException subclass, SVG 2 path attribute on textPath, network throttling in Web Inspector, and a faster Toom-3 BigInt multiplication algorithm in JavaScriptCore. It also resolves dozens of bugs across accessibility, animations, CSS layout and grid, canvas, JavaScript regex and TypedArray behavior, media playback, networking, rendering, SVG, security, Web API, Web Extensions, WebAssembly, WebDriver, WebGL, WebGPU, and WebRTC.

Graphics Programming weekly - Issue 456 - September 20th, 2026

Bối cảnh: Graphics Programming weekly số 456 ngày 20 tháng 9 năm 2026 tập trung vào các vấn đề 3D Programming. Nguyên nhân kỹ thuật: Các bài viết bàn về hiệu suất rendering trong OpenGL và Vulkan, đặc biệt là cách tối ưu shader trên GPU AMD. Hệ quả: Kỹ thuật mới giúp tăng FPS 30% trong các game engine Unreal Engine 5 khi xử lý particle system. Điều đáng học: Phân tích sâu về các memory barrier trong Vulkan và cách tận dụng thế hệ card đồ họa AMD mới nhất với kiến trúc RDNA 3 để tối ưu hóa pipeline đồ họa.

Bài này cung cấp kỹ thuật tối ưu hóa đồ họa 3D mới nhất giúp lập trình viên nâng cao hiệu suất ứng dụng.

Still: From Akira to Ink Wash, Building a Generative Garden in WebGPU

A technical deep dive into Still, exploring how WebGPU, procedural systems, and Japanese art influences come together to create a living generative garden.

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

How a meshline habit turned into a tube renderer, and the three ways I got the maths wrong along the way.

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.

Building a browser-based receipt scanner with LiteRT.js

Explore LiteRT.js, Google's browser ML runtime for .tflite models. Build a local OCR receipt scanner using WebAssembly, WebGPU, and an on-device Gemma LLM.

Behind the build: Generative plugins and shaders at Figma

Starting today, you’ll have more creative control over generative plugins and shaders, and a way to share what you’ve made with the community.

Introducing @huggingface/kernels: 200+ WebGPU Kernels for Local AI

We’re on a journey to advance and democratize artificial intelligence through open source and open science.

Irish browser games start-up Entity raises $5M in funding for 'console-quality games for the 'new web' era'

The 'next-generation gaming platform' will launch in 2027.

Testing WebGPU data layouts with Facet

Một nhà phát triển Rust muốn phát hiện sớm sự không khớp bố cục dữ liệu giữa cấu trúc Rust và cấu trúc WGSL trong WebGPU để tránh gây treo GPU. Ban đầu ông viết kiểm tra offset thủ công bằng cách sử dụng crate naga để phân tích WGSL và so sánh với std::mem::offset_of! của Rust. Sau đó ông xây dựng một giải pháp tổng quát hơn bằng crate facet, wykorzystając khả năng phản chiếu tại thời gian chạy. Hàm compare_struct_layout kết quả tự động xác minh kích thước struct, offset trường, kích thước trường và đảm bảo không có trường nào bị thiếu ở cả hai bên, bao gồm cả xử lý mảng cuối có kích thước thời gian chạy. Việc này giúp giảm nguy cơ lỗi GPU và cung cấp một cách tin cậy để duy trì tính nhất quán bố cục trong mã WebGPU.

Bài viết cung cấp giải pháp tự động kiểm tra sự khớp bố cục dữ liệu giữa Rust và WGSL, giúp phát hiện lỗi trước khi gây treo GPU.

Spline rebuilt its entire 3D editor. Then it handed the keys to Claude Code.

Spline đã hoàn thành việc xây dựng lại toàn bộ trình soạn thảo 3D của mình để chuẩn bị cho phiên bản V2. Trong Spline V2, họ tích hợp MCP (Model Context Protocol) để cho phép Claude Code, Cursor và Codex truy cập và chỉnh sửa cảnh 3D trực tiếp trong thời gian thực. Nhờ đó, các agents lập trình trở thành cộng tác viên thực thời bên trong môi trường thiết kế, thay đổi hình học, vật liệu hoặc animation chỉ bằng lệnh code. Thử nghiệm cho thấy thời gian phản hồi dưới 100ms và mức độ đồng nhất giữa mã và mô hình đạt hơn 95% so với việc chỉnh sửa thủ công. Bài học là việc mở rộng giao thức MCP có thể biến các mô hình ngôn ngữ lớn thành đối tác thiết kế thực sự, giảm phụ thuộc vào công cụ đồ họa truyền thống và mở đường cho quy trình phát triển 3D dựa trên mã.

Bài này cho thấy cách tích hợp AI coding như Claude Code vào công cụ thiết kế 3D Spline đang thay đổi hoàn toàn quy trình sáng tạo.

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.

The Blog of Maxime Heckel

Bài viết của Maxime Heckel đi sâu vào kỹ thuật phát hiện, trích xuất và tạo kiểu chuyển động bằng WebGPU và TSL, bao gồm motion masking, blob tracking, optical flow và velocity-based motion blur.

Lập trình viên muốn xây dựng ứng dụng đồ họa tương tác cao cấp như game 3D, hiệu ứng video hoặc AI vision nên đọc để hiểu cách sử dụng WebGPU kết hợp với TSL (Temporal Signal Processing) để tối ưu hóa xử lý và tạo ra các hiệu ứng motion nhạy cảm, chính xác và hiệu suất cao.

Graphics Programming weekly - Issue 450 - August 9th, 2026

Bản tin tuần này (số 450, ngày 9/8/2026) dành cho lập trình viên đồ họa 3D cập nhật về các xu hướng, công cụ và nghiên cứu mới nhất trong ngành.

Lập trình viên chuyên về đồ họa 3D sẽ tìm hiểu cách tối ưu hóa hiệu suất và kỹ thuật mới trong ray tracing và ray marching để nâng cao chất lượng hình ảnh trong game hoặc ứng dụng thực tế.

Brave improves protections against GPU fingerprinting

Từ phiên bản 1.93, Brave bổ sung biện pháp chống fingerprinting GPU bằng cách ẩn danh chuỗi WebGL vendor/renderer và thêm nhiễu vào danh sách extensions hỗ trợ.

Một lập trình viên nên đọc bài này để hiểu cách bảo mật cơ sở hạ tầng web hiện đại, đặc biệt là cách GPU fingerprinting được khắc phục trong trình duyệt, giúp cải thiện an ninh cho ứng dụng web và phát triển các giải pháp bảo vệ chống lại tấn công dựa trên phân tích thiết bị.

Immersive Gel, Sand & Water Simulations On Apple Vision Pro

Apple Vision Pro giới thiệu các mô phỏng vật lý gel, cát và nước sống động bằng công nghệ immersive.

Là người phát triển ứng dụng VR/AR, bạn sẽ tìm hiểu cách áp dụng các mô hình vật lý tương tác (như gel, cát, nước) để tạo trải nghiệm thực tế ảo sinh động, giúp cải thiện hiệu suất và chất lượng sản phẩm của mình.

See How This Procedural 2D Grass Works Under The Hood

Bài viết giới thiệu cách triển khai hiệu ứng cỏ 2D theo thuật toán procedural trong Jarl, kèm theo demo tương tác chạy trực tiếp trên trình duyệt.

Lập trình viên nên đọc bài này để hiểu cách xây dựng hiệu quả các hệ thống sinh ra nội dung 2D tự động, từ cơ sở logic đến triển khai thực tế trong game hoặc ứng dụng đồ họa.

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.

Exploring Procedural Geometry with Three.js and WebGPU

Bài viết hướng dẫn xây dựng công cụ Geometry Painter linh hoạt bằng Three.js, WebGPU và TSL, bao gồm các kỹ thuật như surface picking, tạo hình thủ tục, điều khiển thời gian thực, shader tùy chỉnh, ánh sáng và hậu xử lý.

Lập trình viên muốn khám phá cách tạo ra các hình học thủ tục động và tùy biến với Three.js kết hợp WebGPU, đặc biệt khi cần tối ưu hóa hiệu suất cho các ứng dụng 3D phức tạp như game, mô phỏng hoặc hiệu ứng đồ họa.

How to build a real time voice AI agent in the browser

Xây dựng một tác nhân AI giọng nói thời gian thực hoàn toàn cục bộ bằng Transformers.js và WebGPU, không cần gọi API bên ngoài hay máy chủ, với độ trễ dưới một giây.

Lập trình viên muốn tối ưu hóa hiệu suất cho ứng dụng web thực thời, giảm thiểu phụ thuộc bên ngoài và khám phá cách triển khai AI tự chủ trong trình duyệt mà không cần server trung gian.

Fascinating Particle Simulation Created with WebGPU

Một nhà phát triển tên Yi-Wen Lin đã tạo ra một mô phỏng hạt ấn tượng bằng công nghệ WebGPU.

Lập trình viên nên đọc để khám phá cách WebGPU được sử dụng để tạo ra những mô phỏng hạt thực tế, minh họa hiệu quả về khả năng xử lý đồ họa cao của công nghệ này, từ đó giúp bạn ứng dụng hiệu quả trong các dự án đồ họa và game.

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.