#webgl

GTA.js, a reimplementation of the 1997 Grand Theft Auto engine in JavaScript and WebGL

Dự án GTA.js tái tạo lại engine của game Grand Theft Auto năm 1997 bằng JavaScript và WebGL, có thể chơi tại gtajs.wtf. Đây là bản reimplement chứ không phải emulator, nên một số vật lý và animation khác với bản gốc, nhưng engine nhiệm vụ chính xác dựa trên tài liệu mtd.doc. Tác giả sử dụng Gemini AI để triển khai hầu hết các tính năng, tham khảo tài liệu mở, ghi chú cộng đồng và trí nhớ cá nhân về game. Hiện tại game đã chơi được nhưng cảnh sát (cops) vẫn chưa được implement.

Lập trình viên nên đọc bài này để khám phá cách tái tạo lại engine game cổ bằng JavaScript và WebGL từ con số không.

Show HN: I rebuilt my old canvas 3D library as a small WebGL 2 library – phoria2

Phoria2 is a JavaScript library for building 3D visuals on the web, including charts, dashboards and product viewers, using a WebGL 2 renderer. It has no runtime dependencies, ships as plain ES modules, and only redraws views when something changes. Every option is validated so a mistake returns an error describing the fix, aimed at both developers and coding agents. It's MIT licensed, installable via 'npm install phoria2', and includes a React example. Demos cover PBR materials, instancing, glTF models, particles, shadows, and integrations with WebAssembly libraries like Rapier for physics and Manifold for solid modeling.

LittleJS is 2D and 3D now

LittleJS, engine HTML5 nhỏ không phụ thuộc dependency, vừa cập nhật lớn với renderer 3D hoàn chỉnh, cho phép render 2D và 3D cùng canvas với shared physics, children, và timers. Engine được tối ưu với batched WebGL2 sprites, instanced 3D drawing, và mới benchmark với PixiJS, Three.js, PlayCanvas, Phaser, Babylon.js cho thấy hiệu năng vượt trội. Các công cụ AI mới gồm LittleJS AI toolkit, Claude Code plugin, LittleJS GPT cho no-code game building, cùng 50+ game mẫu open-source. Trang littlejsengine.com demo tất cả tính năng, và game jam thứ 3 diễn ra từ 2/10 đến 2/11.

LittleJS hiện hỗ trợ cả 2D và 3D với công cụ AI mạnh mẽ sẽ mang lại cho lập trình viên game giải pháp phát triển đa năng và hiệu quả.

How to Build Disaster Simulations on a Real Map: Animated Canvas Layers and Collapsing 3D Buildings with Mapbox GL JS and Three.js

Bối cảnh: Các dự án map thường cần vượt qua việc chỉ hiển thị markers và polygons để tạo ra các hiệu ứng động như nước dâng lên đường, khói theo gió, sóng xung kích lan tỏa. Nguyên nhân kỹ thuật: Giải pháp này kết hợp Mapbox GL JS với Three.js để tạo các lớp canvas animation và hiệu ứng 3D sụp đổ tòa nhà. Hệ quả: Kết quả cho phép xây dựng các mô phỏng thảm họa trên bản đồ thực tế với hiệu ứng hình ảnh chân thực. Điều đáng học: Bài viết cung cấp hướng dẫn cụ thể triển khai lớp animation chồng lên map 3D và tạo hiệu ứng sụp đổ tòa nhà sử dụng WebGL rendering pipeline.

Bài viết này giúp bạn tạo dựng mô phỏng thảm họa sống động trên bản đồ thực tế bằng cách kết hợp Mapbox GL JS và Three.js.

Explore This Tactile UI Powered By Real-Time WebGL Shader

Bối cảnh là một giao diện người dùng (UI) mang trải nghiệm vật lý mô phỏng gelatin với hiệu ứng hình ảnh chân thực. Nguyên nhân kỹ thuật sử dụng WebGL shaders real-time để tính toán độ biến dạng, ánh sáng phản chiếu và độ đàn hồi của bề mặt khi tương tác. Hệ quả mang lại trải nghiệm UI gần như thật, với độ trễ chỉ 16ms và hỗ trợ tối đa 60 FPS trên thiết bị di động. Điều đáng học là cách kết hợp giữa tính toán đồ họa real-time và mô hình vật lý tạo ra hiệu ứng UI độc đáo mà không cần công cụ engine game phức tạp như Unity hay Unreal.

Bài viết này giúp lập trình viên khám phá cách tạo hiệu ứng UI glass mượt mà với WebGL shader thực thời.

My Son Loves Squishies, So I Built Him One for the Browser

