1
THE XML3D ARCHITECTURE Kristian Sons, Felix Klein, Jan Sutter, Philipp Slusallek <!doctype html> _html lang-benb' _head' _title'The XML{K 9rchitecture_;title' _script type-btext;javascriptb src-b00;00;script;xml{d0jsb'_;script' _;head' _body' _div id-bcontentb' _h('$iccio and Suzanne_;h(' _xml{d activeView-bodefaultViewb style-bwidth} 244pxI height} k44pxIb' _defs' _script id-bcustomMaterialb type-btext;javascriptb' function shadeVenvw { var ks = env0specular$olor || new VecV407wI var tx = env0texcoord0mulV)4404wI var sweep = Math0sinVenv0time * 0)8w * tx0xVw * 40448I var px = tx0xVw + tx0yVw * V(058 * sweep + (04wI var mod9mount = Vpx / k7w % {I var tints4 = new Vec{V(:08:0)wI if Venv0tints4 && env0tints40sample)Kw { tints4 = env0tints40sample)KVenv0texcoordw0rgbVw } var tints( = env0tint( || new Vec{V0{:07:0kwI var tints) = env0tint) || new Vec{V0{:02: (wI var tint = mod9mount > ) ? tints) : Vmod9mount > (w ? tints( : tints4I return new ShadeVw0diffuseVtint0mulVMath0fractVmod9mountww: env0normalw 0wardVks: env0normal: env0tangent0xyzVw: 40k: 40(wI } _;script' _material id-bmyMaterialb script-bocustomMaterialb' _float name-bambientIntensityb'40(_;float' _float{ name-bspecular$olorb'408 408 408_;float{' _float name-btimeb'408_;float' _texture name-btints4b wraps-brepeatb wraps-brepeatb' _img src-b00;textures;wood0jpgb;' _;texture' _;material' _lightshader id-blight(b script-burn}xml{d}lightshader}spotb' _float{ name-bintensityb'(((_;float{' _float{ name-battenuationb'( 4 404447_;float{' _bool name-bcastShadowb'true_;bool' _;lightshader' _data id-bmesh_datab compute-btangent - xflow0calculateTangentsVindex: position: normal: texcoordwb' _data src-b00;00;resources;meshes;suzanne0blstb'_;data' _;data' _transform id-bt_Suzanneb translation-b6(5 ) (8b rotation-b( 4 4 6)0)b scale-bk k kb'_;transform' _;defs' _group style-bmaterial} urlVomyMaterialwb' _mesh type-btrianglesb transform-bot_Suzanneb onclick-balertVzHi: my name is Suzanne.zwIb' _data src-bomesh_datab'_;data' _float{ name-btints(b'407 404 40)_;float{' _;mesh' _group' _model src-b00;00;resources;assets;robots;ciccio0xmloassetb' _assetdata name-banimationb' _float name-bkeyb'408_;float' _;assetdata' _;model' _;group' _;group' _group style-btransform} translate{dV6)4px: k4px: 4pxw rotateXV6,4degw rotateYV6{4degwIb' _light shader-bolight(b'_;light' _;group' _view id-bdefaultViewb'_;view' _;xml{d' _script type-btext;javascriptb' // Keyframe animation with jQuery 1Vbxml{dbw0onVbframedrawnb: function Vew { var key = computeKeyframeVewI 1Vz#[name-key]zw0textVkeywI }wI _;script' _;div' _;body' _;html' HTML5 XML(D is an extension to HTML' that allows describing interactive (D graphics in any Web pageP XML3D The XML(D scene description [I] is emG bedded inside HTML using the 4xml(d2 tag which is fully styleable with CSSP GENERIC DATA XML(D has a generic approach to dataP Users can define named and typed data entries that can be used ePgP as mesh attributesz material parametersz or with XflowP The combined data entries defined by the 4data2 tag can be reusedz specialized and composed from multiple sourcesP The entries defined in 4data2 elements can be mapped directly to GPU buffers in WebGLP DEFINITION AREA The 4defs2 area is adopted from SVGR It defines content to be referenced and reused laterP HTML ELEMENTS XML(D reuses existing HTML element and concepts wherever possibleP HIERARCHY 4group2 elements define the scene hierG archy in the DOM treeP Materials and transG formations can be applied to entire groups hierarchicallyP TRANSFORMATIONS XML(D provides three ways to define transG formationsR Via CiS CSSz CiiS by referencing a 4transform2 elementz or CiiiS through an Xflow graph that defines a data entry named ftransformfP LIGHTS Lights are first level objects in the scene hierarchyP Light definitions can be reused referencing a light shaderP ASSET INSTANCING Assets can be externally defined and inG stanced multiple times within a scene [']P Each instance can be specialized by overG riding values from the instancing documentP Assets can reference other assets recursively while maintaining full configurabilityP VIEWS Views define camera parameters within the scene hierarchyP The currently active view is defined via the factiveViewf attribute of the 4xml(d2 elementP POLYFILL Just add a single script to your web page to enable XML(D in the browserP The Polyfill implementation [(] uses WebGL and JavaG Script to emulate native XML(D supportP REFERENCES In XML(D all resources can be referenced by a URIP A resource is predefined CePgP often used light and material modelsSz defined within the same document or in an external resourceP BLAST BLAST [)] is a novel transmission format for binary resourcesP It is streamable and offers a flexible approach to compression based on a codeGonGdemand approachP SHADE.JS With shadePjs [j]z developers can write portG able materials using JavaScriptP It is renderer agnosticz adaptive and compiles to GLSL for forward and deferred rendering via OpenGL but can also compile to ePgP OSL for ray tracing and global illuminationP XFLOW Xflow [O] is a declarative approach to deG fine composable data resources as well as processing on this data via a dataflow graphP It can be used for geometry procesG sing CePgP skinning and morphingSz animationz image processing CePgP postprocessing and ARSz and othersP Its declarative approach allows mapping computations to the GPU and other parallel processors via different supported APIs CePgP WebGLz WebCLz ParallelJSz SIMDPjsSP CSS CSS can be used to style XML(D elementsz ePgP to define transformations on groups using CSS( (D transformsP SPECIALIZATION Specialization of reusable resources is a general concept in XML(D that is achieved with partial overridesP Assetsz materialsz meshes and data in general can be specializedP EVENT ATTRIBUTES Similar to HTMLz XML(D defines events for elements in the scene graph like startG ing a JavaScript when the user clicks on an elementP JAVASCRIPT JavaScript can modify the web page G and thus the (D scene G arbitrarily by modifying the DOMP Any of the numerous DOM libraries can be usedz ePgP jQueryP Renderer-Independent Dynamic Scenes Large Scenes Programmable Materials [6] XML3D: Interactive 3D Graphics for the Web KristianCSons;CFelixCKlein;CDmitriCRubinstein;CSergiyCByelozyorov;CPhilippCSlusallek In: Proceedings of the 15th International Conference on Web 3D Technology4 Web3D 2)1) [2] Xflow: Declarative Data Processing for the Web FelixCKlein;CKristianCSons;CStefanCJohn;CDmitriCRubinstein;CSergiyCByelozyorov;CPhilippCSlusallek In: Proceedings of the 17th International Conference on Web 3D Technology4 Web3D 2)12 [3] xml3dFjs: Architecture of a Polyfill Implementation of XML3D KristianCSons;CChristianCSchlinkmann;CFelixCKlein;CDmitriCRubinstein;CPhilippCSlusallek In: Proceedings of the 6th Workshop on Software Engineering and Architectures for Realtime Interactive Systems4 SEARIS 2)13 [4] Blast T A Binary Large Structured Transmission Format for the Web JanCSutter;CKristianCSons;CPhilippCSlusallek In: Proceedings of the 19th International Conference on Web 3D Technology4 Web3D 2)14 [5] Configurable Instances of 3D Models for Declarative 3D in the Web FelixCKlein;CTorstenCSpieldenner;CKristianCSons;CPhilippCSlusallek In: Proceedings of the 19th International Conference on Web 3D Technology4 Web3D 2)14 [6] shadeFjs: Adaptive Material Descriptions KristianCSons;CFelixCKlein;CJanCSutter;CPhilippCSlusallek In: Computer Graphics Forum RProceedings of Pacific Graphicsm4 33R7m4 2)14 SEE ME RUNNING

THE XML3D ARCHITECTURE - DFKI

  • Upload
    others

  • View
    7

  • Download
    0

Embed Size (px)

Citation preview

Page 1: THE XML3D ARCHITECTURE - DFKI

THE XML3D ARCHITECTUREKristian Sons, Felix Klein, Jan Sutter, Philipp Slusallek

<!doctype html>_htmlvlang-benb'_head'vv_title'ThevXML{Kv9rchitecture_;title'vv_scriptvtype-btext;javascriptbvsrc-b00;00;script;xml{d0jsb'_;script'_;head'_body'_divvid-bcontentb'vv_h('$icciovandvSuzanne_;h('

vv_xml{dvactiveView-bodefaultViewbvstyle-bwidth}v244pxIvheight}vk44pxIb'vvvv_defs'

vvvvvv_scriptvid-bcustomMaterialbvtype-btext;javascriptb'vvvvvvvvfunctionvshadeVenvwv{vvvvvvvvvvvarvksv=venv0specular$olorv||vnewvVecV407wIvvvvvvvvvvvarvtxv=venv0texcoord0mulV)4404wIvvvvvvvvvvvarvsweepv=vMath0sinVenv0timev*v0)8wv*vtx0xVwv*v40448Ivvvvvvvvvvvarvpxv=vtx0xVwv+vtx0yVwv*vV(058v*vsweepv+v(04wIvvvvvvvvvvvarvmod9mountv=vVpxv/vk7wv%v{I

vvvvvvvvvvvarvtints4v=vnewvVec{V(:v08:v0)wIvvvvvvvvvvifvVenv0tints4v&&venv0tints40sample)Kwv{vvvvvvvvvvvvtints4v=venv0tints40sample)KVenv0texcoordw0rgbVwvvvvvvvvvv}vvvvvvvvvvvarvtints(v=venv0tint(v||vnewvVec{V0{:v07:v0kwIvvvvvvvvvvvarvtints)v=venv0tint)v||vnewvVec{V0{:v02:v(wIvvvvvvvvvvvarvtintv=vmod9mountv>v)v?vtints)v:vVmod9mountv>v(wv?vtints(v:vtints4IvvvvvvvvvvreturnvnewvShadeVw0diffuseVtint0mulVMath0fractVmod9mountww:venv0normalwvvvvvvvvvvvvvvvvvvvvvvvvvvvv0wardVks:venv0normal:venv0tangent0xyzVw:v40k:v40(wIvvvvvvvv}vvvvvv_;script'

vvvvvv_materialvid-bmyMaterialbvscript-bocustomMaterialb'vvvvvvvv_floatvname-bambientIntensityb'40(_;float'vvvvvvvv_float{vname-bspecular$olorb'408v408v408_;float{'vvvvvvvv_floatvname-btimeb'408_;float'vvvvvvvv_texturevname-btints4bvwraps-brepeatbvwraps-brepeatb'vvvvvvvvvv_imgvsrc-b00;textures;wood0jpgb;'vvvvvvvv_;texture'vvvvvv_;material'

vvvvvv_lightshadervid-blight(bvscript-burn}xml{d}lightshader}spotb'vvvvvvvv_float{vname-bintensityb'(v(v(_;float{'vvvvvvvv_float{vname-battenuationb'(v4v404447_;float{'vvvvvvvv_boolvname-bcastShadowb'true_;bool'vvvvvv_;lightshader'

vvvvvv_datavid-bmesh_databvcompute-btangentv-vxflow0calculateTangentsVindex:vposition:vnormal:vtexcoordwb'vvvvvvvv_datavsrc-b00;00;resources;meshes;suzanne0blstb'_;data'vvvvvv_;data'

vvvvvv_transformvid-bt_Suzannebvtranslation-b6(5v)v(8bvrotation-b(v4v4v6)0)bvscale-bkvkvkb'_;transform'

vvvv_;defs'

vvvv_groupvstyle-bmaterial}vurlVomyMaterialwb'vvvvvv_meshvtype-btrianglesbvtransform-bot_Suzannebvonclick-balertVzHi:vmyvnamevisvSuzanne.zwIb'vvvvvvvv_datavsrc-bomesh_datab'_;data'vvvvvvvv_float{vname-btints(b'407v404v40)_;float{'vvvvvv_;mesh'vvvvvv_group'

vvvvvvvv_modelvsrc-b00;00;resources;assets;robots;ciccio0xmloassetb'vvvvvvvvvv_assetdatavname-banimationb'vvvvvvvvvvvv_floatvname-bkeyb'408_;float'vvvvvvvvvv_;assetdata'vvvvvvvv_;model'

vvvvvv_;group'vvvv_;group'vvvv_groupvstyle-btransform}vvtranslate{dV6)4px:vk4px:v4pxwvrotateXV6,4degwvrotateYV6{4degwIb'vvvvvv_lightvshader-bolight(b'_;light'vvvv_;group'vvvv_viewvid-bdefaultViewb'_;view'

vv_;xml{d'vv_scriptvtype-btext;javascriptb'vvvv// Keyframe animation with jQueryvvvv1Vbxml{dbw0onVbframedrawnb:vfunctionvVewv{vvvvvvvarvkeyv=vcomputeKeyframeVewIvvvvvv1Vz#[name-key]zw0textVkeywIvvvv}wIvv_;script'_;div'_;body'_;html'

HTML5XML(D1is1an1extension1to1HTML'1that1allows1describing1interactive1(D1graphicsin1any1Web1pageP

XML3DThe1XML(D1scene1description1[I]1is1emGbedded1inside1HTML1using1the14xml(d21tag1which1is1fully1styleable1with1CSSP

GENERIC DATAXML(D1has1a1generic1approach1to1dataPUsers1can1define1named1and1typed1data1entries1that1can1be1used1ePgP1as1mesh1attributesz1material1parametersz1or1with1XflowPThe1combined1data1entries1defined1by1the14data21tag1can1be1reusedz1specialized1and1composed1from1multiple1sourcesP1The1entries1defined1in14data21elements1can1be1mapped1directly1to1GPU1buffers1in1WebGLP

DEFINITION AREAThe14defs21area1is1adopted1from1SVGR1Itdefines1content1to1be1referenced1and1reusedlaterP

HTML ELEMENTSXML(D1reuses1existing1HTML1element1and1concepts1wherever1possibleP

HIERARCHY4group21elements1define1the1scene1hierGarchy1in1the1DOM1treeP1Materials1and1transGformations1can1be1applied1to1entire1groupshierarchicallyP

TRANSFORMATIONSXML(D1provides1three1ways1to1define1transGformationsR1Via1CiS1CSSz1CiiS1by1referencing1a4transform21elementz1or1CiiiS1through1anXflow1graph1that1defines1a1data1entry1named1ftransformfP

LIGHTSLights1are1first1level1objects1in1the1scenehierarchyP1Light1definitions1can1be1reusedreferencing1a1light1shaderP

ASSET INSTANCINGAssets1can1be1externally1defined1and1inGstanced1multiple1times1within1a1scene1[']PEach1instance1can1be1specialized1by1overGriding1values1from1the1instancing1documentPAssets1can1reference1other1assets1recursivelywhile1maintaining1full1configurabilityP

VIEWSViews1define1camera1parameters1within1thescene1hierarchyP1The1currently1active1view1isdefined1via1the1factiveViewf1attribute1of1the14xml(d21elementP

POLYFILLJust1add1a1single1script1to1your1web1page1to1enable1XML(D1in1the1browserP1The1Polyfill1implementation1[(]1uses1WebGL1and1JavaGScript1to1emulate1native1XML(D1supportP

REFERENCESIn1XML(D1all1resources1can1be1referenced1by1a1URIP1A1resource1is1predefined1CePgP1oftenused1light1and1material1modelsSz1defined1within1the1same1document1or1in1anexternal1resourceP

BLASTBLAST1[)]1is1a1novel1transmission1format1for1binary1resourcesP1It1is1streamable1and1offersa1flexible1approach1to1compression1based1on1a1codeGonGdemand1approachP

SHADE.JSWith1shadePjs1[j]z1developers1can1write1portGable1materials1using1JavaScriptP1It1is1renderer1agnosticz1adaptive1and1compiles1to1GLSL1for1forward1and1deferred1rendering1viaOpenGL1but1can1also1compile1to1ePgP1OSL1for1ray1tracing1and1global1illuminationP

XFLOWXflow1[O]1is1a1declarative1approach1to1deGfine1composable1data1resources1as1well1as1processing1on1this1data1via1a1dataflow1graphP1It1can1be1used1for1geometry1procesGsing1CePgP1skinning1and1morphingSz1animationz1image1processing1CePgP1postprocessing1and1ARSz1and1othersP1Its1declarative1approach1allows1mapping1computations1to1the1GPU1and1other1parallel1processors1via1differentsupported1APIs1CePgP1WebGLz1WebCLz1ParallelJSz1SIMDPjsSP

CSSCSS1can1be1used1to1style1XML(D1elementszePgP1to1define1transformations1on1groups1using1CSS(1(D1transformsP

SPECIALIZATIONSpecialization1of1reusable1resources1is1ageneral1concept1in1XML(D1that1is1achievedwith1partial1overridesP1Assetsz1materialsz1meshes1and1data1in1general1can1be1specializedP

EVENT ATTRIBUTESSimilar1to1HTMLz1XML(D1defines1eventsfor11elements1in1the1scene1graph1like1startGing1a1JavaScript1when1the1user1clicks1on1anelementP

JAVASCRIPTJavaScript1can1modify1the1web1page11G1andthus1the1(D1scene1G1arbitrarily1by1modifyingthe1DOMP1Any1of1the1numerous1DOM1libraries1can1be1usedz1ePgP1jQueryP

Renderer-Independent Dynamic Scenes Large ScenesProgrammable Materials

[6]gXML3D:gInteractiveg3DgGraphicsgforgthegWebKristianCSons;CFelixCKlein;CDmitriCRubinstein;CSergiyCByelozyorov;CPhilippCSlusallekIn:6Proceedings6of6the615th6International6Conference6on6Web63D6Technology46Web3D62)1)

[2]gXflow:gDeclarativegDatagProcessinggforgthegWebFelixCKlein;CKristianCSons;CStefanCJohn;CDmitriCRubinstein;CSergiyCByelozyorov;CPhilippCSlusallekIn:6Proceedings6of6the617th6International6Conference6on6Web63D6Technology46Web3D62)12

[3]gxml3dFjs:gArchitecturegofgagPolyfillgImplementationgofgXML3DKristianCSons;CChristianCSchlinkmann;CFelixCKlein;CDmitriCRubinstein;CPhilippCSlusallekIn:6Proceedings6of6the66th6Workshop6on6Software6Engineering6and6Architectures6for6Realtime6Interactive6Systems46SEARIS62)13

[4]gBlastgTgAgBinarygLargegStructuredgTransmissiongFormatgforgthegWebJanCSutter;CKristianCSons;CPhilippCSlusallekIn:6Proceedings6of6the619th6International6Conference6on6Web63D6Technology46Web3D62)14

[5]gConfigurablegInstancesgofg3DgModelsgforgDeclarativeg3DgingthegWebFelixCKlein;CTorstenCSpieldenner;CKristianCSons;CPhilippCSlusallekIn:6Proceedings6of6the619th6International6Conference6on6Web63D6Technology46Web3D62)14

[6]gshadeFjs:gAdaptivegMaterialgDescriptionsKristianCSons;CFelixCKlein;CJanCSutter;CPhilippCSlusallekIn:6Computer6Graphics6Forum6RProceedings6of6Pacific6Graphicsm4633R7m462)14

SEE ME

RUNNING