Articles by Tag #webgl
Browse our collection of articles on various topics related to IT technologies. Dive in and explore something new!
Why I Rebuilt My WebGPU Triangle Demo From Scratch
I built my Triangle Demo because I wanted a clean WebGPU study lab that made sense for how I learn. I...
Project Phantom: The 6D Halloween Metaverse Experience
This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing title:...
My favourite Web API - Webgl
If you’re anything like I was a year ago, you might never have heard of WebGL. It’s definitely not...
How to build reactive voice avatars in React with GlasatarJS
Build reactive voice avatars in React with Glasatar.js — a WebGL library that makes audio streams ripple and refract like privacy glass.
Learning shader effect with Three.js TSL
After years of building web applications I’d drifted away from artistically driven code; as a former...
Normal Maps vs Displacement Maps in Three.js: What Beginners Get Wrong
Normal Maps vs. Displacement Maps in Three.js: What They Do and When to Use Them So today...
SVG vs Canvas vs WebGL for Diagram Viewers: Tradeoffs, Bottlenecks, and How to Measure
Building an interactive diagram viewer isn’t just “draw some boxes and lines.” In real life you’ve...
Building a Retro CRT Terminal Website with WebGL and GitHub Copilot (Claude Opus 4.5)
During the holidays, I was browsing the internet when I came across cool-retro-term, an open-source...
I have open-sourced a WebGL front-end for your terminal that emulates a CRT monitor
I'm thrilled to announce that I've open sourced cool-retro-term-webgl, a modern WebGL-based...
🌐 WebGL and 3D on the Web: How to Create Immersive 3D Experiences That Wow Users
“I thought it was a video — until I moved my mouse and the object started spinning.” That was my...
🎉 Building an Interactive 3D Flipping Coin with Three.js: Complete Guide
In this comprehensive tutorial, we'll build an interactive 3D Flipping commemorative coin using...
I Built Glasses-Free 3D for Web Browsers Using Webcam Head Tracking
The Problem VR adoption remains low. Headsets are expensive and uncomfortable. But billions of people...
A temporary demo that implements a multi-building LOD mechanism.
My little 3D project has actually been continuously updated, and last month I named it Open World...
Liquid Glass Shader: WebGL-Powered iOS-Style Glass Effects for JavaScript
Liquid Glass Shader, a WebGL library that creates iOS 26-style glass effects with cursor-reactive...
🎮 Build Your Next Game Faster: Mastering Phaser, Three.js, and Babylon.js
Last weekend, I stumbled upon a browser-based game that completely blew me away. In just a few...
Building a Web-Unity WebGL Bridge: A Practical Guide
When you’re building games that need both the power of Unity’s 3D engine and the flexibility of...
Why Can You Right-Click Save a WebGL Canvas? A 20-Year History of Browser Graphics
Below is a 3D fractal called "Mandelbulb" being rendered in real-time by the GPU. You can drag to...
Unity WebGL Background Tabs: Autoplay & Performance Fix
Unity WebGL games face severe performance degradation in inactive browser tabs due to aggressive...
Briefly introduce the history of openworld.js
These past few days, I've been working on multi-models. Actually, my idea is to implement as many...
That Side Project You Abandoned? I Finally Finished Mine.
We all have one. That side project you started super excited, thinking it would be the one. You set...
6 Stunning WebGL & Three.js Portfolios
Recently, I’ve been delving into WebGL and Three.js effects, and I’ve come across six portfolios that...
Mastering Shadows in Three.js: Setup, Configuration, and Optimization
Shadows are essential for adding depth and realism to Three.js scenes. They help ground objects and...
My journey optimizing TensorFlow.js to run neural networks directly in the client's browser.
As a computer science student, most of my AI coursework was strictly Python-based. We used PyTorch or...
Babylon.js vs Three.js: The 360 Technical Comparison for Production Workloads
Choosing a WebGL/WebGPU engine is one of the most consequential decisions for any modern 3D...
30 Amazing 3D Projects Built with Gemini 3.0 Pro
I've been exploring the incredible capabilities of Gemini AI Pro for creating interactive 3D projects...
Building a Realistic 3D Monitor with Reflections and HTML Interface using React Three Fiber
Ever wanted to create stunning 3D visualizations that feel truly interactive? Today, we'll build a...
Welcome to Sunset Avenue
What if I could live in a beautiful town with all my favorite people as neighbors? Would’ve been...
🧠 From 2,500 to 1,000,000 Particles: Supercharging a Three.js Demo with WebAssembly
When I first explored the classic webgl_points_waves demo in Three.js, I was amazed by the simplicity...
How to Build a GPU-Accelerated Image Filter with WebGL and JavaScript
WebGL is a JavaScript API that enables rendering high-performance 2D and 3D graphics directly in the...
AI-Generated Shader Experiments: A Journey
I've always been fascinated by shaders, especially the incredible work seen on platforms like...