All posts tagged: WebGL

Continue Reading header image

Quick tip: Shaders in Sublime Text

Sublime Text is my favorite text editor and here’s a quick tip if you’re working with shaders in three.js. I prefer to store my shaders as a separate file. And to do this in the same way as three.js all shader code must be enclosed in quotes and comma-separated. Enter this in the search and replace boxes in Sublime Text and you have a quick way to prepare your shaders for three.js: Note the ‘regular expression’ button must be active.

New interactive browser based music video

“Valley Of Uncanny #01″ is an interactive animation with music by Zack Christ that explores the relationship between visual and musical rhythms, glitches and distortions. The animation is a part of a series of different virtual sculptures I made of human bodies and faces. Often in games and 3D art the human body is idealized into sexy or heroic archetypes but in this project the two heads are distorted and glitched in ways that create more unfamiliar expressions that sometimes dissolve into pure absctract shapes. The animation is created in WebGL using the popular library Three.js and in order to precisely control the progression of the visuals multiple tracks of keyframes are loaded into the application in order to control animation parameters in sync with the music. The piece is an adaptation of some of the material, that I also use when I perform live as a VJ at concerts. […]

WebGL experiment: Expose line drawing

Here’s a WebGL demo I made – when you click the canvas a hand drawn image slowly appears. Try it out: The effect is achieved using a shader based technique called reaction diffusion as a mask over the image. The reaction effect ‘feeds’ on the line drawing and gradually spreads as far as possible following the black lines. My code builds upon an example by pmneila.

Introducing Sliider – VJing with a web browser

Sliider is a simple yet usable application I’ve created for VJing with webGL and other interactive web based graphics. It works on Mac OSX, Windows and Linux. I am releasing an early preview version that has these features: Embedded Chrome browser. 99% of what works in Chrome will work in Sliider. full screen output A B crossfader Load html files from disk or the web Syphon output for the OSX version Control panel with sliders and buttons Drag and click in the scene with the mouse Download Sliider preview version Here’s a video where I demonstrate Sliider Sliider – Demonstration from Udart (Vibeke Bertelsen) on Vimeo. What is Sliider Sliider is basically a Chrome browser with some added features that makes it more suited for live performance. You can create your own html pages with any graphics you like whether it is based on WebGl, canvas or SVG and Sliider […]

Download Sliider preview version

Sliider preview version is released for Mac, Windows and Linux. It is open source and free. For Mac you can choose between a Syphon and a Fullscreen version. Download from the table below. Also download a set of example visuals that demonstrate the capabilities of Sliider: Download examples App version Download Fullscreen output Syphon output Preview window Control scene with mouse Mac: Sliider preview Syphon (OS X 10.8+) Download no yes yes yes Mac: Sliider preview Fullscreen (OS X 10.7+) Download yes no no no Windows: Sliider preview Download yes no no no Linux: Sliider preview See info below yes no no no Quick start Download the ‘Examples’ package and the Sliider app for your platform. Click the left most ‘Open’ button in the control window Click ‘Open file’ Locate the index.html in one of the Examples folders and click OK For Linux users There is no prepackaged version for […]

Continue Reading webgl01

Getting started with WebGL

Here’s the thing that takes up my spare time right now: WebGL. For me with my web developer background (PHP, javascript, .NET) and my growing interest in realtime 3D graphics it’s so obvious that I can’t believe I haven’t played around with it before. The good thing is that at this point there are plenty of resources for those who want to learn and that it has been implemented in a stable way in some major browsers. The downside is that it’s not an obvious choice for VJs as it does not integrate with VJ apps. But I’m sure tools will appear over time to overcome this. Just have a look at some of the mind-blowing visual possibilities WebGL brings for visualists: Lights Blast Often when delving into a new programming environment the hard part comes right at the beginning when you try to get a grasp of the […]