slides - JS(Saturday)

rodscarletSoftware and s/w Development

Dec 14, 2013 (3 years and 7 months ago)

109 views

WebGL
-

use JavaScript for 3D
visualization

By Christo
Tsvetanov

Who am I?


An
Infragistics

friend


A long term enthusiast of 3D


Fascinates of mobile perspectives


A
Khronos

group
standard


JavaScript meets the
GPU


Fast programmable
drawing


OpenGL ES 2.0 for HTML5 Canvas

Web Graphics Library

Desktop Browsers


Google Chrome



WebGL has been enabled
on all platforms that have a capable graphics
card


Mozilla
Firefox


Safari



disabled by default


Opera


Internet
Explorer
-


using third
-
party plugins
such as


using third
-
party plugins such as
IEWebGL



Mobile Browsers


Nokia
N900


BlackBerry
PlayBook


Google
Chrome

for
Android


Firefox for
mobile

for Android


The
Sony Ericsson

Xperia

range of
Android


Opera Mobile

12
final
for Android


Tizen

1.0

3D Theory


3D Objects


Meshes, Vertices,
Faces and
Normals


Colors and Textures


Phong reflection
model


UV Mapping


Transformations


Matrices


Shader
-
based drawing

Meshes


A
polygon mesh
is a collection of
vertices
,
edges

and
faces

that
defines the shape
of a polyhedral
object in 3D
computer
graphics and
solid modeling

Vertex (vertices)

Face

Normal vector

Faces visibility

Phong reflection model


Ambient


Ambient color is the color of an object where it is in
shadow. This color is what the object reflects when
illuminated by ambient light rather than direct light
.


Diffuse


Diffuse color is the most instinctive meaning of the
color of an object. It is that essential color that the
object reveals under pure white light. It is perceived
as the color of the object itself rather than a
reflection of the light.




Phong reflection model


Emissive


This is the self
-
illumination color an object has.


Specular


Specular color is the color of the light of a specular
reflection (specular reflection is the type of reflection
that is characteristic of light reflected from a shiny
surface)




Phong reflection model

UV
mapping

World (Model


View) Matrix

World (Model


View) Matrix


worldMatrix

=

rotateMatrix

*
translateMatrix




*
scaleMatrix


rotateMatrix

=
rotateX

*
rotateY

*
rotateZ


WebGL
(
glMatrix
)


var

mvMatrix

= mat4.create
();


mat4.translate(
mvMatrix
, [
-
1.5, 0.0,
-
7.0
]);


mat4.rotate(
mvMatrix
,
degToRad
(
rTri
), [0, 1, 0
]);



rotateX
,
rotateY
,
rotateZ
, scale


View (Camera) Matrix

Projection Matrix

Projection Matrix


WebGL


var

pMatrix

= mat4.create
();


mat4.perspective(45,
gl.viewportWidth

/
gl.viewportHeight
, 0.1, 100.0,
pMatrix
);

Shaders


Shaders

are

computer
programs

that runs on
the

graphics processing unit

and
are used
to
do

shading

-

the production of appropriate
levels of light and darkness within an
image.


Vertex
s
hader


Run
once for each

vertex

given to the graphics
processor


Pixel
(fragment)
shader


C
ompute

color

and other attributes of each

pixel


Pipeline

Buffers

Attributes

Uniform variables

Varying variables

Modified varying
variables

Vertex
shader

attribute
vec3
aVertexPosition
;

attribute
vec4
aVertexColor
;


uniform
mat4
uMVMatrix
;

uniform
mat4
uPMatrix
;


varying
vec4
vColor
;


void
main(void)
{


gl_Position

=
uPMatrix

*
uMVMatrix

* vec4(
aVertexPosition
, 1.0
);


vColor

=
aVertexColor
;


}

Fragment
shader


precision
mediump

float;


varying vec4
vColor
;



void main(void) {


gl_FragColor

=
vColor
;


}

WebGL demo


http://learningwebgl.com/lessons/lesson04/i
ndex.html

Three.js


Three.js

is a lightweight

cross
-
browser

JavaScript library/API

