Appearance

Appearance specifies the visual properties of geometry by containing the Material, ImageTexture/MovieTexture/PixelTexture, FillProperties, LineProperties, and TextureTransform nodes.

Overview

Appearance
Hierarchy
Fields
Description
Example
Browser Compatibility
External Links

The Appearance node belongs to the Shape component and its container field is appearance. It is available since X3D version 3.0 or later.

Hierarchy

+ X3DNode

+ X3DAppearanceNode

+ Appearance

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.

SFNode [in, out] fillProperties NULL [FillProperties]

Input/Output field fillProperties.

SFNode [in, out] lineProperties NULL [LineProperties]

Input/Output field lineProperties.

SFNode [in, out] material NULL [X3DMaterialNode]

Input/Output field material.

SFNode [in, out] texture NULL [X3DTextureNode]

Input/Output field texture.

SFNode [in, out] textureTransform NULL [X3DTextureTransformNode]

Input/Output field textureTransform.

MFNode [in, out] shaders [ ] [X3DShaderNode]

Input/Output field shaders.

Description

Hints

Insert a Shape node before adding geometry or Appearance. Interchange profile hint: only Material and ImageTexture children are allowed.
DEF/USE copies of a single node can provide a similar "look + feel" style for related shapes in a scene.
Advanced uses can contain MultiTexture, MultiTextureTransform/TextureTransformMatrix3D/TextureTransform3D, ComposedShader/PackagedShader/ProgramShader, ComposedTexture3D/ImageTexture3D/PixelTexture3D, or ComposedCubeMapTexture/GeneratedCubeMapTexture/ImageCubeMapTexture.

Example

screenshot

Downlod ZIP file

XML Encoding

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

<?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">

<head>

</head>

<Scene>

</ExternProtoDeclare>

</ExternProtoDeclare>

<Background DEF='Gray'

skyColor='0.2 0.2 0.2'/>

<Viewpoint

description='Initial View'

position='0 0 7.23798'

centerOfRotation='-1.77636e-15 -7.10543e-15 3.55271e-15'/>

</ProtoInstance>

<Transform DEF='Material'

translation='-1.25 1.25 0'>

<Shape>

<Material DEF='Metal15'

ambientIntensity='0.0787879'

diffuseColor='0.315152 0.0745695 0'

specularColor='0.508861 0.684007 0.326263'

shininess='0.0363636'/>

</Appearance>

</Shape>

<TouchSensor

description='Material'/>

</Transform>

<Transform DEF='Texture'

translation='-1.31711 -1.2914 0'>

<Shape>

<ImageTexture

url='"black-world.jpg"'/>

</Appearance>

</Shape>

<TouchSensor

description='Texture'/>

</Transform>

<Transform DEF='TextureTransform'

translation='1.25 -1.25 0'>

<Shape>

<ImageTexture

url='"color-palette.png"'/>

<TextureTransform

scale='8 8'/>

</Appearance>

</Shape>

<TouchSensor

description='TextureTransform'/>

</Transform>

<Transform DEF='Shader'

translation='1.25 1.25 0'>

<Shape>

<Material DEF='Rococo24'

ambientIntensity='0.226102'

diffuseColor='0.292563 0.566925 0.924'

specularColor='0.574 0.574 0.574'

shininess='0.007'/>

</ProtoInstance>

</Appearance>

</Shape>

<TouchSensor

description='Shader'/>

</Transform>

<![CDATA[ecmascript:

function initialize ()

{

Browser .setBrowserOption ("PrimitiveQuality", "HIGH");

Browser .setBrowserOption ("Shading", "PHONG");

}

]]>

</Script>

</Scene>

</X3D>

Classic Encoding

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

#X3D V3.3 utf8 Titania V3.0.4

PROFILE Full

UNIT angle degree 0.0174532925199432958

META "comment" "World of Titania"

EXTERNPROTO Grid [

inputOutput SFVec3f translation

inputOutput SFRotation rotation

inputOutput SFVec3f scale

inputOutput MFInt32 dimension

inputOutput MFInt32 majorLineEvery

inputOutput MFInt32 majorLineOffset

inputOutput SFVec3f planeOffset

inputOutput SFColor planeColor

inputOutput SFFloat planeTransparency

inputOutput SFColor lineColor

inputOutput SFFloat lineTransparency

inputOutput SFColor majorLineColor

inputOutput SFFloat majorLineTransparency

inputOutput SFBool numbers

inputOutput SFVec3f numberOffset

inputOutput SFNode numberAppearance

inputOutput SFNode numberFontStyle

initializeOnly SFBool solid

]

"Grid.x3d#Grid"

EXTERNPROTO Water3 [

inputOutput SFFloat amplitude

inputOutput SFFloat frequency

inputOutput SFVec2f velocity

inputOutput SFFloat turbulence

inputOutput SFFloat contrast

inputOutput SFFloat skyIntensity

inputOutput SFColor skyColor

]

