NotesWebGL shaders rendered to canvas elements are a great way to add interesting visuals to a website. Unfortunately, unlike HTML, they do not natively integrate with CSS. This post shows a way to work around this limitation and influence WebGL graphics from CSS.FeedUnfurl
NotesHighlight:In this article, I hope to convince you of the power of post-processing effects and that nothing beats an elegant retro vibe applied to a website 👌✨. We'll also look into examples of dithering and pixel art from very talented folks who use the same processes that I'll be introducing later on, as well as some of my own creations that I built while learning about all this.
A detailed walkthrough of the inner workings of dithering and other shading techniques to give a retro look and feel to your WebGL and React Three Fiber work.FeedUnfurl
NotesI participated in this year's js13kGames, a JavaScript game development competition with a file size limit of 13kb, including code, assets and everything else. My entry was Underrun, a twin stick shooter using WebGL.FeedUnfurl
NotesLet's ignore that we haven't got a web-agreed-upon way to do just about anything, much less basic line-of-business apps with data-bound text boxes over data, and just revel in the fact that we can do hardware-accelerated 3D graphics in our browsers with WebGL. This works today in all the latest browsers.FeedUnfurl
NotesThe Artillery Platform, which Atlas is built upon, uses JavaScript and WebGL to deliver a high-quality, low-latency multiplayer gaming experience to anyone with a modern web browser. The platform is centered around 3D experiences with real-time multiplayer capability and strong community support. The JavaScript-based game engine features a component-entity design, a modern deferred rendering pipeline, and development tools designed to allow creative expression and super-fast iteration.Unfurl
Notes Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl. Unfurl
Notes"Last night, I checked in some more work from Mark Steele (who's focusing on the Firefox WebGL implementation), and along with that, enabled WebGL in trunk nightlies. (Finally!)"Unfurl
Nicolas Mattia – How to Set WebGL Shader Colors with CSS and JavaScript
The Art of Dithering and Retro Shading for the Web - Maxime Heckel's Blog
Underrun – Making Of - PhobosLab
Easy accelerated 3D Games in a browser with JavaScript and WebGL using Three.js or Babylon.js - Scott Hanselman
Two.js
On WebGL — Acko.net
Ship - shapeWright.com