#webgl

Presets for Butterchurn Visualizer, converted from Milkdrop presets

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

Highlight: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.

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

lmorchard starred jberg/butterchurn

Let'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.

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

Fabergé Fractals by Tom Beddard, using his WebGL-based fractal engine, Fractal Lab.

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.

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.

Come try WebGL, the water's fine.

Come try WebGL, the water's fine.

Oh, this is pretty.

Printable, procedurally-built 3d spaceship models

"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!)"