#webgpu

Workers, SafeAreaView, backgroundImage, WebGPU, VisionCamera, React Navigation, Canvas Kit, Nitro

Seb và Jan giới thiệu về các công nghệ mới như Workers, SafeAreaView, backgroundImage, WebGPU, VisionCamera, React Navigation, Canvas Kit và Nitro.

Nếu bạn đang phát triển ứng dụng di động hoặc web với React Native, bài viết này sẽ giúp bạn hiểu cách tối ưu hóa UI/UX bằng SafeAreaView, quản lý nền tảng hình ảnh hiệu quả với backgroundImage, và khám phá công nghệ mới như WebGPU và VisionCamera để nâng cấp hiệu suất và tính năng.

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

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.

We don't need no stinkin' tensor library

Bài viết giới thiệu cách giải bài toán poker trực tiếp trên trình duyệt bằng cách sử dụng các nhân kernel tùy chỉnh trên WebGPU, thay vì phụ thuộc vào thư viện tensor.

Lập trình viên muốn khám phá cách xây dựng hệ thống AI mạnh mẽ trong trình duyệt mà không cần phụ thuộc vào thư viện tensor phức tạp, đặc biệt khi cần tối ưu hiệu suất cho ứng dụng game hoặc mô phỏng thực tế.

Parallel JSON parsing on the GPU with compute shaders

Sử dụng compute shaders trên WebGPU để phân tích cú pháp JSON song song. Dự án mã nguồn mở slurpjson trên GitHub.

Lập trình viên muốn tối ưu hóa tốc độ xử lý dữ liệu JSON lớn trên thiết bị có GPU mạnh hoặc ứng dụng web hiện đại nên tìm hiểu cách sử dụng compute shaders để phân tích JSON song song trên GPU.

AI-Native Manim Editor

Trình chỉnh sửa Manim AI-native hỗ trợ tạo, chỉnh sửa và tinh chỉnh các hoạt ảnh toán học.

Là người thiết kế các animation toán học chuyên nghiệp, bạn sẽ tìm thấy công cụ này giúp tối ưu hóa hiệu suất tạo nội dung và giảm thiểu thời gian lặp lại công việc thủ công.

Learn WebGPU for C++

For native graphics in C++. This documentation walks you through the use of the WebGPU graphics API to create native 3D applications in C++ from scratch, for Windows, Linux and macOS. Contents: Int...

The Bonsai + WebGPU Integration Nobody Has Written About Yet

Here’s the thing about WebGPU integration tutorials: they all solve the same problem. Replace the rendering backend. Swap GLSL for WGSL, rebuild your shader pipeline, ship faster rasterization. It’s…

The ChatGPT 5.6 architectural leak that changes everything we know about scaling

The ChatGPT 5.6 architectural leak that changes everything we know about scaling A leaked checkpoint configuration reveals how OpenAI is shifting from massive centralized clusters to client-side …

AI Can't Recreate Thrust (But It Can Help You Understand It)

Một nhà phát triển thử dùng Claude Code tái tạo game Thrust năm 1986 trên trình duyệt nhưng thất bại, sau đó phân tích sâu bằng cách khai thác công cụ AI để nghiên cứu đoạn mã 6502 đã được bình luận. Kết quả phát hiện ra cơ chế vật lý Q7.8 fixed-point, tốc độ cập nhật lực bất đối xứng 12,5 Hz, mô phỏng đầy đủ chip âm thanh SN76489, và đồ họa 320×256 sử dụng thuật toán tô màu scanline-parity. AI không thể tái tạo trải nghiệm gốc nhưng giúp hiểu rõ cấu trúc game để triển khai chính xác.

Những kiến thức về kiến trúc phần mềm cổ điển và cách thức vận hành của hệ thống như Q7.8, drag không đối xứng, hoặc âm thanh SN76489 có thể giúp bạn giải quyết những vấn đề tương tự trong các dự án hiện đại, từ tối ưu hóa hiệu suất đến tái sử dụng kiến thức kỹ thuật lâu đời.

Browser-Based Image Inpainting Runs Locally, If One Doesn’t Mind A Big Download

Simon Willison ported the Moebius 0.2B image inpainting model to run entirely in a web browser using WebGPU, with no server-side GPU required. The project involved converting a PyTorch model to ONNX format and leveraging the CacheStorage API for a 1.27 GB model download. Notably, Claude Opus 4.8 (via Claude Code) handled the entire coding process autonomously, serving as a real-world test of how AI coding agents have matured. Willison reflects on what he learned through the process despite writing no code himself.

Google Launches AI Inference “LiteRT.js“

Google vừa ra mắt LiteRT.js, một runtime JavaScript hiệu suất cao cho phép chạy inference AI (học máy và generative AI) trực tiếp trên trình duyệt web nhờ WebGPU. Nó bổ sung khả năng xử lý AI cục bộ, không tốn chi phí inference sau khi tải model, hỗ trợ offline và đơn giản hóa quá trình chuyển đổi model từ PyTorch, TensorFlow hay JAX. LiteRT.js nhằm tối ưu lớp thực thi model thay vì thay thế TensorFlow.js, giữ nguyên logic tiền xử lý hiện có.

