20-history+es+webgl posted.pptx

EECS487:InteractiveComputerGraphicsLecture20:•  BriefHistoryofGraphicsHardware•  OpenGLESandOpenGL3.1+•  WebGLandHTML5template(s)•  Javascript:aquicktutorial•  Samplecode(sameoneaslastlecture)at

http://web.eecs.umich.edu/~sugih/courses/eecs487/common/notes/gl3+webgl.tgz

GraphicsHardware

Fivegenerations[Akeley&Hanrahan]• wireframe•  shadedsolids•  texturemapping•  programmability•  globalillumination?

1stGen:Wireframe(50’s-70’s)Hardware:mainframe,vectorgraphicsTech:linedrawing,hiddenlines,parametricsurfaces,solids,raytracing

Vertex:transform,clip,projectRasterization:colorinterpolation(points,lines)Fragment:overwriteAPI:GKS

Akeley&Hanrahan07

2ndGen:ShadedSolids(80’s)Hardware:graphicsworkstation(SGI$50-100K)Tech:framebuffers,z-buffer,flatandsmoothshadingVertex:lightingcalculationRasterization:depthinterpolation(triangle)Fragment:depthbuffer,colorblendingAPIs:PHIGS,Renderman

Akeley&Hanrahan07

Doom1 1993Wolfenstein3D 1992

3rdGen:TextureMapping(90’s)Hardware:PCgraphicsboard�GPUs($10K-$200)Tech:tex.mapping,transformationandlightingonGPUVertex:texturecoordinatetransformRasterization:texturecoordinateinterpolationFragment:textureevaluation,anti-aliasingAPIs:OpenGL(1.1−1.4),Direct3D(5.2−7)

Akeley&Hanrahan07 Zhu

1stGenGPU(1995)1stpopularcard:Voodooby3dfx•  onlytexturemappingandz-bufferwereimplementedonthecard•  vertextransformationstilldoneonCPU• mostly“graphicsaccelerator”

2ndGenGPU(1999)1stconsumerGPU:nvidiaGeForce256•  transformationandlightingoncard•  registercombiner:fragmentcolorfromtextureandinterpolatedcolorvalues•  completehardware3Dpipelineoncard• Direct3D7usable

Zhu

4thGen:Shaders(2000’s–now)Hardware:GPU,mobileGPUTech:shaders,high-levelshadinglanguages,GPGPUVertex:programmabletransform(2001)Rasterization:userattributesinterpolationFragment:programmablecolorcomputation(2002)

Akeley&Hanrahan07

3rdgenGPU(’01):•  nvidiaGeForce3:1stvertexshader• ATIRadeon8500,Xbox• Direct3D8.1•  shaderprogrammingassemblylike

4thgenGPU(’02-’04):• GeForceFX,1stfragmentshader• ATIRadeon9700, floatingpointinfragmentshader•  high-levelshadinglanguages:Direct3D9.0/HLSL,OpenGL2.0/GLSL1.1• OpenGLES1.1(fixedfunction)

4thGen:Shaders(2001–2004)

GeForce 3

GeForce FX

2006:• UnifiedShaderArchitecture(ShaderModel4.0):ATIXenosinXbox360•  tile-baseddeferredrendering(TBDR)mobileGPU:PowerVRMBX(tobeusedinoriginaliPhone,NokiaN95)•  geometryshader:Direct3D10,WindowsVista,GeForce8800• OpenGL2.1/GLSL1.2,OpenGLES2.0/GLSLES1.0(programmable,PowerVRSGX535)

2007-08:• OpenGLES1.1oniPhone(iOS1.0)• OpenGL3.0/GLSL1.3(deprecationmechanism,demiseofLongsPeak)

GeForce 8800


2009:• Direct3D11: tessellationandcomputeshaders,Windows7,AMDHD5870• OpenGL3.2/GLSL1.5:geometryshader,GeForce300• mobile:ARMMali400(TBDR,multi-core)• Android1.6supportsOpenGLES1.1•  iPad,iOS3.0(OpenGLES2.0,programmablepipeline)

