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