This summer Oskar Stålberg released his game Townscaper (see video above). Build quaint island towns with curvy streets, small hamlets, soaring cathedrals, canal networks, or sky cities on stilts. Build the town your dreams, block by block. No goal. No real gameplay. Just plenty of building and plenty of beauty. That’s it. Yesterday he surprised …
Tag Archives: webgl
How To create the Stripe Website Gradient Effect
Kevin Hufnagl reverse engineered Stripe’s Website Gradient Effect. Here’s what he found on the JavaScript side of things: Essentially they are using a minimalistic implementation of WebGL which they called minigl and a Gradient Class which is used to store all of our animation properties and control the animation. See the Pen Stripe Website Gradient …
Continue reading “How To create the Stripe Website Gradient Effect”
Google Maps JavaScript API WebGL
I’m a huge mapping nerd, so I’m a sucker for the Maps JavaScript API WebGL beta which was announced at Google I/O back in May: Introduced are three new features: WebGL Overlay View lets you add custom 2D and 3D graphics and animated content to your maps. Tilt and heading can now be adjusted programmatically, …
Mars 2020 Entry Descent Landing
Relive the whole Mars 2020 Entry Descent Landing in your browser, in 3D, powered by Three.JS/WebGL 🤯 Here’s a few pointers to use: Use the ⏪ ⏩ at the bottom to speed up / slow down the animation Scroll over the pane on the left to jump between phases of the landing You can click …
GitHub Skyline — Your GitHub Story in 3D
Nice in-browser 3D-render of your GitHub History. You can download the result as a .stl file to run it through your 3D printer. Here’s my 2020 timeline for example: I take pride in the fact that my Saturdays (front row) and Sundays (back row) remain as good as empty, and that there’s an occasional gap …
Building Future UIs
The folks over at Formidable have been experimenting with Houdini and WebGL/Three.js to create futuristic UIs Futuristic sci-fi UIs in movies often support a story where humans, computers, and interfaces are far more advanced than today, often mixed with things like super powers, warp drives, and holograms. What is it about these UIs that feel …
How we built the GitHub globe
The GitHub homepage features a very nice rotating 3D globe, augmented with realtime data shooting around. Here’s how they built it: At the most fundamental level, the globe runs in a WebGL context powered by three.js. We feed it data of recent pull requests that have been created and merged around the world through a …
glcheck – A testing framework for WebGL
glcheck is a WebGL-focused testing framework. It runs unit and render tests using puppeteer which allows it to run automated tests and generate coverage reports for both WebGL 1 and 2 applications. glcheck (GitHub) →
How Facebook 3D Photos work, and how to create one yourself
💡 Sparked by the 3D Ken Burns Effect from a Single Image post, I was reminded of a few other 3D photo things … About a year ago, Facebook announced a feature named “3D Photos”, a way to show photos taken with Apple’s “Portrait Mode” (or any other device that does the same) interactively: Whether …
Continue reading “How Facebook 3D Photos work, and how to create one yourself”
Stinkmoji – Animoji on the web
Powered by getUserMedia() and WebGL: Stinkmoji →