Category Archives: Workshop

Workshop 16 – Light and shadow made easy

2nd June 2015

Workshop 16 – Light and shadow made easy… with Three.js

Work files
All work files as a zip

Worksheets
Worksheets in pdf format

Basic scene
A basic scene rendered as wireframe

Coloured material
Each object gas its own basic coloured material. Still no lighting.

Coloured material with per vertex shading

Coloured material with per vertex shading and added shadow

Coloured material with per pixel shading and added shadow

Point light

Spotlight

Workshop 15 – Light and shade

21st April 2015

Worksheets
Worksheets in pdf format

Work files and worksheet
All work files and worksheet pdf as zip

Basic scene
No lighting applied, each object within the scene is displayed with its colour.
Each object looks like a silhouette with no visible detail.

00lightnone
Scene with ambient light (and emissive material)
Ambient lighting is now applied to the scene.
Ambient lighting is applied evenly to an object. So, each object still looks like a silhouette with no visible detail. However the lightness of the scene can be controlled.
But, note that the “light” is not affected by the ambient light as it only has an emissive material.

01lightambient
Directional light
A directional light is added to the scene.

02lightdirectional
Directional light – fragment shader
Again directional light is added to the scene.
However, the lighting calculations are done in the fragment shader, making the lighting more accurate.

03lightdirectionalfrag
Directional light with materials (frag)
Support for all materials (ambient, emissive, diffuse and specular) is added to the scene.
Setting these values appropriately simulates different materials such as gold or copper.

04lightdirectionalmaterialfrag
Scene with point light and materials (frag)
A point light is added to the scene.
A point light has a position as well as a direction so as it approaches an object it has a greater effect.

05lightpointmaterial

Workshop 11 – WebGL Models

WebGL Models
Thursday, 30th October – Skills Matter, London

How to make (or find), load and display them. And a bit of debugging, too.

Prerequisites
The workshop will be about 50:50 presentation and hands on.
• A laptop with a browser that supports WebGL (http://get.webgl.org/) and your favourite editor.
• Some knowledge of HTML and programming preferably Javascript (or similar).
• Some features will require a server, although there are workarounds. (Brackets.io and Visual Studio provide one, or you can use node.js or whatever you’re comfortable with.)

Register
If you’re planning on attending, please RSVP on the MeetUp page (http://www.meetup.com/WebGL-Workshop-London/events/210678942/) and register on the Skills Matter site (https://www.skillsmatter.com/meetups/6576-webgl-models).

Workshop 9 – Back to Basics: Part 2

Back to Basics: Part 2 (WebGL, Three.js and Babylon.js)
Our ninth Workshop will take place on Thursday, 28th August at SkillsMatter, 116-120 Goswell Road, London
This month we finish the rotating dice in raw WebGL, then do the same in THREE.js and Babylon.js for comparison.

Prerequisites
• A laptop with a browser that supports WebGL (http://get.webgl.org/) and an editor that can handle HTML and JavaScript.
• Some knowledge of HTML and programming, preferably JavaScript (or similar).
• Some features may require a server (e.g. image loading), although there are workarounds. (Brackets.io and Visual Studio provide one, or you can use node.js or whatever you’re comfortable with.)

Register
If you’re planning on attending please RSVP on our MeetUp site and register on the SkillsMatter site (SkillsMatter.com).

Workshops

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