2010-11:• OpenGL4.0/GLSL4.0:tessellationshader• WebGL1.0• Android2.2(OpenGLES2.0,programmablepipeline)

4thGen:Shaders(2009–2011)2012:• OpenGL4.0:computeshader,GeForce6xx• OpenGLES3.0:“modern”OpenGL

2013:• Chrome25,1stbrowsertosupportWebGL,requiresAndroid4.0• Android4.3andiOS7supportOpenGLES3.0• AMDMantle:1stlow-levelgraphicsAPI• Direct3D11.x:supersetof11.2,containslow-levelAPI,runsonXboxOne


2014:• OpenGLES3.1:computeshader,inAndroid5.0(Lollipop)• OpenGL4.5/GLSL4.5:latestOpenGLstandard• March:Direct3D12:low-levelgraphicsAPIannounced•  June:Metal:Apple’slow-levelgraphicsAPIreleased,releasedwithiOS8,requiresA7orlater•  iOS8alsosupportsWebGL• August:glNext:NextGenerationOpenGLInitiative•  Sept.:Direct3D11.3(latesthigh-levelAPI,subsetofD3D12?)

4thGen:Shaders(2014)2015:• March:glNext�Vulkan(withAMDMantleascore)•  June:MetalonOSX10.11(ElCapitan)•  July:Windows10withDirect3D11.3and12 released• August:OpenGLES3.2:geometryandtessellationshaders,latestOpenGLESstandard

4thGen:Shaders(2015)

1.0 (7/1/92)�1.1 (3/4/97)�1.2 (3/16/98)�1.3 (8/14/01)�1.4 (7/24/02)�1.5 (7/29/03)

2.0 (9/7/04)�2.1 (7/2/06)3.0 (7/11/08)�3.1 (3/24/09)�3.2 (8/3/09)�3.3 (3/11/10)

[Khronos]

OpenGL

fixedfunction

programmable

4.0 (3/11/10) �4.1 (7/26/10)�4.2 (8/8/11)

Com

pute

4.3 (8/6/12)4.4 (7/22/13)4.5 (8/11/14)

Computeshader:•  imageprocessing•  AIsimulation•  globalillumination•  physicsprocessing•  etc.

[Khronos]

SubsetofOpenGLforEmbeddedSystems(phones,gamesconsoles,cars,etc.)•  conveniencefunctionsremoved

1.0/1.1:•  basedonOpenGL1.3/1.5•  fixed-functionpipeline•  1.0+extensionsusedinPS3(PSGL) 2.0:

•  basedonOpenGL2.0•  programmablepipeline,GLSLES•  not1.xcompatible•  nofixed-functionpipeline•  buffers,textures,shaders

3.2:•  geometryshader•  tessellationshader

DriverUpdate

DriverUpdate

SiliconUpdate

SiliconUpdate

SiliconUpdate

3.0:•  basedonOpenGL3.3/4.x•  nogeometryshader•  2.0compatible•  32-bitfloatinGLSLES

3.1:•  independentshaders•  computeshader

[Khronos]

Ecosystem

Whathasbeenremoved?SeetheOpenGLESspecsforacompletelistSomehighlights:

“Newbiefriendliness”thatmakesOpenGLsuitableforlearningcomputergraphicsisgone

Primitivesmorecomplicatedthanthetrianglearealsogone:GL_QUADS,GL_QUAD_STRIP,andGL_POLYGON,alsoglMapandglEval

OpenGLESfurtherdoesn’tsupportdouble

© Copyright Khronos Group, 2008 - Page 1

Siggraph 2008

OpenGL 3.0 Overview Vertextransformationandlightingaregone:• transformation:glMatrixMode,glLoadIdentity,glRotate,glTranslate,glScale,glOrtho,glFrustumetc.

• lighting:glLight,etc.

GLUandGLUT,includinggluLookAt,gluPerspective,gluSphere,andglut*Teapot,glut*Torus,etc.

Youneedtoprovidetheseinyourapporshaders


