Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms...

20
Intro to WebGL Diego Cantor March 25 th 2014

Transcript of Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms...

Page 1: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

Intro to WebGL

Diego Cantor March 25th 2014

Page 2: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

About me

• Software Engineer

• PhD Candidate in Biomedical Engineering

• Wrote the WebGL Beginner's Guide

• I spend my free time working on • (WebGL framework)

Email: [email protected] Twitter: @diegocantor Voxelent: http://www.voxelent.com

mailto:[email protected]
http://www.voxelent.com/
Page 3: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

Goal

• Have a basic knowledge of what WebGL is and how it works

• Identify the data structures needed to perform parallel rendering in the GPU

• Learn about what is a vertex shader and a fragment shader

• Show you some cool demos and run a tutorial

Page 4: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

WebGL

• WebGL is a Software Specification http://www.khronos.org

– Drafted around May 2010

– Version 1.0 March 3rd 2011

• Real-time rendering capabilities to internet browsers -> access to GPU

• Implemented in JavaScript – Flexible / Mutable, Is it slow?

http://www.khronos.org/
Page 5: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

What about JavaScript performance

• JavaScript is slow

– Interpreted language

• WebGL provides JavaScript bindings to GLSL

• GPU code runs fast!

Page 6: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

WebGL is low level

• Lots of functions to communicate with the GPU

• It works as a machine state

• Creating domain-specific applications is a lengthy process if used directly

Making bread is low level Making a sandwich is high level

Page 7: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

Index Vertex Coordinates

0 (0,0)

1 (10,10)

2 (20,0)

3 (30,10)

4 (40,0)

Vertex Buffer Object (Coordinates)

Index Buffer Object

1

2

3

4 0

Vertex array = [0,0,10,10,20,0,30,10,40,0] Index array = [0,2,1,1,2,3,2,4,3]

coordinates

triangles

Vertex and Indices

Defining Minimal Geometry

Page 8: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

Additional Vertex Elements

VBO types

Coordinates

Colors

Normals

Scalars

Others

Page 9: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

WebGL pipeline from JavaScript to GPU

Vertex Shader

Fragment Shader

Uniforms

Framebuffer

Varyings

Attribute

input

input

input input

output i.e. per-vertex color, normals

i.e. lights, materials

Vertex Buffer Objects

coordinates colors

normals scalars

User defined properties

Points to

buffers

variables

GPU code = 'shaders'

Render destination

Page 10: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

Parallel procesing in the Vertex Shader

…

Attribute: aVertexPosition

