Building Photoshop in JavaScript & WebGL

Overview

• WebGL basics
• Image manipulation

Slides: felixpalmer.github.io/photo.gl/presentation.html

WebGL basics

• Ask canvas for a WebGL context
• Build quad to render
• Write shaders: vertex & fragment
• Compile into program (in browser)
• Pass data into program using uniforms and attributes
• Output is rendered into canvas element

Getting a WebGL context

var canvas = document.createElement( 'canvas' );
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
container.appendChild( canvas );
var gl = canvas.getContext( 'webgl' );

Define a quad

quad.vertices = new Float32Array( [
  -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // 1st triangle
  -1.0, 1.0, 1.0, -1.0, 1.0, 1.0 // 2nd triangle
] );

Vertex shader

attribute vec2 aCoordinate;
varying vec2 vCoordinate;
void main() {
  vCoordinate = aCoordinate;
  gl_Position = vec4( aCoordinate, 0, 1 );
}

Fragment shader

varying vec2 vCoordinate;
void main() {
  gl_FragColor = vec4( vCoordinate, 0.0, 1.0 );
}

Pipeline

• 3 types of variables to pass around data:
1. uniform global information
2. varying flow from vertex to fragment shader, interpolated
3. attribute per vertex information

WebGL basics - recap

• Ask canvas for a WebGL context
• Build quad to render
• Write shaders: vertex & fragment
• Compile into program (in browser)
• Pass data into program using uniforms and attributes
• Output is rendered into canvas element

Image manipulation

• Scaling, translating & rotating
• Simple colour tricks
• Blending
• Warping
• Pixel effects

Scaling, translating & rotating

• Most natural to do this in vertex shader
• Scaling is just multiplication
• Translating just addition
• For rotation need to use a matrix

Simple colour tricks

• Swapping colour channels
• Converting to greyscale
• Color isolation

Blending

• Blending multiple images
• Vignette

Warping

• Stretching
• Fisheye
• Twirl
• Waves
• Radial waves

Pixel effects

• Pixellating
• Region pixellation
• Blurring