Siggraph 2008

OpenGL 3.0 Overview


Siggraph 2008

OpenGL 3.0 Overview Thefollowingvertexpassingmodesarealsogone:•  immediatemoderendering(glBegin,glEnd),alongwithstreamingvertexattributesglVertex,glColor,glNormal,glTexCoords,etc.

• client-sidebuffering:vertexarray,colorarray,etc.• client-sidevertexattributelocations:GL_VERTEX_ARRAY,GL_COLOR_ARRAY,GL_NORMAL_ARRAY,etc.

• compiledretainedmoderenderingwithdisplaylist:glGenList,glNewList,glEndList,glCallList,etc.

UseVBOandVAOwithcustomvertexattributes

WhatareLeft?

Buffers,textures,andshaders

BUTallisnotlost:• most3.0+driverssupportthe(2.1)CompatibilityProfile• most2.1drivershavebeenupdatedtoprovidemostofthenewfunctionsasextensions

ForacompletelistofdeprecatedAPIcallsandsupportedextensions,seetheOpenGLAPIsTable(http://web.eecs.umich.edu/~sugih/courses/eecs487/common/notes/APITables.xml)

WhyOpenGL3.1+?

ThreereasonstomigratetoOpenGL3.1+:1. easierportingtoOpenGLES2. writeveryhigh-performanceanimatedgraphics3. vertexattributescanbeint(forarrayindexing,forexample)

GPU-accelerated3Dgraphicsinwebbrowsers• OpenGLforJavaScript

• basedonOpenGLES2.0andGLSLES1.0•  APIsmostlythesameasOpenGLES2.0,minustheglprefix,andthatallobjectgenerationAPIs(glGen*())havebeenrenamedcreate*(),whichgenerateonlyoneobjectatatime,notanarray

• nofixed-functionAPIs,3Dscenemustbeprogrammedusing“buffers,textures,andshaders”

GPU-accelerated3Dgraphicsinwebbrowsers• requiresHTML5Canvaselementasrendertarget

•  acanvaselementisarectangulardrawingareawithinanHTML5pagethatcanbedynamicallyupdatedusingJavaScript

• WebGLisarenderingcontextforHTML5canvaselement(theotheris“2d”)

HTML5page

<canvas>

OS/drivermustsupportOpenGLES2.0• onWindows,ChromeandFirefoxuseANGLE(AlmostNativeGraphicsLayerEngine)totranslateOpenGLES2.0(3.0tocome)toDirect3D 9.0c/11• IE11(Windows8.1),concernaboutWebGLsecurity• ChromeonAndroid4.0+•  iOS8.0+,iPhone4Sorlater

WebGLdemoes(notallmayrunonyourplatform):•  http://www.bongiovi.tw/experiments/webgl/blossom/

•  http://madebyevan.com/webgl-water/(requiresextension)

•  http://www.playmapscube.com

UsingHTML5tocreate“WebApps”hasmanyadvantages:• portabletoanybrowser-enabledsystem(html5test.com)• minimaleffortsrequiredtoportapptowebpage• webappissearchableanddiscoverablethroughtheweb• notaclosedappstore–noappstore“tax”

Advantages<html> <head> <title>Alternative 1</title> <script id=”minvs” type=”x-shader/x-vertex”> attribute vec4 vPos; // plain GLSL uniform mat4 PMVmat; void main() { gl_Position = PMVmat*vPos; } </script> <script id=”minfs” type=”x-shader/x-fragment”> precision mediump float; // plain GLSL void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } </script> <script type=”text/javascript” src=”sample.js”></script> </head> <body onload=”sample_main(’sample_canvas’, ’minvs’, ’minfs’)”>

 <canvas id=”sample_canvas” width=”300” height=”300”></canvas> </body> </html>

TemplateAlternative1JavaScriptasanHTMLobjecteventhandler

<html> <head> <title>Alternative 2</title> </head> <body> <canvas id=”sample_canvas” width=”300” height=”300”></canvas> <script id=”minvs” type=”x-shader/x-vertex”> attribute vec4 vPos; // plain GLSL uniform mat4 PMVmat; void main() { gl_Position = PMVmat*vPos; } </script> <script id=”minfs” type=”x-shader/x-fragment”> precision mediump float; // plain GLSL void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } </script> <script type=”text/javascript”> /* put the content of sample.js inline here */ sample_main(”sample_canvas”, ”minvs”, ”minfs”); // call main(), all <script> must be after <canvas> </script> </body> </html>

TemplateAlternative2<script>in<body>,after<canvas> (wasthat<script>mustbein<head>)

<html> <head> <title>Alternative 3</title> <script id=”minvs” type=”x-shader/x-vertex”> // plain GLSL, cannot be in include file attribute vec4 vPos; uniform mat4 PMVmat; void main() { gl_Position = PMVmat*vPos; } </script> <script id=”minfs” type=”x-shader/x-fragment”> precision mediump float; // plain GLSL, must be inline void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } </script> <script type=”text/javascript” src=”sample.js”></script> </head> <body> <canvas id=”sample_canvas” width=”300” height=”300”></canvas> <script>sample_main(”sample_canvas”, ”minvs”, ”minfs”);</script> </body> </html>

TemplateAlternative3

CanhavemultipleWebGLcanvasesonthesamepage,butbewareofnameconflictinglobalvariables,includingfunctions <body>

 <canvas id=”sample” width=”300” height=”300”></canvas> <script>main();</script>

 <canvas id=”sample2” width=”100” height=”100”></canvas> <script>main2();</script>

</body> Seesample*.html,sample.js(andglum.js)andvao-cva.{html,js}inhttp://web.eecs.umich.edu/~sugih/courses/eecs487/common/notes/gl3+webgl.tgz

TemplateAlternative3

Dynamictyping:variablesareofthesametypeasthevaluesassigneda = 32; // ‘a’ is an int a = “thirty two”;

/* type changed, not an error */ a = 32 + “is thirty two”;

// ‘a’ is a string “32 is thirty two”

Seehowcommentsaremarked?

Variables

Declarationandscoping:• eitherjustassignavaluetoavariable,scopeisglobal:

a = 32; // not recommended

• ordeclarewithkeyword“var”,scopecanbelocalorglobalvar a = 1; function f() { var a = “a string”; alert(a); /* prints “a string” */ } alert(a); // prints 1

•  noblockscoping(declarationsinsidealooparevisiblethroughoutfunction)•  hoisting/lifting:declarationsautomaticallymovedtotopoffunction

Seehowfunctionsaredeclared?

Variables Arrays,objects,andfunctionsarepassedbyreference

Everythingelseispassedbyvalue

stack.push(arr);

pushesareferencetoarrayontothestack:ifarrelementislatermodified,arratthetopofthestackisalsomodified;use

stack.push(new ArrayBuffer(arr));

topushacopyofarrontostack

See:https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals

Variables

Arraysaredynamicallysizedbyusage:var arr = []; // empty array arr[99] = 1; // array now has 100 elements Arraysalsocomewithpush()andpop(),handyforconstructingarrayofarraysandarrayofobjects(remembertomakeacopyofelementspushedontothearray) Seehttps://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array

Array Objectsareassociativearrays;membersandmethodsarecreatedbyassignment:

var obj = { id1: 1, f: null }; obj[“id2”] = ‘ is one’; // member obj.f = function () { // method alert(obj[“id1”]+obj.id2);

}; Seehttps://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects

Object

WebGLneedstospecifyprecisebyteoffsetforbufferandtextureoperations

JavaScriptaddsTypedArray,afixed-lengthbuffertype,andprovidesViewTypesfortypecastingvar b = new ArrayBuffer(8); var f = new Float32Array(b);

sameas:var f = new Float32Array(2);

JavaScripthasnosizeof()function,butTypedArrayhasBYTES_PER_ELEMENTconstant

See:http://www.khronos.org/registry/typedarray/specs/latest/

TypedArray

var index

bytes(notindexable)

b= 0 1 2 3 4 5 6 7

indices

f= 0 1

Toimplement:struct record { ulong id; char uname[16]; float height; };

do:var record = new ArrayBuffer(24); var id = new Uint32Array(record, 0, 1); // byte offset, count var uname = new Uint8Array(record, 4, 16); var height = new Float32Array(record, 20, 1);

heightisaccessedasheight[0];

Seehttps://developer.mozilla.org/en-US/docs/JavaScript_typed_arrays

TypedArray

Foralistofmathfunctions,see:https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/MathnotethattrigonometricfunctionstakeanglesinradianForotherJavaScriptrelatedtopicssee:https://developer.mozilla.org/en-US/docs/JavaScript/Guidehttp://www.quirksmode.org/js/contents.htmlhttp://unixpapa.com/js/https://developer.mozilla.org/en-US/docs/JavaScript/Reference

