Laminate Waterjet Cutting by Motif waterjet-services-a-unit-of-motif-graphics-pvt-ltd
Cutting edge graphics in HTML New features & best practices
description
Transcript of Cutting edge graphics in HTML New features & best practices
![Page 1: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/1.jpg)
![Page 2: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/2.jpg)
David CatuheProgram Manager, Open Web Standards @deltakosh
Cutting edge graphics in HTMLNew features & best practices
Ben ConstableDeveloper, Internet Explorer
Frank Olivier Program Manager, Internet Explorer @frankolivier
3-558
![Page 3: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/3.jpg)
Images, SVG, <canvas>, WebGL…
More options than ever
![Page 4: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/4.jpg)
// 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 context
![Page 5: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/5.jpg)
<canvas> image smoothingcanvas 2d context, level 2
attribute boolean imageSmoothingEnabled;
![Page 6: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/6.jpg)
<canvas> fill rulecanvas 2d context, level 2
fill(optional fillRule); // “evenodd” or “nonzero”
clip(optional fillRule);
isPointInPath(x, y, optional fillRule);
![Page 7: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/7.jpg)
<canvas> fill rulecanvas 2d context, level 2
Non-zero winding rule Even odd rule
2 lines crossed 2 lines crossed
1 line crossed
fill("nonzero"); fill(“evenodd");
![Page 8: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/8.jpg)
<canvas> Dashed Linescanvas 2d context, level 2
setLineDash(sequence<unrestricted double> segments); sequence<unrestricted double> getLineDash();attribute unrestricted double lineDashOffset;
![Page 9: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/9.jpg)
JPEG Format in <img>Most Commonly Used Image Format
48%
27%
23%2%
JPEGPNGGIFOther
![Page 10: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/10.jpg)
How to:
Load JPG images up to 45% fasterUse up to 40% less memory
…with two clicks.
JPEG 4:2:0 Chroma Subsampling
![Page 11: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/11.jpg)
RGB / YCbCr
Red Green Blue
Luma (Y) Chroma (Cb)
Chroma (Cr)
RGB
YCbCr
= + +
= + +
![Page 12: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/12.jpg)
Chroma Subsampling
Original Luma (Y) Chroma (Cb)
Chroma (Cr)
= + +
Original Luma (Y) Chroma (Cb)
Chroma (Cr)
= + +
Original Luma (Y) Chroma (Cb)
Chroma (Cr)
= + +
4:4:4
4:2:0
4:2:2
62.5% less memory than RGB
(no subsampling)
![Page 13: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/13.jpg)
Internet Explorer 10 on Windows 8
![Page 14: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/14.jpg)
Internet Explorer 11 on Windows 8.1
![Page 15: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/15.jpg)
Photoshop Save As:Quality 0 to 6
How to save JPGs with 4:2:0
![Page 16: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/16.jpg)
Photoshop Save for Web
Quality 0 to 50
How to save JPGs with 4:2:0
![Page 18: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/18.jpg)
WebGL in Internet Explorer 11
![Page 19: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/19.jpg)
Khronos Test Suite Pass Rate
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Version 0.90June 2013
IE11 Developer Preview
Version 0.91October
2013
IE11 Release Preview
Version 0.92November
2013
IE11 Release
Version 0.93April 2014
IE11 Update
![Page 20: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/20.jpg)
attrib
s
buffers
canva
s
contex
t
exten
sions gls
llim
its miscmore og
les
progra
ms
readin
g
rende
rbuffers
rende
ring
state
textur
es
typed
array
s
unifo
rms
0%10%20%30%40%50%60%70%80%90%
100%
Conformance Test Groups
![Page 21: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/21.jpg)
WebGL will be on all IE11 devices
![Page 22: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/22.jpg)
WebGL in Internet Explorer 11
DirectX 11 Runtime
GPU Driver or Software Rendering
GLSL Parser
GLSL Verifier
Scripting Engine
GL API Translation
D3DCompilerWebGL-equivalent DX API calls
GLSL Translator
GLSLShader source
Safe verified HLSL
WebGL context API calls
![Page 23: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/23.jpg)
![Page 24: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/24.jpg)
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 textures vertexAttrib{1,2,3,4}f[v] methods Compressed textures Stencil buffers Standard derivatives extension Anti-aliasing
WebGL Spring14 Update
![Page 25: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/25.jpg)
GLSL without structs supportmat3 (…) computeLighting {
…
result[0] = ndl * diffuseColor;result[1] = specComp * specularColor;result[2] = vec3(0.);
return result;}
![Page 26: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/26.jpg)
GLSL with structs supportlightingInfo computeLighting(…) {
…
result.diffuse = ndl * diffuseColor;result.specular = specComp * specularColor;
return result;}
![Page 27: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/27.jpg)
Anti-aliasing
var ctx = canvas.getContext('webgl', { antialias: true} );
No antialiasing on DX9 devices
![Page 28: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/28.jpg)
Standard derivatives#extension GL_OES_standard_derivatives : enable… mat3 cotangent_frame(vec3 normal, vec3 p, vec2 uv){
// get edge vectors of the pixel trianglevec3 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, binormal)));return mat3(tangent * invmax, binormal * invmax, normal);
}
![Page 29: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/29.jpg)
Compressed texturesgl.getExtension('WEBGL_compressed_texture_s3tc')
gl.compressedTexImage2D(gl.TEXTURE_2D, i, internalFormat, width, height, 0, byteArray);
![Page 30: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/30.jpg)
Stencil bufferExtra buffer of one byte per pixel (in addition to color buffer and depth buffer)Increment/decrement can be done based on depth tests
Used for shadows, outline drawing or highlighting specific areas
![Page 31: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/31.jpg)
Remember: The user might be on a less powerful DX9 GPU, or in software modeTest on a variety of machines
Use requestAnimationFrame()Don’t render in backgroundDon’t render if the scene isn’t changing
WebGL Best Practices
![Page 32: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/32.jpg)
Construct 2
EaselJS
![Page 33: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/33.jpg)
Babylon.js – 3D engine made easy
![Page 34: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/34.jpg)
Open source project (Available on Github)http://www.babylonjs.com
https://github.com/babylonjs/babylon.jsHow 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.js
![Page 35: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/35.jpg)
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.js
![Page 36: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/36.jpg)
Hello World with Babylon.js
![Page 37: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/37.jpg)
Offline supportwith IndexedDB
Network optimizationsIncremental loading
Blender exporterDesign & render + Sandboxbabylonjs.com/sandbox
Complete collisions and physics engine
Advanced features
![Page 38: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/38.jpg)
Smart shaders engine and postprocesses
Device Orientation API and Oculus Rift support
Advanced texture support (Bump, DDS)
Touch and virtual joysticks
Advanced features
![Page 39: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/39.jpg)
Unleash babylon.js
![Page 40: Cutting edge graphics in HTML New features & best practices](https://reader035.fdocuments.net/reader035/viewer/2022062400/56816930550346895de07b88/html5/thumbnails/40.jpg)
Your Feedback is ImportantFill out an evaluation of this session and help shape future events. Scan the QR code to evaluate this session on your mobile device. You’ll also be entered into a daily prize drawing!