Vertex Shader (Thread #1)

Vertex Shader (Thread #2)

Attribute: aVertexPosition

Vertex Shader (Thread #N)

Attribute: aVertexPosition

1.2 5.5 4.7 3.1 0 2.5 7 3 4.5 VBO (cordinates) = …

The number of threads depends on the local GPU capabilities

VBO (normals)

Attribute: aVertexNormal Attribute: aVertexNormal Attribute: aVertexNormal

… 1.0 0.2 0.7 0.0 1.0 0.0 0.5 2.0 0.0 … =

Page 11: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

From vertices to fragments

Vertex Coloring

In the Vertex Shader:

Pixel Coloring

In the Fragment Shader:

Page 12: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

Example

http://bit.ly/webglsquare

http://bit.ly/webglsquare
Page 13: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

A more interesting example

http://bit.ly/webglcar

http://bit.ly/webglcar
Page 14: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

WebGL is low level

• Lots of functions to communicate with the GPU

• It works as a machine state

• Creating domain-specific applications is a lengthy process if used directly

Making bread is low level Making a sandwich is high level

Page 15: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

WebGL Libraries

• Three.js: minimalistic, simple platform.

• Scene.js: robust, tested, real apps.

• GLSE: game oriented, working on animation.

Page 16: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

Voxelent

Robust, simple (easy to learn, easy to use) API with focus on software architecture

Page 17: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

Actor

Axis Floor BoundingBox

ModelManager

Program Diffusive Phong Custom

Renderer

Scene

Camera Orbiting Tracking

Interactor ClickAndGo Trackball 2D Picker

View

CameraManager ViewListener

Network

LightManager

Model

Geometry Texture

Light Directional Positional

Animation

KeyFrame

Frame2Frame

join share leave

Page 18: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

Demos Scenes, Actors and Views

Interaction

Keyframe Animation Frame-to-Frame Animation

Models

Page 19: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

To Do

1. Run tutorial-1

2. Learn how to operate the camera

3. Load more objects

4. Run tutorial on camera landmarks

Page 20: Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

Thank you!

• The book source code and demos available:

http://Bit.ly/webgl-code

• voxelent tutorials at:

http://voxelent.com/tutorials/

I can be reached by email at:

[email protected]

http://bit.ly/webgl-code
http://bit.ly/webgl-code
http://bit.ly/webgl-code
http://voxelent.com/tutorials/
mailto:[email protected]

Computer Graphics (cse167) OpenGLalchern/teaching/cse167_2021/3...OpenGL Pipeline ‣ Vertex attributes are stored in an array in a vertex buffer. ‣ Vertex shader takes this array

Computer Graphics (cse167) OpenGLalchern/teaching/cse167_2021/3...OpenGL Pipeline ‣ Vertex attributes are stored in an array in a vertex buffer. ‣ Vertex shader takes this array

A Crash Course in HLSL Matt Christian. Agenda About Me What is HLSL? What is a Shader? –Vertex Shaders –Pixel Shaders –Geometry Shaders HLSL/Shader History.

A Crash Course in HLSL Matt Christian. Agenda About Me What is HLSL? What is a Shader? –Vertex Shaders –Pixel Shaders –Geometry Shaders HLSL/Shader History.

Dome Projection using a Vertex Shader

Dome Projection using a Vertex Shader

Visualization with OpenGL · Data Vertex Shader Tessellation Control Shader Tessellation Evaluation Shader Geometry Shader Visualization with OpenGL Essential approaches to programming

Visualization with OpenGL · Data Vertex Shader Tessellation Control Shader Tessellation Evaluation Shader Geometry Shader Visualization with OpenGL Essential approaches to programming

vertex shader modules - Nvidiadeveloper.download.nvidia.com/assets/gamedev/docs/... · 2011. 3. 22. · Vertex Program Modules • Some interesting case studies. These programs are

vertex shader modules - Nvidiadeveloper.download.nvidia.com/assets/gamedev/docs/... · 2011. 3. 22. · Vertex Program Modules • Some interesting case studies. These programs are

Uniform variables - Cornell University• Uniform variables are shared between vertex and fragment shaders. • Declare once in vertex shader and once more in fragment shader. •

Uniform variables - Cornell University• Uniform variables are shared between vertex and fragment shaders. • Declare once in vertex shader and once more in fragment shader. •

NVIDIA nfiniteFX Engine: Programmable Vertex Shaders · A Vertex Shader can be considered a magic box—vertex data is fed into the box and different vertex data comes out. Every

NVIDIA nfiniteFX Engine: Programmable Vertex Shaders · A Vertex Shader can be considered a magic box—vertex data is fed into the box and different vertex data comes out. Every

Vertex Shader Introduction - developer.download.nvidia.comdeveloper.download.nvidia.com/assets/gamedev/docs/... · The address register, a0, is an additional temporary register that

Vertex Shader Introduction - developer.download.nvidia.comdeveloper.download.nvidia.com/assets/gamedev/docs/... · The address register, a0, is an additional temporary register that

OpenGL Shader Language Vertex and Fragment Shading Programs.

OpenGL Shader Language Vertex and Fragment Shading Programs.

Colibri T30 - Toradex · OpenGL® ES 1.1, and 2.0 Dual Core (2 fragment shader pipe, vertex shader pipe) OpenGL ES Shader Performance 16 GFLOPS Programmable pixel shader Programmable

Colibri T30 - Toradex · OpenGL® ES 1.1, and 2.0 Dual Core (2 fragment shader pipe, vertex shader pipe) OpenGL ES Shader Performance 16 GFLOPS Programmable pixel shader Programmable

TERRAIN SHADER DOCUMENTATION - Studio-397 · RFACTOR 2 – TERRAIN SHADER APPENDIX Appendix I – Radiosity: Vertex-based Ambient Occlusion Radiosity is a very effective way to add

TERRAIN SHADER DOCUMENTATION - Studio-397 · RFACTOR 2 – TERRAIN SHADER APPENDIX Appendix I – Radiosity: Vertex-based Ambient Occlusion Radiosity is a very effective way to add

Hair animation by vertex shader

Hair animation by vertex shader

Intro to Shadersdmgregory.ca/misc/shadercheatsheet.pdf · Shader Variant Vertex Shader Fragment Shader Surface Shader Surface Shader Albedo Normal Emission etc. Surface shaders are

Intro to Shadersdmgregory.ca/misc/shadercheatsheet.pdf · Shader Variant Vertex Shader Fragment Shader Surface Shader Surface Shader Albedo Normal Emission etc. Surface shaders are

Vertex and Fragment Shaders for Game Developers978-1-4842-4457-9/1.pdf · Development Vertex and Fragment Shaders for Game Developers Kyle Halladay. Practical Shader Development:

Vertex and Fragment Shaders for Game Developers978-1-4842-4457-9/1.pdf · Development Vertex and Fragment Shaders for Game Developers Kyle Halladay. Practical Shader Development:

Vertex Shader Tricks New Ways to Use the Vertex Shader to Improve Performance Bill Bilodeau Developer Technology Engineer, AMD.

Vertex Shader Tricks New Ways to Use the Vertex Shader to Improve Performance Bill Bilodeau Developer Technology Engineer, AMD.

Grafika v reálnom čase - uniba.sk · Vertex arrays – OGL 2.0 •Passing arbitrary vertex attributes to vertex shader •void glVertexAttribPointer(GLuint index, GLint size, GLenum

Grafika v reálnom čase - uniba.sk · Vertex arrays – OGL 2.0 •Passing arbitrary vertex attributes to vertex shader •void glVertexAttribPointer(GLuint index, GLint size, GLenum

Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Animating With Mathtwvideo01.ubm-us.net/o1/vault/gdc2016/... · Shader-Driven Vertex Animation Vertex animation, or vertex manipulation, is the process of manipulating vertex ...

Vertex Shader Tricks by Bill Bilodeau - AMD at GDC14

Vertex Shader Tricks by Bill Bilodeau - AMD at GDC14

Spring 20101 Geometry Shader (GLSL) Add/remove primitives Add/remove vertices Edit vertex position.

Spring 20101 Geometry Shader (GLSL) Add/remove primitives Add/remove vertices Edit vertex position.

Lab: Vertex Shading Chris Wynn Ken Hurley. Objective Hands-On vertex shader programming Start with simple programs … Part 1: Textured-Lit Teapot.

Lab: Vertex Shading Chris Wynn Ken Hurley. Objective Hands-On vertex shader programming Start with simple programs … Part 1: Textured-Lit Teapot.