Math etc. JavaScriptismostoftenusedasaneventhandler

EventhandlerscanbeassignedtoHTMLelementattributesinsideaJavaScriptfunction,e.g.,:function ReshapeFunc(reshapeFunc) { document.body.onresize=reshapeFunc; } function reshape() { gl.Viewport(0,0,width,height); } main() { ReshapeFunc(reshape); }

OreventhandlerscanbespecifiedasHTMLelementattributeatelementdefinition,e.g.,:

<body onload=“main()”>

Foradiscussiononeventsandlistofevents,see:

http://www.quirksmode.org/js/events_properties.htmlhttps://developer.mozilla.org/en-US/docs/DOM/eventhttps://developer.mozilla.org/en-US/docs/DOM/elementhttps://developer.mozilla.org/en-US/docs/DOM/windowhttps://developer.mozilla.org/en-US/docs/DOM/document

Forkeyboardandmouseeventhandlingataglance:http://www.javascriptkit.com/jsref/eventkeyboardmouse.shtmlFurtherdiscussiononkeyboardeventandkeycodes:http://www.quirksmode.org/js/keys.htmlhttp://unixpapa.com/js/key.htmlFurtherdiscussiononmouseevent:http://www.quirksmode.org/js/events_mouse.htmlhttp://unixpapa.com/js/mouse.htmlhttps://developer.mozilla.org/en-US/docs/XUL_Tutorial/More_Event_Handlers

Theequivalentofgettingcompilererrorsisviewingthe“Developer/ErrorConsole”ofyourbrowser(seenext3slides)

LeavetheConsolewindowupatalltimes!•  formoreelaborateerrormessages,useFirebug(http://getfirebug.com),butitworkswellonlywithFirefox• noneofthesetoolswillcatchallofyourtypoes!

Tools Tools

Tools Tools

Theequivalentofdebuggingbycout/printf()istousealert() (there’salsotheas-yetnon-standardconsole.log()(https://developer.mozilla.org/en-US/docs/Web/API/Console.log

and http://jsconsole.com/remote-debugging.html))

jsFiddle(http://jsfiddle.net/vWx8V/)andotherJSshells(https://developer.mozilla.org/en-US/docs/JavaScript/Shells)allowyoutoexperimentwithJSinteractivelyjsPerf(http://jsperf.com)comparestheperformanceofdifferentJSsnippets

Tools WebGLPlayground(http://webglplayground.net)allowsyoutoexperimentwithWebGLinteractivelyWebGLInspector(http://benvanik.github.com/WebGL-Inspector/)allowsyoutoviewGLstatessimilartogDEBugger(http://www.gremedy.com)forOpenGL,butithasn’tseendevelopmentsince2012andI’mhavingtroublesusingit

Tools

Seealso:

Howyoucanlosecontextandhowtohandleit:http://www.khronos.org/webgl/wiki/HandlingContextLosthttp://www.khronos.org/registry/webgl/extensions/WEBGL_lose_context/

Howtoanimateonlywhencanvasisvisible:https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrameForbetterperformance,offloadasmuchcomputingaspossiblefromJavascripttoGPU

20-history+es+webgl posted.pptx

Documents