Lập trình viên phát triển ứng dụng web cần đọc để khám phá cách tối ưu hóa tính năng AI tích hợp trực tiếp vào trình duyệt với hiệu suất cao hơn, hỗ trợ chạy mô hình AI offline và chuyển đổi mô hình từ các framework như PyTorch, TensorFlow dễ dàng hơn.

LiteRT.js, Google's high performance Web AI Inference

Google has announced LiteRT.js, a JavaScript binding of its LiteRT on-device inference library that enables running ML models directly in the browser. It supports hardware acceleration via WebGPU, XNNPACK (CPU), and WebNN (NPU), delivering up to 3x speedups over existing web runtimes like TensorFlow.js and 5-60x gains when using GPU/NPU over CPU. The library supports .tflite models, PyTorch model conversion via LiteRT Torch, and tailored quantization through AI Edge Quantizer. An npm package is available, and Ultralytics has integrated official LiteRT export support for YOLO models. Use cases include object detection, depth estimation, image upscaling, and audio processing entirely client-side with no server costs.

Servo aims to empower developers with a lightweight, high-performance alternative for embedding web technologies in applications.

Servo 0.3.0 covers all changes landed in May across 391 commits. Security fixes include updating SpiderMonkey to 140.10.1 to patch memory safety bugs (CVE-2026-7322, CVE-2026-7323). New web platform features include several font-variant CSS properties, mp4 without fast start in video, multipart form encoding, and new DOM APIs. The embedding API sees breaking changes to cookies, Preferences, and DiagnosticsLogging. servoshell gains --host-file and --userscripts options, plus DevTools Debugger improvements including script blackboxing. Performance improvements span layout optimizations (immutable fragment tree, lazy scrollable overflow, combined traversals), DOM attribute efficiency gains, reduced thread pool usage, and faster build times. Stability fixes address crashes in MediaStream, CSS content, DevTools, and layout. The project also added CI checks to reject AI-generated contributions.

Servo Browser Engine Continues Making Much Progress On Less Than $8k Monthly

Servo 0.3 browser engine has been released alongside a monthly development recap. Key improvements include CSS font feature support, new DOM APIs, SpiderMonkey JavaScript engine updates fixing memory safety bugs, accessibility work, WebGPU feature additions, a new about:memory diagnostic tool, and reduced OS thread usage per CPU. The project operates on roughly $7,659/month in donations — below their $10k monthly goal — with funds covering CI servers, Outreachy interns, and maintainer costs.

Building Persistent Page Transitions with WebGPU and Vanilla JavaScript

A step-by-step walkthrough of building seamless GPU-powered page transitions using WebGPU and vanilla JavaScript. The technique uses a persistent pool of WebGPU image planes that are never created or destroyed — instead they are detached from DOM tracking during transitions, tweened freely with GSAP (bounds and opacity), then reattached to the destination page's slots. A lightweight SPA router intercepts navigation, injects the new page alongside the old, fires out() and in() transition methods concurrently, and removes the old page only after all tweens complete. Key patterns include using getBoundingClientRect() for coordinate-free layout sync, a mutating lock to prevent overlapping transitions, and three transition roles: keep (morph), remove (fade out), and add (stamp + fade in).

Servo 0.3 Released With The Demo Browser Becoming More Useful

Servo 0.3 has been released, bringing improvements to the servoshell demo browser and the underlying Rust-based browser engine. New features include additional scripting support, CSS enhancements like font-variant-numeric, layout improvements, WebGPU enhancements, and better developer tools. The project has also updated to Rust 1.95. While servoshell is still not suitable for daily use, it is increasingly capable and shows promise as an embedded browser engine alternative to the Chromium Embedded Framework (CEF).

Figma’s design agent, now with custom tools and greater context

Figma's design agent is now in open beta with expanded capabilities. Designers can prompt the agent to build reusable generative plugins and WebGPU-powered shader effects and fills directly on the canvas—no developer setup required. New context features let users attach files, reference other Figma files, search the web, and connect external tools via MCP connectors (GitHub, Atlassian, Slack, Linear, Hex). A new Skills system lets teams save and share reusable prompt-based slash commands to codify design philosophies and workflows. Agent conversations are visible to collaborators by default, turning iteration history into a shared resource.

What's New in WebGPU (Chrome 149-150)

Chrome 149-150 bổ sung hai tính năng WebGPU quan trọng: Immediates (push constants/root constants) cho phép truyền dữ liệu nhỏ, thay đổi thường xuyên trực tiếp vào shader qua WGSL <immediate> và API setImmediates(), tối ưu hiệu suất bằng cách bỏ qua tạo buffer GPU. Đồng thời, quy tắc validation chặt chẽ hơn với transient attachments, yêu cầu viewFormats rỗng khi tạo texture tạm thời và hạn chế thay đổi usage flags trong createView().

Lập trình viên nên đọc bài này để cập nhật cách tối ưu hóa hiệu suất rendering bằng Immediates trong WebGPU, giúp giảm chi phí CPU-GPU và xử lý dữ liệu thay đổi thường xuyên trên mỗi vẽ hình, đồng thời nắm rõ các quy tắc mới về transient attachments để tránh lỗi và bảo đảm tính ổn định trong ứng dụng.