used to create
and display animated

3D computer
graphics

on a

Web browser. Three.js scripts
may be used in conjunction with
the

HTML5canvas

element,

SVG

or

WebGL
.

Features


Renderers: Canvas, SVG and WebGL.


Effects: Anaglyph, cross
-
eyed and parallax
barrier.


Scenes: add and remove objects at run
-
time; fog


Cameras: perspective and orthographic;
controllers: trackball,

FPS, path and more


Animation: armatures,

forward
kinematics,

inverse
kinematics,

morph

and

keyframe


Features


Lights: ambient, direction, point and spot
lights; shadows: cast and receive


Materials:

Lambert,

Phong, smooth shading,
textures and more


Shaders
: access to full OpenGL Shading
Language (GLSL) capabilities:

lens flare,

depth
pass

and extensive post
-
processing library


Objects: meshes, particles, sprites, lines,
ribbons,

bones

and more
-

all with

Level of
detail


Features


Geometry: plane, cube, sphere, torus, 3D text
and more; modifiers: lathe, extrude and tube


Data loaders: binary, image,

JSON

and scene


Utilities: full set of time and 3D math
functions including

frustum,
matrix,

Quaternian,

UVs

and more


Export and import: utilities to create Three.js
-
compatible JSON files from
within:

Blender,

openCTM,

FBX,

Max, and

OBJ


Features


Support: API documentation is under
construction, public forum and wiki in full
operation


Examples: Over 150 files of coding examples
plus fonts, models, textures, sounds and
other support files


Debugging: Stats.js
,

WebGL
Inspector
,

Three.js
Inspector


Variables and functions

var

renderer;


var

scene;

var

camera;


var

cubeMesh
;


initializeScene
();


animateScene
();


Create a render

if (
Detector.webgl
) {


renderer
= new
THREE.WebGLRenderer
({


antialias

: true

});


} else {


renderer
= new
THREE.CanvasRenderer
();

}

Set the renderer

renderer.setSize
(
canvasWidth
,
canvasHeight
);


document.getElementById
("
WebGLCanvas
").
ap
pendChild
(
renderer.domElement
);


Create the scene and camera

scene = new
THREE.Scene
();


camera = new
THREE.PerspectiveCamera
(45,


canvasWidth

/
canvasHeight
, 1, 100);

camera.position.set
(0, 0, 10);

camera.lookAt
(
scene.position
);

scene.add
(camera);


Create mesh


texture, geometry, material

var

cubeGeometry

= new
THREE.CubeGeometry
(2.0, 2.0, 2.0
);

var

sponsorsTexture

= new
THREE.ImageUtils.loadTexture
("Sponsors.png
");

var

cubeMaterial

= new
THREE.MeshBasicMaterial
({






map :
sponsorsTexture
,






side :
THREE.DoubleSide





});


Create mesh
and add to scene

cubeMesh

= new
THREE.Mesh
(
cubeGeometry
,

cubeMaterial
);

cubeMesh.position.set
(0.0, 0.0, 4.0);

scene.add
(
cubeMesh
);


Animate

function
animateScene
() {


xRotation

+=
xSpeed
;


yRotation

+=
ySpeed
;




cubeMesh.rotation.set
(
xRotation
,
yRotation
,
zRotation
);



cubeMesh.position.z

=
zTranslation
;



requestAnimationFrame
(
animateScene
);



renderer.render
(scene, camera);



}

Links
-

WebGL


Tutorial:


http://learningwebgl.com/blog/?
page_id=1217


Matrix library


glMatrix


https://code.google.com/p/glmatrix/

Links


three.js


Source


http://mrdoob.github.io/



Expect
very soon: SharePoint
Saturday!


Saturday,

June 8,
2013


S
ame familiar format


1
day
filled
with
sessions
focused on SharePoint technologies


Best
SharePoint
professionals in the region


Registrations will be open next week (15
th
)
!


www.SharePointSaturday.eu



Thanks to our Sponsors:

Diamond
Sponsor:

Platinum Sponsors:

Gold Sponsors:

Swag Sponsors:

Media Partners: