Skip to content

Commit 6157c2d

Browse files
csvurtcsvurt
committed
Merge branch '5.2'
2 parents ae7d64b + 815688b commit 6157c2d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+2184
-926
lines changed

‎Gruntfile.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ exports = module.exports = function (grunt) {
7272
options: {
7373
browserifyOptions: {
7474
debug: true,
75+
transform: ["brfs"],
7576
standalone: "XML3DTestLib"
7677
}
7778
}
@@ -88,7 +89,7 @@ exports = module.exports = function (grunt) {
8889
{ from: "%VERSION%", to: devVersionString }
8990
]
9091
}
91-
]
92+
], "brfs"
9293
]
9394
}
9495
}
@@ -98,7 +99,8 @@ exports = module.exports = function (grunt) {
9899
dest: "./build/output/xml3d.js",
99100
options: {
100101
browserifyOptions: {
101-
debug: false
102+
debug: false,
103+
transform: ["brfs"]
102104
}
103105
}
104106
}

‎css/xml3d-component.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
float,
2+
float2,
3+
float3,
4+
float4,
5+
float4x4,
6+
int,
7+
int4,
8+
bool,
9+
string,
10+
script {
11+
display: none;
12+
}
13+
14+
mesh,
15+
group,
16+
model {
17+
position: relative;
18+
}
19+

‎css/xml3d.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,14 @@ xml3d|script {
1616
xml3d|mesh,
1717
xml3d|group,
1818
xml3d|model {
19-
position: absolute;
19+
position: relative;
2020
}
2121

2222
.xml3d-canvas-style {
2323
cursor: default;
2424
display: block;
2525
}
26+
27+
._xml3d_hideDiv {
28+
display: none;
29+
}

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22
"name": "xml3d.js",
33
"description": "XML3D implementation based on JS and WebGL",
44
"homepage": "http://ww.xml3d.org",
5-
"version": "5.1.4",
5+
"version": "5.2.0",
66
"repository": {
77
"type": "git",
88
"url": "https://github.com/xml3d/xml3d.js"
99
},
1010
"license": "MIT",
1111
"devDependencies": {
12+
"brfs": "^1.4.0",
1213
"browserify-replace": "0.9.0",
1314
"grunt": "~0.4.5",
1415
"grunt-browserify": "^3.2.0",
@@ -28,6 +29,6 @@
2829
"lodash.create": "^3.1.0",
2930
"lodash.defaults": "^3.1.1",
3031
"whatwg-fetch": "0.10.1",
31-
"texture-manager": "http://github.com/ksons/texture-manager/tarball/master"
32+
"texture-manager": "git://github.com/ksons/texture-manager.git#master"
3233
}
3334
}

‎spec/index.html‎

Lines changed: 167 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<html>
33
<head lang="en">
44
<meta charset="UTF-8">
5-
<title>XML3D 5.1 Specification</title>
5+
<title>XML3D 5.2 Specification</title>
66
<script src='http://www.w3.org/Tools/respec/respec-w3c-common' async class='remove'></script>
77
<link rel="stylesheet" href="xml3d-spec.css">
88

