Viewport
Viewport is a Grouping node that can contain most nodes. Viewport specifies a set of rectangular clip boundaries against which the children nodes are clipped as they are rendered.
The Viewport node belongs to the Layering component and its container field is viewport. It is available since X3D version 3.2 or later.
Fields
SFNode [in, out] metadata NULL [X3DMetadataObject]
Metadata are not part of the X3D world and not interpreted by the X3D browser, but they can be accessed via the ECMAScript interface.
MFFloat [in, out] clipBoundary [ 0, 1, 0, 1 ] [0,1]
ClipBoundary is specified in fractions of the normal render surface in the sequence left/right/bottom/top. When children are rendered, the output will only appear in the specified subset of the render surface.
Hint
Default value 0 1 0 1 indicates 0-1 left-to-right and 0-1 bottom-to-top, meaning full view.
SFVec3f [ ] bboxSize -1 -1 -1 (0,∞) or -1 -1 -1
Bounding box size is usually omitted, and can easily be calculated automatically by an X3D player at scene-loading time with minimal computational cost. Bounding box size can also be defined as an optional authoring hint that suggests an optimization or constraint.
Hint
Can be useful for collision computations or inverse-kinematics (IK) engines.
SFVec3f [ ] bboxCenter 0 0 0 (-∞,∞)
Bounding box center: optional hint for position offset from origin of local coordinate system.
MFNode [in] addChildren
Input field addChildren.
MFNode [in] removeChildren
Input field removeChildren.
MFNode [in, out] children [ ] [X3DChildNode]
Grouping nodes contain a list of children nodes.
Hint
Each grouping node defines a coordinate space for its children, relative to the coordinate space of its parent node. Thus transformations accumulate down the scene graph hierarchy.
Example
XML Encoding
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.3//EN" "http://www.web3d.org/specifications/x3d-3.3.dtd"> <X3D profile='Full' version='3.3' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.3.xsd'> <head> <meta name='comment' content='World of Titania'/> <meta name='created' content='Sun, 03 Dec 2017 04:29:28 GMT'/> <meta name='creator' content='Holger Seelig'/> <meta name='generator' content='Titania V4.0.4, http://titania.create3000.de'/> <meta name='identifier' content='file:///home/holger/Projekte/Server/create3000.de/media/htdocs/components/Layering/Viewport/Viewport.O.x3d'/> <meta name='modified' content='Wed, 24 Jan 2018 22:35:40 GMT'/> <meta name='titania-add-metadata' content='true'/> </head> <Scene> <WorldInfo/> <LayerSet order='1, 2, 3'> <Layer DEF='Background' isPickable='false'> <Background DEF='White' skyColor='1 1 1'/> </Layer> <LayoutLayer DEF='Stars'> <Layout scaleMode='"STRETCH", "NONE"'/> <Viewport DEF='_1' clipBoundary='0, 1, 0.177, 0.822'/> <Background DEF='Gray_2' skyColor='0.2 0.2 0.2'/> <Transform DEF='UnderTheSea' scale='2.48 1.16 1'> <Shape> <Appearance> <ImageTexture url='"under-the-sea.png"' repeatS='false' repeatT='false'/> </Appearance> <Rectangle2D size='1 1'/> </Shape> </Transform> </LayoutLayer> <Layer DEF='Particles' isPickable='false'> <Viewport USE='_1'/> <ParticleSystem DEF='Bubbles1' maxParticles='3' particleLifetime='15' lifetimeVariation='0.2' particleSize='2 2'> <PolylineEmitter speed='0.5' variation='0.5' coordIndex='0, 1, -1'> <Coordinate point='-10 -5 0, 10 -5 0'/> </PolylineEmitter> <Appearance> <ImageTexture url='"bubble1.png"' repeatS='false' repeatT='false'/> </Appearance> </ParticleSystem> <ParticleSystem DEF='Bubbles2' maxParticles='5' particleLifetime='15' lifetimeVariation='0.2' particleSize='1.5 1.5'> <PolylineEmitter speed='0.5' variation='0.5' coordIndex='0, 1, -1'> <Coordinate point='-10 -5 0, 10 -5 0'/> </PolylineEmitter> <Appearance> <ImageTexture url='"bubble2.png"' repeatS='false' repeatT='false'/> </Appearance> </ParticleSystem> </Layer> </LayerSet> </Scene> </X3D> |
Classic Encoding
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
#X3D V3.3 utf8 Titania V4.0.6 PROFILE Full META "comment" "World of Titania" META "created" "Sun, 03 Dec 2017 04:29:28 GMT" META "creator" "Holger Seelig" META "generator" "Titania V4.0.4, http://titania.create3000.de" META "identifier" "file:///home/holger/Projekte/Server/create3000.de/media/htdocs/components/Layering/Viewport/Viewport.O.x3d" META "modified" "Wed, 24 Jan 2018 22:35:40 GMT" META "titania-add-metadata" "true" WorldInfo { } LayerSet { order [ 1, 2, 3 ] layers [ DEF Background Layer { isPickable FALSE children DEF White Background { skyColor 1 1 1 } } DEF Stars LayoutLayer { layout Layout { scaleMode [ "STRETCH", "NONE" ] } viewport DEF _1 Viewport { clipBoundary [ 0, 1, 0.177, 0.822 ] } children [ DEF Gray_2 Background { skyColor 0.2 0.2 0.2 } DEF UnderTheSea Transform { scale 2.48 1.16 1 children Shape { appearance Appearance { texture ImageTexture { url "under-the-sea.png" repeatS FALSE repeatT FALSE } } geometry Rectangle2D { size 1 1 } } } ] } DEF Particles Layer { isPickable FALSE viewport USE _1 children [ DEF Bubbles1 ParticleSystem { maxParticles 3 particleLifetime 15 lifetimeVariation 0.2 particleSize 2 2 emitter PolylineEmitter { speed 0.5 variation 0.5 coordIndex [ 0, 1, -1 ] coord Coordinate { point [ -10 -5 0, 10 -5 0 ] } } appearance Appearance { texture ImageTexture { url "bubble1.png" repeatS FALSE repeatT FALSE } } } DEF Bubbles2 ParticleSystem { maxParticles 5 particleLifetime 15 lifetimeVariation 0.2 particleSize 1.5 1.5 emitter PolylineEmitter { speed 0.5 variation 0.5 coordIndex [ 0, 1, -1 ] coord Coordinate { point [ -10 -5 0, 10 -5 0 ] } } appearance Appearance { texture ImageTexture { url "bubble2.png" repeatS FALSE repeatT FALSE } } } ] } ] } |
JSON Encoding
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 |
{ "X3D": { "encoding": "UTF-8", "@profile": "Full", "@version": "3.3", "@xsd:noNamespaceSchemaLocation": "http://www.web3d.org/specifications/x3d-3.3.xsd", "JSON schema": "http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json", "head": { "meta": [ { "@name": "comment", "@content": "World of Titania" }, { "@name": "created", "@content": "Sun, 03 Dec 2017 04:29:28 GMT" }, { "@name": "creator", "@content": "Holger Seelig" }, { "@name": "generator", "@content": "Titania V4.0.2, http://titania.create3000.de" }, { "@name": "identifier", "@content": "file:///home/holger/Projekte/Server/create3000.de/media/htdocs/components/Layering/Viewport/Viewport.O.x3d" }, { "@name": "modified", "@content": "Fri, 08 Dec 2017 03:55:44 GMT" }, { "@name": "titania-add-metadata", "@content": "true" } ] }, "Scene": { "-children": [ { "WorldInfo": { } }, { "LayerSet": { "@order": [ 1, 2, 3 ], "-layers": [ { "Layer": { "@DEF": "Background", "@isPickable": false, "-children": [ { "Background": { "@DEF": "White", "@skyColor": [ 1, 1, 1 ] } } ] } }, { "LayoutLayer": { "@DEF": "Stars", "-layout": { "Layout": { "@scaleMode": [ "STRETCH", "NONE" ] } }, "-viewport": { "Viewport": { "@DEF": "_1", "@clipBoundary": [ 0, 1, 0.177, 0.822 ] } }, "-children": [ { "Background": { "@DEF": "Gray_2", "@skyColor": [ 0.2, 0.2, 0.2 ] } }, { "Transform": { "@DEF": "UnderTheSea", "@scale": [ 2.48, 1.16, 1 ], "-children": [ { "Shape": { "-appearance": { "Appearance": { "-texture": { "ImageTexture": { "@url": [ "under-the-sea.png" ], "@repeatS": false, "@repeatT": false } } } }, "-geometry": { "Rectangle2D": { "@size": [ 1, 1 ] } } } } ] } } ] } }, { "Layer": { "@DEF": "Particles", "@isPickable": false, "-viewport": { "Viewport": { "@USE": "_1" } }, "-children": [ { "ParticleSystem": { "@DEF": "Bubbles1", "@maxParticles": 3, "@particleLifetime": 15, "@lifetimeVariation": 0.2, "@particleSize": [ 2, 2 ], "-emitter": { "PolylineEmitter": { "@speed": 0.5, "@variation": 0.5, "@coordIndex": [ 0, 1, -1 ], "-coord": { "Coordinate": { "@point": [ -10, -5, 0, 10, -5, 0 ] } } } }, "-appearance": { "Appearance": { "-texture": { "ImageTexture": { "@url": [ "bubble1.png" ], "@repeatS": false, "@repeatT": false } } } } } }, { "ParticleSystem": { "@DEF": "Bubbles2", "@maxParticles": 5, "@particleLifetime": 15, "@lifetimeVariation": 0.2, "@particleSize": [ 1.5, 1.5 ], "-emitter": { "PolylineEmitter": { "@speed": 0.5, "@variation": 0.5, "@coordIndex": [ 0, 1, -1 ], "-coord": { "Coordinate": { "@point": [ -10, -5, 0, 10, -5, 0 ] } } } }, "-appearance": { "Appearance": { "-texture": { "ImageTexture": { "@url": [ "bubble2.png" ], "@repeatS": false, "@repeatT": false } } } } } } ] } } ] } } ] } } } |
Titania
X_ITE