PUBLIC MARKS from sbrothier with tags pixelshaders & WebGL

Traditionally, maps have been expensive and time-consuming to make, but that’s changing fast. High-quality maps are easier to make every day thanks to OpenStreetMap and modern computer graphics capabilities, and we feel they can be pushed even further with ideas and techniques from 3D animation, video games, and other visual disciplines. To test this theory, the Mapzen graphics team has been working on a mapping library called Tangram.

I hope there's no snakes

ThreeAudio helps you create music visualizations in Three.js, by exposing audio data in GLSL shaders. It can be used directly with Three.js or as a tQuery plug-in.

ImageGlitcher allows you to glitch any image and save the result. Glitched images look like they are being displayed on a broken analog TV. Check it out here. This demo was built using Peter Nitsch’s BitmapData.js – a very useful JS port of ActionScript’s BitmapData class which makes it easy to manipulate canvas image data. After playing around with it for a while I got some pleasing glitched image results, so I figured it would be useful to wrap it up as a little app. The glitch effect is achieved by:

I recently started playing with shaders in three.js and I wanted to share some of what I’ve discovered so far. Shaders are the ‘secret sauce’ of modern graphics programming and understanding them gives you a lot of extra graphical fire-power. For me the big obstacle to learning shaders was the lack of documentation or simple examples, so hopefully this post will be useful to others starting out. This post will focus on using pixel shaders to add post-processing effects to Three.js scenes. This post assumes you already know the basics of using Three.js.

Pixel Shaders An Interactive Introduction to Graphics Programming

Build and share your best shaders with the world and get Inspired

WebGL is not only about rendering 3D graphics. While WebGL allows you to create stunning 3D, it can also be used for 2D rendering. One common use-case is pixel manipulation, or image post-processing, which allows us to add blur or other filter effects to images.

This repository contains GLSL source code for Perlin noise in 2D, 3D and 4D, both the modern simplex versions and the classic versions, including periodic noise similar to the pnoise() function in RenderMan SL. The functions have very good performance and no dependencies on external data. The code is open source, licensed under the terms of the OSI-approved and very permissive MIT license. For licensing details, please refer to the LICENSE file in the repository.

This is a tutorial showing the steps to create an animated shape, using a sphere as a basic geometry and perlin noise to disturb the vertices. It also teaches how to add some more variation to the distortion and how to add colour. It's based on Fireball explosion, part of the Experiments with Perlin Noise Series.

I recently started playing with shaders in three.js and I wanted to share some of what I’ve discovered so far. Shaders are the ‘secret sauce’ of modern graphics programming and understanding them gives you a lot of extra graphical fire-power.

External resources