David Catuhe - PowerPoint Presentation

385 views
Uploaded On 2015-11-18

David Catuhe - PPT Presentation

Program Manager Open Web Standards deltakosh Cutting edge graphics in HTML New features amp best practices Ben Constable Developer Internet Explorer Frank Olivier Program Manager Internet Explorer ID: 197557

ctx babylon chroma webgl babylon ctx webgl chroma glsl engine canvas scene vec3 result rgb explorer 125 fill context

Link:

Copy

Embed:

<iframe width="560" height="315" src="https://www.docslides.com/embed/197557" frameborder="0" allowfullscreen></iframe>

Download Presentation from below link

Download Presentation The PPT/PDF document "David Catuhe" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.

Presentation Transcript

Slide1
Slide2

David CatuheProgram Manager, Open Web Standards @deltakosh

Cutting edge graphics in HTMLNew features & best practices

Ben

Constable

Developer, Internet Explorer

Frank Olivier

Program Manager, Internet Explorer @frankolivier

3-558Slide3

Images, SVG, <canvas>, WebGL…

More options than everSlide4

// Draw black rect

ctx.fillRect(50, 20, 145, 145);

// Draw blue

rect

ctx.fillStyle

= "rgb(0, 162, 232)";

ctx.fillRect(135, 85, 125, 125);

// Increase line width

ctx.lineWidth

= 5;

// Draw black rect outline ctx.strokeStyle = "rgb(0, 0, 0)"; ctx.strokeRect(50, 335, 145, 145); // Draw blue rect outline ctx.strokeStyle = "rgb(0, 162, 232)"; ctx.strokeRect(135, 275, 125, 125); // Draw transparent yellow rect ctx.fillStyle = "rgba(255, 255, 0, 0.75)"; ctx.fillRect(210, 180, 125, 125);

<canvas> 2d contextSlide5

<canvas> image smoothing

canvas 2d context, level 2

attribute

boolean

imageSmoothingEnabled

;Slide6

<canvas> fill rulecanvas 2d context, level

2fill

(optional

fillRule); // “

evenodd

” or “nonzero”

clip(optional fillRule

);

isPointInPath

y, optional fillRule);Slide7

<canvas> fill rule

canvas 2d context, level 2

Non-zero winding rule

Even odd rule

2 lines crossed

1 line crossed

fill

("nonzero

");

fill

(“evenodd");Slide8

<canvas> Dashed Linescanvas 2d context, level 2

setLineDash

(sequence<unrestricted double> segments

);

sequence<unrestricted

double> getLineDash();

attribute unrestricted double lineDashOffset;Slide9

JPEG Format in <img>

Most Commonly Used Image FormatSlide10

How to: Load JPG images up to 45%

faster Use up to 40% less memory…with two clicks.

JPEG 4:2:0 Chroma SubsamplingSlide11

RGB / YCbCr

Red

Green

Blue

Luma

(Y)

Chroma (

)

Chroma (Cr)

RGB

YCbCr=++=++Slide12

Chroma Subsampling

OriginalLuma

(Y)

Chroma (Cb)

Chroma (Cr)

Original

Luma

(Y)

Chroma (

)

Chroma (Cr)

Original

Luma

(Y)

Chroma (

)

Chroma (Cr)

4:4:4

4:2:0

4:2:2

62.5% less memory than

RGB

(no subsampling)Slide13

Internet Explorer 10 on Windows 8Slide14

Internet Explorer 11

on Windows 8.1Slide15

Photoshop Save As: Quality 0 to 6

How to save JPGs with 4:2:0Slide16

Photoshop Save for Web Quality 0 to 50

How to save JPGs with 4:2:0Slide17

luci.criosweb.ro/riot

How to save JPGs with 4:2:0 Slide18

WebGL in Internet Explorer 11Slide19

Khronos Test Suite Pass Rate

Version 0.93

April 2014

IE11 UpdateSlide20

Conformance Test

GroupsSlide21

WebGL will be on all IE11 devicesSlide22

WebGL in Internet Explorer 11

DirectX 11 Runtime

GPU Driver or

Software Rendering

GLSL Parser

GLSL Verifier

Scripting

Engine

GL API Translation

D3DCompiler

WebGL-equivalent

DX API callsGLSL Translator

GLSLShader

source

Safe verified HLSL

WebGL context API callsSlide23
Slide24

v0.93 WebGL renderer More GLSL conformance (

structs, inout, constructors) GLSL Point-size support (DX10+ only)GLSL Frontfacing support

Support for alpha WebGLContextAttribute Non-float vertices

Support for LUMINANCE, LUMINANCE_ALPHA, ALPHA texturesvertexAttrib{1,2,3,4}f[v] methods Compressed textures Stencil buffers Standard derivatives extension

Anti-aliasing WebGL Spring14 UpdateSlide25

GLSL without structs support

mat3 (…) computeLighting

{

…

result

[0] =

ndl * diffuseColor;

result

[1] =

specComp

specularColor;result[2] = vec3(0.);return result;}Slide26

GLSL with structs support

lightingInfo computeLighting

(…)

{

…

result.diffuse =

ndl * diffuseColor

;

result.specular

specComp * specularColor; return result;}Slide27

Anti-aliasing

ctx

canvas.getContext

webgl

{

antialias: true} );No antialiasing on DX9 devicesSlide28

Standard derivatives

#extension GL_OES_standard_derivatives : enable

…

mat3

cotangent_frame

(vec3 normal, vec3 p, vec2 uv

){// get edge vectors of the pixel triangle

vec3 dp1 =

dFdx

(p);

vec3 dp2 =

dFdy(p);vec2 duv1 = dFdx(uv);vec2 duv2 = dFdy(uv);// solve the linear systemvec3 dp2perp = cross(dp2, normal);vec3 dp1perp = cross(normal, dp1);vec3 tangent = dp2perp * duv1.x + dp1perp * duv2.x;vec3 binormal = dp2perp * duv1.y + dp1perp * duv2.y;// construct a scale

-invariant frame

float

invmax

inversesqrt

(max(dot(tangent, tangent), dot(

binormal

)));

return mat3(tangent *

invmax

binormal

invmax

, normal);

}Slide29

Compressed textures

gl.getExtension('WEBGL_compressed_texture_s3tc'

)

gl.compressedTexImage2D(gl.TEXTURE_2D, i,

internalFormat,

width, height

, 0, byteArray);Slide30

Stencil buffer

Extra buffer of one byte per pixel (in addition to color buffer and depth buffer)Increment/decrement can be done based on depth

testsUsed for shadows, outline drawing or highlighting specific areasSlide31

Remember: The user might be on a less powerful DX9 GPU, or in software modeTest on a variety of machinesUse

requestAnimationFrame()Don’t render in backgroundDon’t render if the scene isn’t changingWebGL Best PracticesSlide32

onstruct 2

Easel

JSSlide33

Babylon.js – 3D engine made easySlide34

Open source project (Available on Github

)http://www.babylonjs.comhttps://github.com/babylonjs/babylon.js

How to use it?

Include one file and you’re ready to go!

To start Babylon.js, you’ve just need to create an

engine

object:

<script

src

babylon.js

"></script>var engine = new BABYLON.Engine(canvas, true);How to use Babylon.jsSlide35

Babylon.js is a

scene graph: All complex features are abstracted for YOU

Handling

rendering

can be done in one line:

var

scene

= new

BABYLON.Scene

(

engine);var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene);var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene);engine.runRenderLoop(function

() { scene.render

(); });

How to use Babylon.jsSlide36

Hello World with

Babylon.jsSlide37

Offline

support

with

IndexedDB

Network

optimizations

Incremental