99
<script class='remove'>
1010
var respecConfig = {
1111
// specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use ED.
12-
specStatus: "unofficial",
12+
specStatus: "base",
1313

1414
// the specification's short name, as in http://www.w3.org/TR/short-name/
1515
shortName: "xml3d",
@@ -696,6 +696,13 @@ <h3>The <code>transform</code> property</h3>
696696
values, which will be combined from left to right. Transformations also apply to all descendant scene
697697
elements, building a transformation hierarchy. </p>
698698

699+
<p>CSS transitions can also be used to animate transforms. The below example smoothly moves an object from left to right:</p>
700+
701+
<pre class="example highlight">
702+
// Ease an object 5 units on the x axis over 500ms
703+
$("#myMesh").css({ transform: "translate3d(5px, 0px, 0px);", transition: "transform 500ms ease" });
704+
</pre>
705+
699706
<div class="note">Some transform functions (eg. <code>translate3d</code>) require a unit of measurement to be
700707
valid. Because browsers do not yet support units that make sense
701708
for a 3D scene these values should be given in 'px'. For example, <code>translate3d(10px, 5px, 0px)</code>.
@@ -704,8 +711,7 @@ <h3>The <code>transform</code> property</h3>
704711
</div>
705712

706713
<div class="note">Some browsers silently ignore invalid CSS transforms. If a CSS transform is not behaving as
707-
expected double check to ensure the formatting and syntax are
708-
valid.
714+
expected double check to ensure the formatting and syntax are valid.
709715
</div>
710716

711717
</section>
@@ -3060,8 +3066,19 @@ <h4>Projective</h4>
30603066

30613067

30623068
<section>
3063-
<h2>Custom materials</h2>
3064-
3069+
<h2>Materials</h2>
3070+
<p>Materials are responsible for describing how an object should be rendered. In XML3D materials generally have two parts:
3071+
a set of textures and parameters and some code that uses these components to determine the final color of each point
3072+
on the surface of an object. On the web this will usually consist of WebGL shader code (GLSL) or Shade.js code. </p>
3073+
3074+
<p>In XML3D this combination of parameters and code is called the material <em>model</em>. A <a>material element</a>
3075+
represents an instance of a particular material model, allowing the parameters to be changed. XML3D contains several
3076+
<a href="#predefined-material-models">predefined material models</a>. It also offers an interface and set of conventions for defining custom material
3077+
models.
3078+
</p>
3079+
3080+
<section>
3081+
<h3>Custom materials</h3>
30653082
<p>XML3D provides an interface to define custom materials in addition to the predefined material models. Such
30663083
materials must first be registered
30673084
with XML3D:</p>
@@ -3138,6 +3155,150 @@ <h2>Custom materials</h2>
31383155
</pre>
31393156

31403157
</div>
3158+
</section>
3159+
</section>
3160+
3161+
<section>
3162+
<h2>Web Components</h2>
3163+
3164+
<p>XML3D supports the <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">web component</a> approach to
3165+
defining custom HTML objects that can be easily encapsulated and shared. </p>
3166+
3167+
<div class="note">
3168+
Web Components are a new technology still under development by the major browsers. In some browsers they may need to be
3169+
explicitly enabled, others may not support them at all. In these cases a <a href="http://webcomponents.org/polyfills/">web components polyfill</a>
3170+
will need to be included in the page.
3171+
</div>
3172+
3173+
<p>The following example shows a simple web component that instantiates a cube:</p>
3174+
3175+
<pre class="example highlight">
3176+
&lt;!-- Component registration --&gt;
3177+
&lt;script type="text/javascript"&gt;
3178+
window.addEventListener("load", function() {
3179+
// This function takes care of registering the web component with the browser
3180+
XML3D.registerComponent(document.querySelector("#cube-template"));
3181+
});
3182+
&lt;/script&gt;
3183+
3184+
&lt;!-- Component template --&gt;
3185+
&lt;template id="cube-template" name="x-cube"&gt;
3186+
&lt;material id="cube-material" model="urn:xml3d:material:phong"&gt;
3187+
&lt;float3 name="diffuseColor"&gt;0 1 0&lt;/float3&gt;
3188+
&lt;/material&gt;
3189+
&lt;mesh material="#cube-material" src="myCubeMesh.xml" type="triangles"&gt;&lt;/mesh&gt;
3190+
&lt;/template&gt;
3191+
3192+
&lt;!-- Instantiating a component --&gt;
3193+
&lt;xml3d&gt;
3194+
&lt;group style="transform: translate3d(0,0,-10px)"&gt;
3195+
&lt;x-cube&gt;&lt;/x-cube&gt;
3196+
&lt;/group&gt;
3197+
&lt;/xml3d&gt;
3198+
</pre>
3199+
3200+
<p>The following rules and limitations also apply to components: </p>
3201+
<ul>
3202+
<li>The <code>names</code> and types of configurable value elements must always match</li>
3203+
<li>The tag <code>name</code> given for the component must include a hyphen '-'</li>
3204+
<li>The component tag itself (eg. <code>&lt;x-cube&gt;</code>) acts as a <a href="#the-group-element">group element</a> in the scene</li>
3205+
<li>Nested templates are not supported, but a template may contain other web components</li>
3206+
<li>Each child node of a web component can only be inserted into a single <code>&lt;content&gt;</code> slot (described below). Children without a matching content slot are ignored.</li>
3207+
</ul>
3208+
3209+
<section>
3210+
<h3>Registration</h3>
3211+
<p>Web components must be registered with the browser before they can be used. XML3D provides a convenience interface for this and it is recommended
3212+
that you use this to register your web components rather than registering them manually. The simplest way to register a web component is to
3213+
pass a URL string to an HTML file containing the <code>template</code> element:</p>
3214+
3215+
<pre class="example highlight">
3216+
var promise = XML3D.registerComponent("path/to/component/template.html");
3217+
</pre>
3218+
3219+
<p>The registration function will return a Promise object that resolves when the component template has been registered with the browser. At that
3220+
point you may begin creating instances of the component. The Promise will reject if the component template could not be found or if an error was
3221+
encountered during the registration process.</p>
3222+
3223+
<p>Optionally you can include your own prototype object for a web component. This allows you to hook into the standard lifecycle callbacks of the
3224+
web component (eg. <code>createdCallback</code>) and to define custom functions that will be available on your web component. The example below registers
3225+
a component that provides the function <code>myFunction</code> on the web component's DOM element:</p>
3226+
3227+
<pre class="example highlight">
3228+
var myPrototype = {
3229+
myFunction : function() { ... },
3230+
createdCallback : function() { ... }
3231+
};
3232+
3233+
XML3D.registerComponent("path/to/component/template.html", {proto: myPrototype});
3234+
3235+
document.body.appendChild(document.createElement("my-component")); // createdCallback would be called here
3236+
document.querySelector("my-component").myFunction();
3237+
</pre>
3238+
3239+
<p>For more information about the various lifecycle callbacks see the <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements">
3240+
Custom Elements
3241+
</a> documentation. Note that XML3D's own lifecycle callbacks will always be called first even when providing your own. These internal callbacks will
3242+
take care of things like creating a shadow root and filling it with the component's template.</p>
3243+
3244+
</section>
3245+
3246+
<section>
3247+
<h3>Configuration</h3>
3248+
3249+
<p>XML3D supports using content elements and attributes to configure web components.
3250+
The following example uses a content element to configure the color of the cube and an attribute to configure its opacity:</p>
3251+
3252+
<pre class="example highlight">
3253+
&lt;template opacity="1" name="x-cube"&gt;
3254+
&lt;material id="cube-material" model="urn:xml3d:material:phong"&gt;
3255+
&lt;content select="float3[name='diffuseColor']"&gt; &lt;!-- Select a float3 element with the name 'diffuseColor' --&gt;
3256+
&lt;float3 name="diffuseColor"&gt;0 1 0&lt;/float3&gt;
3257+
&lt;/content&gt;
3258+
&lt;float name="opacity"&gt;{{opacity}}&lt;/float&gt; &lt;!-- Take opacity from the 'opacity' attribute --&gt;
3259+
&lt;/material&gt;
3260+
&lt;mesh material="#cube-material" src="myCubeMesh.xml" type="triangles"&gt;&lt;/mesh&gt;
3261+
&lt;/template&gt;
3262+
3263+
&lt;xml3d&gt;
3264+
&lt;group style="transform: translate3d(0,0,-10px)"&gt;
3265+
&lt;x-cube opacity="0.5"&gt; &lt;!-- Set the cube's opacity to 0.5 --&gt;
3266+
&lt;float3 name="diffuseColor"&gt;1 0 1&lt;/float3&gt; &lt;!-- This float3 will be appended to the above content slot, overriding the default float3 --&gt;
3267+
&lt;/x-cube&gt;
3268+
&lt;/group&gt;
3269+
&lt;/xml3d&gt;
3270+
</pre>
3271+
3272+
<p>Content elements can also be used to add renderable objects or even other web components, however in this case they will <em>not</em> override
3273+
existing defaults, but will instead be rendered alongside them:</p>
3274+
3275+
<pre class="example highlight">
3276+
&lt;template id="cube-template" name="x-cube"&gt;
3277+
&lt;material id="cube-material" model="urn:xml3d:material:phong"&gt;
3278+
&lt;content select="float3[name='diffuseColor']"&gt;
3279+
&lt;float3 name="diffuseColor"&gt;0 1 0&lt;/float3&gt;
3280+
&lt;/content&gt;
3281+
&lt;/material&gt;
3282+
&lt;content select="mesh"&gt;
3283+
&lt;mesh material="#cube-material" src="myCubeMesh.xml" type="triangles"&gt;&lt;/mesh&gt;
3284+
&lt;!-- The below mesh will be inserted here --&gt;
3285+
&lt;/content&gt;
3286+
&lt;content select=".otherComponent"&gt;
3287+
&lt;!-- The below x-cube instance with the class 'otherComponent' will be inserted here --&gt;
3288+
&lt;/content&gt;
3289+
&lt;/template&gt;
3290+
3291+
&lt;xml3d&gt;
3292+
&lt;group style="transform: translate3d(0,0,-10px)"&gt;
3293+
&lt;x-cube&gt;
3294+
&lt;float3 name="diffuseColor"&gt;1 0 1&lt;/float3&gt;
3295+
&lt;mesh src="myCubeMesh.xml" type="triangles"&gt;&lt;/mesh&gt; &lt;!-- This x-cube component now contains 2 overlapping cubes --&gt;
3296+
&lt;x-cube class="otherComponent"&gt;&lt;/x-cube&gt; &lt;!-- This x-cube component now contains 3 overlapping cubes --&gt;
3297+
&lt;/x-cube&gt;
3298+
&lt;/group&gt;
3299+
&lt;/xml3d&gt;
3300+
</pre>
3301+
</section>
31413302

31423303
</section>
31433304

‎src/base/adapter.js‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
var Events = require("../interface/notification.js");
22
var config = require("../interface/elements.js").config;
33
var Resource = require("../resource");
4+
var URI = require("../utils/uri.js").URI;
45

56
/**
67
* A normal adapter that doesn't need to be connected to a DOM node
@@ -134,8 +135,10 @@ NodeAdapter.prototype.notifyChanged = function(e) {
134135
*/
135136
NodeAdapter.prototype.getAdapterHandle = function(uri, aspectType, canvasId) {
136137
canvasId = canvasId === undefined ? this.factory.canvasId : canvasId;
137-
return Resource.getAdapterHandle(this.node.ownerDocument._documentURL || this.node.ownerDocument.URL,
138-
uri, aspectType || this.factory.aspect, canvasId, this.node.nodeName);
138+
if (typeof uri == "string") {
139+
uri = new URI(uri);
140+
}
141+
return Resource.getAdapterHandle(this.node, uri, aspectType || this.factory.aspect, canvasId);
139142
};
140143
/**
141144
* notifies all adapter that refer to this adapter through AdapterHandles.
@@ -153,14 +156,28 @@ NodeAdapter.prototype.notifyOppositeAdapters = function(type) {
153156
*/
154157
NodeAdapter.prototype.traverse = function(callback) {
155158
callback(this);
156-
var child = this.node.firstElementChild;
157-
while (child) {
158-
var adapter = this.factory.getAdapter(child);
159+
var children = this.getChildren();
160+
161+
for (var i=0; i < children.length; i++) {
162+
var adapter = this.factory.getAdapter(children[i]);
159163
adapter && adapter.traverse(callback);
160-
child = child.nextElementSibling;
161164
}
162165
};
163166

167+
/**
168+
* Returns all child nodes of this adapter, including possible shadow dom/distributed nodes
169+
* @returns {*|Array.<ProcessNode>|Array|HTMLElement[]}
170+
*/
171+
NodeAdapter.prototype.getChildren = function() {
172+
var children = this.node.children;
173+
if (this.node.shadowRoot) {
174+
children = this.node.shadowRoot.children;
175+
} else if (this.node.getDistributedNodes) {
176+
children = this.node.getDistributedNodes();
177+
}
178+
return children;
179+
};
180+
164181

165182
/**
166183
* @interface

0 commit comments

Comments
 (0)