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

Intro to WebGL

Diego Cantor March 25th 2014

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: diego.cantor@gmail.com Twitter: @diegocantor Voxelent: http://www.voxelent.com

• 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

• 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?

What about JavaScript performance

• JavaScript is slow

– Interpreted language

• WebGL provides JavaScript bindings to GLSL

• GPU code runs fast!

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

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

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

Additional Vertex Elements

VBO types

Coordinates

Colors

Normals

Scalars

Others

WebGL pipeline from JavaScript to GPU

Vertex Shader

Fragment Shader

Uniforms

Framebuffer

Varyings

Attribute

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

Parallel procesing in the Vertex Shader

Attribute: aVertexPosition

Vertex Shader (Thread #1)

Vertex Shader (Thread #2)

Vertex Shader (Thread #N)

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 … =

From vertices to fragments

Vertex Coloring

In the Vertex Shader:

Pixel Coloring

In the Fragment Shader:

Example

http://bit.ly/webglsquare

A more interesting example

http://bit.ly/webglcar

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

WebGL Libraries

• Three.js: minimalistic, simple platform.

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

• GLSE: game oriented, working on animation.

Voxelent

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

Axis Floor BoundingBox

ModelManager

Program Diffusive Phong Custom

Renderer

Camera Orbiting Tracking

Interactor ClickAndGo Trackball 2D Picker

CameraManager ViewListener

Network

LightManager

Geometry Texture

Light Directional Positional

Animation

KeyFrame

Frame2Frame

join share leave

Demos Scenes, Actors and Views

Interaction

Keyframe Animation Frame-to-Frame Animation

Models

1. Run tutorial-1

2. Learn how to operate the camera

3. Load more objects

4. Run tutorial on camera landmarks

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:

diego.cantor@gmail.com

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

Documents

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

Using Vertex Textures...Shader Model 3.0: Vertex and Pixel Shaders for GeForce 6 Series GPUs DA-01373-001_v00 3 06/24/04 Vertex Shader 3.0 (the vs_3_0 compilation target) supports

OpenGL Shader Language Vertex and Fragment Shading Programs.

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

Shader Program in Gamebryo. Introduction Shader? A complete Rendering Effect to apply to an object Shader Program – Vertex/Pixel Shader Shader Programs.

Advanced Vertex and Pixel Shader Techniques - AMDdeveloper.amd.com/wordpress/media/2012/10/ATI_EGDC_AdvancedS… · 1 Advanced Vertex and Pixel Shader Techniques Jason L. Mitchell

GPU Architecturefileadmin.cs.lth.se/cs/Personal/Michael_Doggett/talks/...Unified Shader •GPU based vertex and pixel load balancing • Better vertex and pixel resource usage •Union

Shader › ... › unik_s_gpgpu_shader_folien_ss2006.pdf · Shader 9 Fixed Function Pipeline (7) App. Memory Per-Vertex Operations Fragment Processing Clip Project Viewport Cull Rasterize

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

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

Introduction to Parallel Programming for Real-Time Graphics … · 2011-02-02 · Shader (Data-parallel) Pseudocode concurrent_for( i = 0 to numVertices - 1) {… execute vertex shader

Direct3D Shader Models - AMD · Direct3D Shader Models ... Shaders – Static and Dynamic Flow control • Pixel Shaders –ps_2_x –ps ... for every vertex in a given draw call

Shader. Original Rendering Pipeline Vertex Shader Vertex transformation Normal transformation & normalization Texture coordinate generation & transformation.

Lecture 19: Texture Mapping in OpenGL · CITS3003 Graphics & Animation Lecture 19: Texture Mapping in OpenGL ... Vertex Shader •Usually vertex shader will output texture coordinates

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

From Shader Code to a Teraﬂop: How Shader Cores Worksmidkiff/ece563/slides/GPU.pdfShader Core Shader Core Shader Core Shader Core Shader Core Shader Core Shader Core Shader Core

NVIDIA nfiniteFX TM Engine Programmable Vertex Shaders · Vertex Shader box. Vertex Shaders do not create or delete vertices, but simply operate on, and change the values of, the

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

Shader Programming and Graphics Hardware · 2014. 5. 1. · Shader Programming and Graphics Hardware by Paul Scharf, original slides by Marries van de Hoef . ... Vertex Shader Pixel

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.