"Water3.x3d#Water3"

DEF Gray Background {

skyColor 0.2 0.2 0.2

}

Viewpoint {

description "Initial View"

position 0 0 7.23798

centerOfRotation -1.77636e-15 -7.10543e-15 3.55271e-15

}

Grid {

rotation 1 0 0 1.5707963267949

scale 0.25 0.25 0.25

dimension [ 20, 0, 20 ]

lineColor 0 0 0

majorLineColor 0 0 0

numbers FALSE

}

DEF Material Transform {

translation -1.25 1.25 0

children [

Shape {

appearance Appearance {

material DEF Metal15 Material {

ambientIntensity 0.0787879

diffuseColor 0.315152 0.0745695 0

specularColor 0.508861 0.684007 0.326263

shininess 0.0363636

}

geometry Sphere { }

}

TouchSensor {

description "Material"

}

]

}

DEF Texture Transform {

translation -1.31711 -1.2914 0

children [

Shape {

appearance Appearance {

material Material { }

texture ImageTexture {

url "black-world.jpg"

}

geometry Sphere { }

}

TouchSensor {

description "Texture"

}

]

}

DEF TextureTransform Transform {

translation 1.25 -1.25 0

children [

Shape {

appearance Appearance {

material Material { }

texture ImageTexture {

url "color-palette.png"

}

textureTransform TextureTransform {

scale 8 8

}

geometry Sphere { }

}

TouchSensor {

description "TextureTransform"

}

]

}

DEF Shader Transform {

translation 1.25 1.25 0

children [

Shape {

appearance Appearance {

material DEF Rococo24 Material {

ambientIntensity 0.226102

diffuseColor 0.292563 0.566925 0.924

specularColor 0.574 0.574 0.574

shininess 0.007

}

shaders Water3 {

amplitude 0.1

skyIntensity 0.6

skyColor 0.5 0.5 1

}

geometry Sphere { }

}

TouchSensor {

description "Shader"

}

]

}

DEF EnterWorldScript Script {

url "ecmascript:

function initialize ()

{

Browser .setBrowserOption (\"PrimitiveQuality\", \"HIGH\");

Browser .setBrowserOption (\"Shading\", \"PHONG\");

}

JSON Encoding

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

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

{ "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"

}

"unit": [

{

"@category": "angle",

"@name": "degree",

"@conversionFactor": 0.0174532925199432958

]

"Scene": {

"-children": [

{ "ExternProtoDeclare":

{

"@name":"Grid",

"field": [

{

"@accessType": "inputOutput",

"@type": "SFVec3f",

"@name": "translation"

{

"@accessType": "inputOutput",

"@type": "SFRotation",

"@name": "rotation"

{

"@accessType": "inputOutput",

"@type": "SFVec3f",

"@name": "scale"

{

"@accessType": "inputOutput",

"@type": "MFInt32",

"@name": "dimension"

{

"@accessType": "inputOutput",

"@type": "MFInt32",

"@name": "majorLineEvery"

{

"@accessType": "inputOutput",

"@type": "MFInt32",

"@name": "majorLineOffset"

{

"@accessType": "inputOutput",

"@type": "SFVec3f",

"@name": "planeOffset"

{

"@accessType": "inputOutput",

"@type": "SFColor",

"@name": "planeColor"

{

"@accessType": "inputOutput",

"@type": "SFFloat",

"@name": "planeTransparency"

{

"@accessType": "inputOutput",

"@type": "SFColor",

"@name": "lineColor"

{

"@accessType": "inputOutput",

"@type": "SFFloat",

"@name": "lineTransparency"

{

"@accessType": "inputOutput",

"@type": "SFColor",

"@name": "majorLineColor"

{

"@accessType": "inputOutput",

"@type": "SFFloat",

"@name": "majorLineTransparency"

{

"@accessType": "inputOutput",

"@type": "SFBool",

"@name": "numbers"

{

"@accessType": "inputOutput",

"@type": "SFVec3f",

"@name": "numberOffset"

{

"@accessType": "inputOutput",

"@type": "SFNode",

"@name": "numberAppearance"

{

"@accessType": "inputOutput",

"@type": "SFNode",

"@name": "numberFontStyle"

{

"@accessType": "initializeOnly",

"@type": "SFBool",

"@name": "solid"

}

"@url": [ "Grid.x3d#Grid" ]

}

{ "ExternProtoDeclare":

{

"@name":"Water3",

"field": [

{

"@accessType": "inputOutput",

"@type": "SFFloat",

"@name": "amplitude"

{

"@accessType": "inputOutput",

"@type": "SFFloat",

"@name": "frequency"

{

"@accessType": "inputOutput",

"@type": "SFVec2f",

"@name": "velocity"

{

"@accessType": "inputOutput",

"@type": "SFFloat",

"@name": "turbulence"

{

"@accessType": "inputOutput",

"@type": "SFFloat",

"@name": "contrast"

{

"@accessType": "inputOutput",

"@type": "SFFloat",

"@name": "skyIntensity"

{

"@accessType": "inputOutput",

"@type": "SFColor",

"@name": "skyColor"

}

"@url": [ "Water3.x3d#Water3" ]

}

{ "Background":

{

"@DEF": "Gray",

"@skyColor": [ 0.2, 0.2, 0.2 ]

}

{ "Viewpoint":

{

"@description": "Initial View",

"@position": [ 0, 0, 7.23798 ],

"@centerOfRotation": [ -1.77636e-15, -7.10543e-15, 3.55271e-15 ]

}

{ "ProtoInstance":

{

"@name": "Grid",

"fieldValue": [

{

"@name": "rotation",

"@value": [ 1, 0, 0, 1.5707963267949 ]

{

"@name": "scale",

"@value": [ 0.25, 0.25, 0.25 ]

{

"@name": "dimension",

"@value": [ 20, 0, 20 ]

{

"@name": "lineColor",

"@value": [ 0, 0, 0 ]

{

"@name": "majorLineColor",

"@value": [ 0, 0, 0 ]

{

"@name": "numbers",

"@value": false

}

]

}

{ "Transform":

{

"@DEF": "Material",

"@translation": [ -1.25, 1.25, 0 ],

"-children": [

{ "Shape":

{

"-appearance": { "Appearance":

{

"-material": { "Material":

{

"@DEF": "Metal15",

"@ambientIntensity": 0.0787879,

"@diffuseColor": [ 0.315152, 0.0745695, 0 ],

"@specularColor": [ 0.508861, 0.684007, 0.326263 ],

"@shininess": 0.0363636

}

"-geometry": { "Sphere":

{

}

{ "TouchSensor":

{

"@description": "Material"

}

]

}

{ "Transform":

{

"@DEF": "Texture",

"@translation": [ -1.31711, -1.2914, 0 ],

"-children": [

{ "Shape":

{

"-appearance": { "Appearance":

{

"-material": { "Material":

{

}

"-texture": { "ImageTexture":

{

"@url": [ "black-world.jpg" ]

}

"-geometry": { "Sphere":

{

}

{ "TouchSensor":

{

"@description": "Texture"

}

]

}

{ "Transform":

{

"@DEF": "TextureTransform",

"@translation": [ 1.25, -1.25, 0 ],

"-children": [

{ "Shape":

{

"-appearance": { "Appearance":

{

"-material": { "Material":

{

}

"-texture": { "ImageTexture":

{

"@url": [ "color-palette.png" ]

}

"-textureTransform": { "TextureTransform":

{

"@scale": [ 8, 8 ]

}

"-geometry": { "Sphere":

{

}

{ "TouchSensor":

{

"@description": "TextureTransform"

}

]

}

{ "Transform":

{

"@DEF": "Shader",

"@translation": [ 1.25, 1.25, 0 ],

"-children": [

{ "Shape":

{

"-appearance": { "Appearance":

{

"-material": { "Material":

{

"@DEF": "Rococo24",

"@ambientIntensity": 0.226102,

"@diffuseColor": [ 0.292563, 0.566925, 0.924 ],

"@specularColor": [ 0.574, 0.574, 0.574 ],

"@shininess": 0.007

}

"-shaders": [

{ "ProtoInstance":

{

"@name": "Water3",

"fieldValue": [

{

"@name": "amplitude",

"@value": 0.1

{

"@name": "skyIntensity",

"@value": 0.6

{

"@name": "skyColor",

"@value": [ 0.5, 0.5, 1 ]

}

]

}

]

}

"-geometry": { "Sphere":

{

}

{ "TouchSensor":

{

"@description": "Shader"

}

]

}

{ "Script":

{

"@DEF": "EnterWorldScript",

"#sourceText": [

"ecmascript:",

"",

"function initialize ()",

"{",

"\tBrowser .setBrowserOption (\"PrimitiveQuality\", \"HIGH\");",

"\tBrowser .setBrowserOption (\"Shading\", \"PHONG\");",

"}"

]

}

]

}

Browser Compatibility

Titania	X_ITE
yes	yes

External Links

X3D Specification

Titania X3D Editor

It starts with you!

Titania v3.0.4

It starts with you!

X3D Reference

Appearance

Appearance

Hierarchy

Fields

SFNode [in, out] metadata NULL [X3DMetadataObject]

SFNode [in, out] fillProperties NULL [FillProperties]

SFNode [in, out] lineProperties NULL [LineProperties]

SFNode [in, out] material NULL [X3DMaterialNode]

SFNode [in, out] texture NULL [X3DTextureNode]

SFNode [in, out] textureTransform NULL [X3DTextureTransformNode]

MFNode [in, out] shaders [ ] [X3DShaderNode]

Description

Hints

Example

XML Encoding

Classic Encoding

JSON Encoding

Browser Compatibility

External Links