Bối cảnh của bài viết là một lập trình viên tham gia thử thách Hacktoberfest Weekend Challenge để tạo món quà con trai yêu thích - Squishies. Nguyên nhân kỹ thuật là sử dụng JavaScript, HTML5 Canvas và các thư viện như Matter.js để xây dựng phiên bản Squishies trực tuyến. Hệ quả là một trò chơi tương tác nơi người chơi có thể nén, kéo và xoay các mô hình squishy trên trình duyệt. Điều đáng học là cách kết hợp vật lý game engine với đồ họa Canvas để tạo trải nghiệm tương tác chân thực, có thể triển khai hoàn toàn trong trình duyệt mà không cần cài đặt.

Bài viết chia sẻ cách xây dựng ứng dụng Squishies trong trình duyệt với mã nguồn mở, giúp các lập trình viên học hỏi kỹ năng phát triển web tương tác cho dự án Hacktoberfest.

It’s 7:55 AM at Gidan Kwano: How I Built “FUTMINNA Dash 3D” in a Single HTML File

How I built FUTMINNA Dash 3D, a single-file 3D browser game using Three.js, Cannon.js, and the Web Audio API inspired by Nigerian campus life

I still teach OpenGL ES 3.0

Loading...

HTML-in-Canvas updates: Iterating toward a better Web API

Chrome 150 and 155 introduce essential ergonomic updates, renaming, and API refinements to the HTML-in-Canvas experimental API.

Look at This Jiggly Jelly Dessert Made with Three.js

Misha Kiiatkin, also known as mesq, shared his stylized jelly dessert piece made with Three.js.

When Artificial Intelligence Enters the 3D World: The Story of Metarang’s Intelligent Assistant

When Artificial Intelligence Enters the 3D World: The Story of Metarang’s Intelligent Assistant A 3D assistant that is not designed simply to answer questions; it is designed to know where the user …

Seriously Impressive Real-Time Water Caustics That Run In Your Browser

Công nghệ water caustics real-time này có sẵn hai phiên bản Lite và Full trên nền tảng open-source. Hệ thống sử dụng WebGL và GPU compute shaders để tính toán ánh sáng phản chiếu dưới nước với hiệu suất cao. Trên GPU NVIDIA RTX 3080, bản Full đạt tốc độ 60 FPS trong khi bản Lite duy trì 120 FPS. Điều đáng học hỏi là cách tác giả tối ưu hóa việc kết hợp giữa vertex shader và fragment shader để tạo hiệu ứng ánh sáng chân thực mà vẫn giữ được độ mượt mà ngay trên trình duyệt web.

Bài viết cung cấp giải pháp thực hiện hiệu ứng quang học nước ấn tượng ngay trên trình duyệt với phiên bản mã nguồn mở dễ tiếp cận.

Canvas UI Ships 35 HTML-in-Canvas Components That Run WebGL and WebGPU Effects Over Live DOM

Canvas UI là thư viện mã nguồn mở của David Haz sử dụng API HTML-in-Canvas thử nghiệm. Thư viện cung cấp 35 component kết hợp hiệu ứng WebGL và WebGPU với nội dung DOM trực tiếp. Cách tiếp cận này cho phép chạy hiệu năng GPU trên các element HTML thông thường mà không cần render lại toàn bộ trang. Điều này mở ra hướng mới tạo UI động mà không cần dùng virtual DOM hay nhiều canvas fragment. Công nghệ này có thể tối ưu performance cho ứng dụng web đồ họa phức tạp.

Canvas UI giúp tạo ra các hiệu ứng GPU mạnh mẽ trên giao diện người dùng mà không cần rời khỏi môi trường Canvas.

I Turned DEV.to Into a Walkable 3D Library — Debugging It Has Been a Nightmare

Đây là dự án biến DEV.to thành thư viện 3D có thể đi bộ trong không gian first-person, sử dụng công nghệ Next.js. Tác giả đã phải đối mặt với những thách thức debugging phức tạp khi xử lý hiệu năng rendering trong môi trường 3D. Dự án này cho thấy tiềm năng của việc áp dụng công nghệ đồ họa 3D vào các nền tảng cộng đồng truyền thống. Có thể học hỏi kinh nghiệm xử lý performance optimization khi kết hợp web development với đồ họa 3D thực tế.

Đọc bài này để khám phá cách xây dựng một thư viện 3D từ DEV.to và trải nghiệm thử thách khi gỡ lỗi dự án táo bạo này.

Lava Bound

Trò chơi Lava Bound là một game trình duyệt được phát triển bằng công nghệ Exekite. Đây là một dự án nhỏ với hình ảnh đơn giản nhưng gameplay hấp dẫn. Trò chơi có tính tương tác cao với người chơi ngay trên nền tảng web mà không cần cài đặt. Bạn có thể trải nghiệm Lava Bound để học hỏi cách xây dựng các ứng dụng web game đơn giản với Exekite.

Lava Bound cho bạn thấy cách xây dựng game trình duyệt thú vị với Exekite.