WebGL Workshop

Fast, plug-in free 2D and 3D graphics for the browser

Skip to content
  • Home
  • Articles
    • Browser based AR and VR
    • Material Viewer
    • My Web Development Set Up in Visual Studio
  • Blog
  • Demos
  • Presentations
    • FX Digital – WebGL
    • AsyncJS – Beyond2D
    • Develop 2014
    • Introduction to 3D with WebGL and HTML5
    • Introduction to three.js – Algorithmic Art
    • Introduction to WebGL – Algorithmic Art
    • Shaders
    • State of the Art
    • WebGL Academy
    • WebVR – GLSL
    • HTML Codeshow #10
  • Resources
  • Workshops
    • A Gentle Introduction to Babylon.js
    • A Gentle Introduction to Shaders – Fragment Shaders
    • A Gentle Introduction to Shaders – Image Processing
    • A Gentle Introduction to Shaders – Vertex Shaders
    • A Gentler Introduction to Shaders – Vertex Shaders, Again
    • Workshop 01 – Introduction
    • Workshop 02 – Programming dice
    • Workshop 03 – Light and Shadow
    • Workshop 04 – A look at three.js
    • Workshop 05 – A bit more Three.js
    • Workshop 06 – Writing Shaders and Effects for Three.js
    • Workshop 07 – Data Visualisation
    • Workshop 08 – Back To Basics
    • Workshop 09 – Back to Basics: Part 2 (WebGL, Three.js and Babylon.js)
    • Workshop 10 – Fonts and models
    • Workshop 11 – Models
    • Workshop 11 – Models
    • Workshop 12 – Christmas Comes to Babylon Three
    • Workshop 14 – Introduction to WebGL
    • Workshop 15 – Light and shade
    • Workshop 16 – Light and shadow made easy
    • Workshop 18 – Practical Learnings of WebGL for Make Benefit Glorious Internet of Web
    • Workshop 22 – GLSL
    • Workshop 23 – Workflow, Clara.io & Babylon.js
    • Workshop 24 – WebGL and Animation
    • Workshop 25 – Into The Second Dimension
    • Workshop 26 – Babylon, Games ‘n’ Stuff
    • Workshop 28 – Intro to WebGL 2.0
    • Workshop 31 – AR, VR & WebGL Academy
    • Workshop 32 – WebGL Academy & Pixel Spirit
  • About

FX Digital – WebGL

Presentation http://webglworkshop.com/fxdigital-webgl/

CodeSandBox.io – Preview

Triangle
Vertex Shader
Animation
Image Processing
Transition

Hands on

Skellington

HTML shell

Colour and square

Tasks
Answers

Fragment Shader

Tasks
Answers

Functions

Tasks
Answers
Answers using step

Animation

Tasks
Answers

Image Processing

Tasks
Answers

Transitions

Tasks
Answers

Extra

More Fragment Shader plus Shapes
More Image Processing
More Transitions

Hire me

For all your 3D, WebGL, GLSL, Three.js, etc. needs.
[email protected]

Upcoming meet ups

Recent Posts

  • Even more animation with PlayCanvas July 5, 2017
  • Collision fun June 26, 2017
  • More FBX — this time with Mixamo and Babylon.js June 20, 2017
  • FBX with PlayCanvas June 19, 2017
  • Down the rabbit hole with FBX June 15, 2017

Recent Comments

    Archives

    • July 2017
    • June 2017
    • December 2015
    • May 2015
    • February 2015
    • January 2015
    • December 2014
    • October 2014
    • August 2014
    • January 2014

    Categories

    • About
    • AR
    • Babylon.js
    • Demos
    • Develop conference
    • Game development
    • Game jam
    • GLSL
    • PlayCanvas
    • Posts
    • Presentations
    • Shaders
    • Three.js
    • Uncategorized
    • VR
    • WebGL
    • Workshop

    Meta

    • Log in
    • Entries feed
    • Comments feed
    • WordPress.org
    Proudly powered by WordPress