Upload
guangyao-liu
View
2.424
Download
3
Embed Size (px)
Citation preview
MM Team
Kuu Miyazaki@miyazaqui, github:@kuu
Jason Parrott+JasonParrott, github:@Moncader
Guangyao Liu@brilliun, github:@brilliun
Daijiro Wachi@watilde, github:@watilde
This work is a derivative of a photo by Paranoidray, used under CC BY-SA.It is licensed under CC BY-SA by GREE, Inc.
This work is a derivative of a photo by Mr mr ben, used under CC BY-SA.It is licensed under CC BY-SA by GREE, Inc.
What About 2D Contents
● Lots of 2D contents on the web
● WebGL used for 2D in serious applications?
2D Graphics
Vector graphics Raster graphics
https://signalizenj.wordpress.com/2015/01/29/vector-vs-raster/
Canvas 2D API
The 2D graphics API works in <canvas>
elementctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.quadraticCurveTo( x3, y3, x4, y4);ctx.stroke();ctx.fill();
ctx.drawImage( img, srcX, srcY, srcWidth, srcHeight, x, y, width, height);
Vector graphics Raster graphics
WebGL APIgl.drawArrays(mode, first, count);gl.drawElements(mode, count, type, offset);
mode: gl.POINTS gl.LINES gl.LINE_LOOP gl.LINE_STRIP gl.TRIANGLES gl.TRIANGLE_STRIP gl.TRIANGLE_FAN
Triangles
Lines
Vector Graphics
● Resolution independant
● Small data size
● Existing assets
This work is a derivative of a photo by Darth Stabro, used under CC BY-SA.It is licensed under CC BY-SA by GREE, Inc.
Pixi.js
Drawing filled polygons using stencil buffer
● Extra rendering cost
http://www.cs.sun.ac.za/~lvzijl/courses/rw778/grafika/OpenGLtuts/Big/graphicsnotes014.html
three.js
Triangulation
● but with restrictions
http://mathworld.wolfram.com/Triangulation.html
Vector in Theatrical
● We do triangulation
● With almost no restrictions
● Produce resolution independent curves
Canvas Path in Chrome
● Chrome(Skia) do triangulation too!
○ With a combination of other approaches
Hardware Acceleration
Modern browsers have already been utilizing
hardware acceleration for several tasks.
WebGL Performance
● Performance boosts not ONLY because we
use WebGL
● It is the way how we use it that matters
WebGL Performance
● Draw calls
○ drawElements/drawArrays
● Texture updates
● Shader operations
○ especially Fragment Shader
WebGL Performance
● Otherwise, easy to get bad performance.
● Not to mention WebGL on mobile
○ weaker hardware
○ restricted GL features & extensions
Extensible Web
“Avoid New Magic”
Magic In Browser
● A lot of “magic” going on in browser
○ Canvas 2D API
○ <video>
● Doing complex tasks silently in C++ w/o
letting web developers know how
WebGL is New Magic?
● WebGL is a new API
● WebGL brings plug-in free 3D into browser
● WebGL is complex
WebGL is New Magic?
var canvas2D = canvas.getContext(‘2d’); // Existing magic
var webgl = canvas.getContext(‘webgl’); // Aha! New magic!!!
Extensible Web
● New low-level capabilities should be exposed
to Javascript
● Existing high-level capabilities should be
explained in terms of Javascript
Extensible Web
● New low-level capabilities should be exposed
to Javascript
● Existing high-level capabilities should be
explained in terms of Javascript
Low-level Capabilities
With WebGL, we can
● Write and execute GLSL programs on GPU
● Trigger GL/Direct3D commands through
browser
Extensible Web
● New low-level capabilities should be exposed
to Javascript
● Existing high-level capabilities should be
explained in terms of Javascript
High-level Capabilities
● Hardware acceleration used to be a black
box to web developers
● Relying on browser vendors to gift us with
performance improvement
Hardware Acceleration
Hardware Acceleration
Vertex Buffer
Draw CallTexture Shader
Program
With WebGL
Hardware Acceleration
“truly hardware accelerating graphics on the
web means giving developers access to a
programmable 3D graphics pipeline with
WebGL”
-- Chrome blog