update to materialComponent

public/aframe/index.vwf.yaml

@@ -16,9 +16,13 @@ children:
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:
-      color: "#ECECEC"
-      side: "back"
-      fog: false
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#ECECEC"
+          side: "back"
+          fog: false
   spaceText:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:
@@ -36,12 +40,15 @@ children:
     properties:
       position: "-1 0.5 -3"
       rotation: "0 -30 0"
-      color: "#3c7249"
       depth: 2
       height: 1
       width: 1
       clickable: true
     children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"
       raycaster-listener:
         extends: http://vwf.example.com/aframe/app-raycaster-listener-component.vwf
         type: "component"
@@ -57,7 +64,7 @@ children:
         body: |
           if (this.clickable) {
           let genColor = this.generateColor();
-          this.color = genColor 
+          this.material.color = genColor 
             }
       intersectEventMethod:
         body: |
@@ -91,17 +98,23 @@ children:
     extends: http://vwf.example.com/aframe/asphere.vwf
     properties:
       position: "1 1.25 -4"
-      color: "#e0e014"
       radius: 1
-      wireframe: true
     children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#e0e014"
+          wireframe: true
       box2:
         extends: http://vwf.example.com/aframe/abox.vwf
         properties:
           position: "2 -0.75 0"
-          color: "#2167a5"
           depth: 1
         children:
+          material:
+            extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+            properties:
+              color: "#2167a5"
           interpolation:
             extends: http://vwf.example.com/aframe/interpolation-component.vwf
             properties:

public/aframe2/index.vwf.yaml

@@ -73,21 +73,28 @@ children:
     properties:
       position: "0 0 -3"
       rotation: "0 0 0"
-      color: "#3c7249"
       depth: 2
       height: 1
       width: 1
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"
   box:
     extends: http://vwf.example.com/aframe/abox.vwf
     properties:
       position: "-1 0.5 -3"
       rotation: "0 -30 0"
-      color: "#3c7249"
       depth: 2
       height: 1
       width: 1
       clickable: true
     children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"
       raycaster-listener:
         extends: http://vwf.example.com/aframe/app-raycaster-listener-component.vwf
         type: "component"
@@ -108,7 +115,7 @@ children:
         body: |
           if (this.clickable) {
           let genColor = this.generateColor();
-          this.color = genColor 
+          this.material.color = genColor 
             }
       intersectEventMethod:
         body: |
@@ -142,26 +149,28 @@ children:
     extends: http://vwf.example.com/aframe/asphere.vwf
     properties:
       position: "1 1.25 -4"
-      color: "#e0e014"
       radius: 1
-      wireframe: true
     children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#e0e014"
+          wireframe: true
       box2:
-        extends: http://vwf.example.com/aframe/aentity.vwf
+        extends: http://vwf.example.com/aframe/abox.vwf
         properties:
           position: "2 -0.75 0"
+          depth: 1
         children:
-          cube:
-            extends: http://vwf.example.com/aframe/abox.vwf
+          material:
+            extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
             properties:
-              src: "#bg"
               color: "#2167a5"
-              depth: 1
-            children:
-              shadow:
-                extends: http://vwf.example.com/aframe/shadowComponent.vwf
-                properties:
-                  cast: true
+              src: "#bg"
+          shadow:
+            extends: http://vwf.example.com/aframe/shadowComponent.vwf
+            properties:
+              cast: true
           interpolation:
             extends: http://vwf.example.com/aframe/interpolation-component.vwf
             properties:
@@ -178,19 +187,26 @@ children:
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:
-      src: "#sky"
-      side: "back"
-      fog: false
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          src: "#sky"
+          side: "back"
+          fog: false
   groundPlane:
     extends: http://vwf.example.com/aframe/aplane.vwf
     properties:
       height: 50
       width: 50
-      repeat: "10 10"
       rotation: "-90 0 0"
-      color: "white"
-      src: "#bg2"
     children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          repeat: "10 10"
+          color: "white"
+          src: "#bg2"
       shadow:
         extends: http://vwf.example.com/aframe/shadowComponent.vwf
         properties:

public/gearvr/index.vwf.yaml

@@ -18,10 +18,14 @@ children:
     properties:
         height: 50
         width: 50
-        repeat: "10 10"
         rotation: [-90, 0, 0]
-        wireframe: false
-        src: "#bg2"
+    children:    
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          wireframe: false
+          src: "#bg2"
+          repeat: "10 10"
   spaceText:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:
@@ -33,10 +37,14 @@ children:
     properties:
       position: "0 1 -3"
       rotation: "0 0 0"
-      color: "#3c7249"
       depth: 1
       height: 1
       width: 1
+    children:    
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"
   newSky:
     extends: http://vwf.example.com/aframe/aentity.vwf
     children:

public/multipixel/index.vwf.yaml

@@ -10,9 +10,13 @@ children:
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:
-      color: "#ECECEC"
-      side: "back"
-      fog: false
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#ECECEC"
+          side: "back"
+          fog: false
   myLightSG:
     extends: http://vwf.example.com/aframe/alight.vwf
     properties:
@@ -74,36 +78,52 @@ children:
     properties:
       position: "10 0.5 0"
       rotation: "0 -30 0"
-      color: "#3c7249"
       depth: 2
       height: 5
       width: 2
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"
   sphere:
     extends: http://vwf.example.com/aframe/asphere.vwf
     properties:
       position: "7 15 -25"
-      color: "#e0e014"
       radius: 5
-      wireframe: true
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#e0e014"
+          wireframe: true
   box2:
     extends: http://vwf.example.com/aframe/abox.vwf
     properties:
       position: "0 0 -35"
       rotation: "0 0 0"
-      color: "white"
       depth: 1
       height: 50
       width: 50
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "white"
   groundPlane:
     extends: http://vwf.example.com/aframe/aplane.vwf
     properties:
       height: 100
       width: 100
-      repeat: "10 10"
       rotation: "-90 0 0"
-      color: "white"
-      wireframe: false
-      src: "#bg2"
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "white"
+          wireframe: false
+          src: "#bg2"
+          repeat: "10 10"
   multicam:
       extends: http://vwf.example.com/aframe/abox.vwf
       properties:
@@ -112,10 +132,13 @@ children:
         depth: 0.5
         height: 0.5
         width: 0.5
-        opacity: 0.5
-        transparent: true
-        color: "green"
       children:
+        material:
+          extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+          properties:
+            opacity: 0.5
+            transparent: true
+            color: "green"
         interpolation:
           extends: http://vwf.example.com/aframe/interpolation-component.vwf
           properties:

public/ohmlang-calc/index.vwf.yaml

@@ -16,10 +16,14 @@ children:
     properties:
       height: 50
       width: 50
-      repeat: "10 10"
       rotation: [-90, 0, 0]
-      wireframe: false
-      src: "#bg2"
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          wireframe: false
+          src: "#bg2"
+          repeat: "10 10"
   calcResult:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:
@@ -131,5 +135,9 @@ children:
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:
-      color: "#ECECEC"
-      side: "back"
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#ECECEC"
+          side: "back"

public/ohmlang-lsys/index.vwf.yaml

@@ -20,17 +20,19 @@ children:
         properties:
             height: 50
             width: 50
-            repeat: "10 10"
             rotation: [-90, 0, 0]
-            wireframe: false
-            src: "#bg2"
+        children:
+            material:
+                extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+                properties:
+                    wireframe: false
+                    src: "#bg2"
+                    repeat: "10 10"
     turtle:
         extends: http://vwf.example.com/aframe/asphere.vwf
         properties:
             position: [1, 1.25, -4]
-            color: "#e0e014"
             radius: 0.2
-            wireframe: true
             angleInRadians: 0
             iteration: 3
             angle: 60  
@@ -41,6 +43,11 @@ children:
             lsys: ''
             readyForDraw: true
         children:
+            material:
+                extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+                properties:
+                    wireframe: true
+                    color: "#e0e014"
             drawNode:
                 extends: http://vwf.example.com/aframe/aentity.vwf
                 children:

public/osc-example/index.vwf.yaml

@@ -3,9 +3,16 @@
 ---
 extends: http://vwf.example.com/aframe/ascene.vwf
 properties:
-  fog: "type: linear; color: #ECECEC; far: 20; near: 0"
   assets: "assets.json"
 children:
+  fog:
+    extends: http://vwf.example.com/aframe/aSceneFogComponent.vwf
+    type: "component"
+    properties:
+      fogType: "linear"
+      fogColor: "#ECECEC"
+      far: 20
+      near: 0
   myLight:
     extends: http://vwf.example.com/aframe/alight.vwf
     properties:
@@ -18,10 +25,14 @@ children:
     properties:
         height: 50
         width: 50
-        repeat: "10 10"
         rotation: [-90, 0, 0]
-        wireframe: false
-        src: "#bg2"
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          wireframe: false
+          src: "#bg2"
+          repeat: "10 10"
   spaceText:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:
@@ -33,18 +44,25 @@ children:
     properties:
       position: "0 1 -3"
       rotation: "0 0 0"
-      color: "#3c7249"
       depth: 1
       height: 1
       width: 1
     children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"
       sphere:
         extends: http://vwf.example.com/aframe/asphere.vwf
         properties:
           position: "0 2 0"
           rotation: "0 0 0"
-          color: "#3c7249"
           radius: 0.4
+        children:
+          material:
+            extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+            properties:
+              color: "#3c7249"
   newSky:
     extends: http://vwf.example.com/aframe/aentity.vwf
     children:

public/webrtc/index.vwf.yaml

@@ -3,19 +3,29 @@
 ---
 extends: http://vwf.example.com/aframe/ascene.vwf
 properties:
-  fog: "type: linear; color: #ECECEC; far: 20; near: 0"
   assets: "assets.json"
 children:
+  fog:
+    extends: http://vwf.example.com/aframe/aSceneFogComponent.vwf
+    type: "component"
+    properties:
+      fogType: "linear"
+      fogColor: "#ECECEC"
+      far: 20
+      near: 0
   groundPlane:
     extends: http://vwf.example.com/aframe/aplane.vwf
     properties:
       height: 50
       width: 50
-      repeat: "10 10"
       rotation: "-90 0 0"
-      color: "white"
-      wireframe: false
-      src: "#bg2"
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          wireframe: false
+          src: "#bg2"
+          repeat: "10 10"
   myLight:
     extends: http://vwf.example.com/aframe/alight.vwf
     properties:
@@ -26,10 +36,14 @@ children:
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:
-      color: "#ECECEC"
-      src: "#sky"
-      fog: false
-      side: "back"
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#ECECEC"
+          src: "#sky"
+          fog: false
+          side: "back"
   spaceText:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:
@@ -41,7 +55,11 @@ children:
     properties:
       position: "0 0 -3"
       rotation: "0 0 0"
-      color: "#3c7249"
       depth: 3
       height: 0.2
-      width: 3
+      width: 3
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"

support/client/lib/vwf/model/aframe.js

@@ -95,49 +95,33 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
             this.aframeDef = {
                 'A-BOX':    [
-                    'ambient-occlusion-map', 'ambient-occlusion-map-intensity',
-                    'ambient-occlusion-texture-offset', 'ambient-occlusion-texture-repeat',
-                    'color',  'depth', 'displacement-bias', 'displacement-map',
-                    'displacement-scale', 'displacement-texture-offset',
-                    'displacement-texture-repeat', 'env-map',
-                    'fog', 'height', 'metalness',
-                    'normal-map', 'normal-scale',
-                    'normal-texture-offset', 'normal-texture-repeat',
-                    'repeat', 'roughness', 'segments-depth',
+                    'depth', 'height', 'segments-depth',
                     'segments-height', 'segments-width',
-                    'spherical-env-map', 'src', 'width',
-                    'wireframe', 'wireframe-linewidth'],
+                    'width'],
 
                 'A-SPHERE': [
-                    'ambient-occlusion-map', 'ambient-occlusion-map-intensity',
-                    'ambient-occlusion-texture-offset', 'ambient-occlusion-texture-repeat',
-                    'color', 'displacement-bias', 'displacement-map',
-                    'displacement-scale', 'displacement-texture-offset',
-                    'displacement-texture-repeat', 'env-map',
-                    'fog', 'height', 'metalness',
-                    'normal-map', 'normal-scale',
-                    'normal-texture-offset', 'normal-texture-repeat',
                     'phi-length', 'phi-start', 'radius', 
-                    'repeat', 'roughness', 'segments-depth',
+                    'segments-depth',
                     'segments-height', 'segments-width',
-                    'spherical-env-map', 'src', 
-                    'theta-length', 'theta-start',
-                    'width',  'wireframe', 'wireframe-linewidth'
+                    'theta-length', 'theta-start'
+                ],
+
+                'A-CYLINDER': [
+                   'height', 'radius',
+                    'open-ended', 'radius-bottom', 'radius-top',
+                    'segments-height', 'segments-radial',
+                    'theta-length', 'theta-start'
+                ],
+
+                'A-CONE': [
+                    'height',
+                    'open-ended', 'radius-bottom', 'radius-top',
+                    'segments-height', 'segments-radial',
+                    'theta-length', 'theta-start'
                 ],
 
                 'A-PLANE': [
-                    'ambient-occlusion-map', 'ambient-occlusion-map-intensity',
-                    'ambient-occlusion-texture-offset', 'ambient-occlusion-texture-repeat',
-                    'color', 'displacement-bias', 'displacement-map',
-                    'displacement-scale', 'displacement-texture-offset',
-                    'displacement-texture-repeat', 'env-map',
-                    'fog', 'height', 'metalness',
-                    'normal-map', 'normal-scale',
-                    'normal-texture-offset', 'normal-texture-repeat',
-                    'repeat', 'roughness',
-                    'segments-height', 'segments-width',
-                    'spherical-env-map', 'src', 'width',
-                    'wireframe', 'wireframe-linewidth'
+                    'height', 'segments-height', 'segments-width','width'
                 ],
 
                 'A-TEXT': [
@@ -154,13 +138,9 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     ],
 
                 'A-SKY': [
-                    'color', 'metalness', 'opacity',
-                    'phi-length', 'phi-start', 'radius',
-                    'repeat', 'roughness', 'segments-height',
-                    'segments-width', 'shader',
-                    'side', 'src',
+                    'phi-length', 'phi-start', 'radius','segments-height',
+                    'segments-width',
                     'theta-length', 'theta-start',
-                    'transparent'
                     ],
 
                 'A-LIGHT': [
@@ -677,6 +657,24 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     })
                 }
 
+                if (value === undefined && aframeObject.nodeName == "A-CYLINDER") {
+                    value = propertyValue;
+
+                    self.aframeDef['A-CYLINDER'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
+                            value = undefined;
+                    })
+                }
+
+                if (value === undefined && aframeObject.nodeName == "A-CONE") {
+                    value = propertyValue;
+
+                    self.aframeDef['A-CONE'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
+                            value = undefined;
+                    })
+                }
+
 
                 if (value === undefined && aframeObject.nodeName == "A-ANIMATION") {
                     value = propertyValue;
@@ -969,6 +967,24 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     })
                 }
 
+                if (value === undefined && aframeObject.nodeName == "A-CYLINDER") {
+
+                    self.aframeDef['A-CYLINDER'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
+                }
+
+                if (value === undefined && aframeObject.nodeName == "A-CONE") {
+
+                    self.aframeDef['A-CONE'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
+                }
+
                 if (value === undefined && aframeObject.nodeName == "A-TEXT") {
 
                     self.aframeDef['A-TEXT'].forEach(element => {
@@ -1179,6 +1195,10 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
             aframeObj = document.createElement('a-box');
         } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aplane.vwf")) {
             aframeObj = document.createElement('a-plane');
+        } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acylinder.vwf")) {
+            aframeObj = document.createElement('a-cylinder');
+        } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acone.vwf")) {
+            aframeObj = document.createElement('a-cone');
         } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/atext.vwf")) {
             aframeObj = document.createElement('a-text');
         } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acolladamodel.vwf")) {

support/client/lib/vwf/model/aframe/addon/aframe-interpolation.js

@@ -65,7 +65,9 @@ AFRAME.registerComponent('interpolation', {
   tick: function (t, dt) {
 
     if (!this.node) {
-      let interNode = Object.entries(this.driver.state.nodes).find(el => el[1].parentID == this.el.id);
+      let interNode = Object.entries(this.driver.state.nodes).find(el => 
+        el[1].parentID == this.el.id && el[1].extendsID == "http://vwf.example.com/aframe/interpolation-component.vwf"
+      );
       this.node = this.driver.nodes[interNode[0]];
       this.nodeState = interNode[1];
     }

support/client/lib/vwf/model/aframeComponent.js

@@ -83,6 +83,49 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
             this.state.kernel = this.kernel.kernel.kernel;
 
+            this.aframeComponentDef = {
+                'A-MATERIAL': [
+                    "alphaTest",
+                    "depthTest",
+                    "flatShading",
+                    "npot",
+                    "offset",
+                    "opacity",
+                    "remain",
+                    "repeat",
+                    "shader",
+                    "side",
+                    "transparent",
+                    "vertexColors",
+                    "visible",
+                    "ambient-occlusion-map",
+                    "ambient-occlusion-map-intensity",
+                    "ambient-occlusion-texture-offset",
+                    "ambient-occlusion-texture-repeat",
+                    "color",
+                    "displacement-bias",
+                    "displacement-map",
+                    "displacement-scale",
+                    "displacement-texture-offset",
+                    "displacement-texture-repeat",
+                    "emissive",
+                    "emissiveIntensity",
+                    "height",
+                    "envMap",
+                    "fog",
+                    "metalness",
+                    "normal-map",
+                    "normal-scale",
+                    "normal-texture-offset",
+                    "normal-texture-repeat",
+                    "roughness",
+                    "sphericalEnvMap",
+                    "width",
+                    "wireframe",
+                    "wireframe-linewidth",
+                    "src"]
+            }
+
             //this.state.kernel = this.kernel.kernel.kernel;
 
         },
@@ -239,28 +282,28 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                         // })
 
                         switch (propertyName) {
-                    
+
                             case "fullWidth":
-                            parentNodeAF.setAttribute('viewoffset', 'fullWidth', propertyValue);
-                            break;
+                                parentNodeAF.setAttribute('viewoffset', 'fullWidth', propertyValue);
+                                break;
 
                             case "fullHeight":
-                            parentNodeAF.setAttribute('viewoffset', 'fullHeight', propertyValue);
-                            break;
+                                parentNodeAF.setAttribute('viewoffset', 'fullHeight', propertyValue);
+                                break;
 
                             case "yoffset":
-                            parentNodeAF.setAttribute('viewoffset', 'yoffset', propertyValue);
-                            break;
+                                parentNodeAF.setAttribute('viewoffset', 'yoffset', propertyValue);
+                                break;
 
                             case "xoffset":
-                            parentNodeAF.setAttribute('viewoffset', 'xoffset', propertyValue);
-                            break;
+                                parentNodeAF.setAttribute('viewoffset', 'xoffset', propertyValue);
+                                break;
+
 
-                            
                             case "subcamWidth":
                                 parentNodeAF.setAttribute('viewoffset', 'width', propertyValue);
                                 break;
-    
+
                             case "subcamHeight":
                                 parentNodeAF.setAttribute('viewoffset', 'height', propertyValue);
                                 break;
@@ -286,7 +329,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             case "cast":
                                 parentNodeAF.setAttribute('shadow', 'cast', propertyValue);
                                 break;
-    
+
                             case "receive":
                                 parentNodeAF.setAttribute('shadow', 'receive', propertyValue);
                                 break;
@@ -306,9 +349,9 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                         value = propertyValue;
                         let parentNodeAF = aframeObject.el;
-                        let defs = ['color', 'transparent', 'opacity', 'side'];
+                        //let defs = ['color', 'transparent', 'opacity', 'side'];
 
-                        defs.forEach(element => {
+                        self.aframeComponentDef['A-MATERIAL'].forEach(element => {
                             element == propertyName ? parentNodeAF.setAttribute('material', element, propertyValue) :
                                 value = undefined;
                         })
@@ -317,31 +360,31 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                 if (value === undefined && isAFogDefinition(node.prototypes)) {
                     if (aframeObject.el.getAttribute(aframeObject.compName)) {
-                    
+
                         value = propertyValue;
                         let parentNodeAF = aframeObject.el;
                         let defs = ['fogType', 'fogColor', 'density', 'near', 'far'];
 
                         defs.forEach(element => {
-                            if (element == propertyName){
+                            if (element == propertyName) {
 
                                 switch (element) {
-                    
+
                                     case 'fogType':
-                                    parentNodeAF.setAttribute('fog', 'type', propertyValue);
+                                        parentNodeAF.setAttribute('fog', 'type', propertyValue);
                                         break;
 
                                     case 'fogColor':
                                         parentNodeAF.setAttribute('fog', 'color', propertyValue);
-                                            break;
+                                        break;
 
                                     default:
-                                            value = parentNodeAF.setAttribute('fog', element, propertyValue);
-                                            break;
+                                        value = parentNodeAF.setAttribute('fog', element, propertyValue);
+                                        break;
                                 }
 
 
-                                
+
                             } else {
                                 value = undefined
                             }
@@ -365,37 +408,38 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
-                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
-                    
-                                        value = propertyValue;
-                    
-                    
-                                        let parentNodeAF = aframeObject.el;
-                    
-                                        switch (propertyName) {
-                    
-                                            case "color":
-                                                parentNodeAF.setAttribute(aframeObject.compName, 'color', propertyValue);
-                                                break;
-                    
-                                            case "path":
-                                                parentNodeAF.setAttribute(aframeObject.compName, 'path', propertyValue);
-                                                break;
-                    
-                                                case "width":
-                                                parentNodeAF.setAttribute(aframeObject.compName, 'width', propertyValue);
-                                                break;
-
-                                            default:
-                                                value = undefined;
-                                                break;
-                    
-                    
-                                        }
-                    
-                                    }
+                if (value === undefined && isALinePathDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
+
+                        value = propertyValue;
 
 
+                        let parentNodeAF = aframeObject.el;
+
+                        switch (propertyName) {
+
+                            case "color":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'color', propertyValue);
+                                break;
+
+                            case "path":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'path', propertyValue);
+                                break;
+
+                            case "width":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'width', propertyValue);
+                                break;
+
+                            default:
+                                value = undefined;
+                                break;
+
+
+                        }
+
+                    }
+                }
+
                 //isALineDefinition(node.prototypes)
                 //if (value === undefined && node.componentName == 'line') { //isALineDefinition( node.prototypes )
                 if (node.extendsID == "http://vwf.example.com/aframe/lineComponent.vwf") {
@@ -442,152 +486,105 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
-                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
+                if (value === undefined && isAAnimMixerDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
+                        value = propertyValue;
 
-                    value = propertyValue;
 
+                        let parentNodeAF = aframeObject.el;
 
-                    let parentNodeAF = aframeObject.el;
+                        switch (propertyName) {
 
-                    switch (propertyName) {
+                            case "clip":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'clip', propertyValue);
+                                break;
 
-                        case "clip":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'clip', propertyValue);
-                            break;
+                            case "duration":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'duration', propertyValue);
+                                break;
 
-                        case "duration":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'duration', propertyValue);
-                            break;
+                            case "crossFadeDuration":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'crossFadeDuration', propertyValue);
+                                break;
 
-                        case "crossFadeDuration":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'crossFadeDuration', propertyValue);
-                            break;
+                            case "loop":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'loop', propertyValue);
+                                break;
 
-                        case "loop":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'loop', propertyValue);
-                            break;
+                            case "repetitions":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'repetitions', propertyValue);
+                                break;
 
-                        case "repetitions":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'repetitions', propertyValue);
-                            break;
+                            default:
+                                value = undefined;
+                                break;
 
-                        default:
-                            value = undefined;
-                            break;
 
+                        }
 
                     }
-
                 }
 
+                if (value === undefined && isAInterpolationDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
 
-                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
+                        value = propertyValue;
 
-                    value = propertyValue;
 
+                        let parentNodeAF = aframeObject.el;
 
-                    let parentNodeAF = aframeObject.el;
+                        switch (propertyName) {
 
-                    switch (propertyName) {
+                            case "enabled":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'enabled', propertyValue);
+                                break;
 
-                        case "enabled":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'enabled', propertyValue);
-                            break;
+                            case "deltaPos":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'deltaPos', propertyValue);
+                                break;
 
-                        case "deltaPos":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'deltaPos', propertyValue);
-                            break;
+                            case "deltaRot":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'deltaRot', propertyValue);
+                                break;
 
-                        case "deltaRot":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'deltaRot', propertyValue);
-                            break;
+                            default:
+                                value = undefined;
+                                break;
 
-                        default:
-                            value = undefined;
-                            break;
 
+                        }
 
                     }
-
                 }
 
-                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
-                    
-                                        value = propertyValue;
-                    
-                    
-                                        let parentNodeAF = aframeObject.el;
-                    
-                                        switch (propertyName) {
-                    
-                                            case "mode":
-                                                parentNodeAF.setAttribute(aframeObject.compName, 'mode', propertyValue);
-                                                break;
-                    
-                                            default:
-                                                value = undefined;
-                                                break;
-                    
-                    
-                                        }
-                    
-                                    }
-
-                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
-
-                    value = propertyValue;
-
-                    //let parentNodeAF = self.state.kernel.find(node.parentID);
-
-                    // aframeObject.el.setAttribute('line', 'color')
-                    let parentNodeAF = aframeObject.el;
-
-                    switch (propertyName) {
-
-                        case "armModel":
-
-                            parentNodeAF.setAttribute(aframeObject.compName, { armModel: propertyValue });
-                            break;
-
-                        case "buttonColor":
-
-                            parentNodeAF.setAttribute(aframeObject.compName, { buttonColor: propertyValue });
-                            break;
-
-                        case "buttonTouchedColor":
+                if (value === undefined && isAGizmoDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
 
-                            parentNodeAF.setAttribute(aframeObject.compName, 'buttonTouchedColor', propertyValue);
-                            break;
+                        value = propertyValue;
 
-                        case "buttonHighlightColor":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'buttonHighlightColor', propertyValue);
-                            break;
 
-                        case "hand":
+                        let parentNodeAF = aframeObject.el;
 
-                            parentNodeAF.setAttribute(aframeObject.compName, 'hand', propertyValue);
-                            break;
+                        switch (propertyName) {
 
-                        case "model":
+                            case "mode":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'mode', propertyValue);
+                                break;
 
-                            parentNodeAF.setAttribute(aframeObject.compName, 'model', propertyValue);
-                            break;
+                            default:
+                                value = undefined;
+                                break;
 
-                        case "rotationOffset":
 
-                            parentNodeAF.setAttribute(aframeObject.compName, 'rotationOffset', propertyValue);
-                            break;
+                        }
 
-                        default:
-                            value = undefined;
-                            break;
                     }
-
                 }
 
 
 
 
+
             }
 
             return value;
@@ -637,7 +634,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     })
                 }
 
-                
+
                 if (value === undefined && isAFogDefinition(node.prototypes)) {
                     value = propertyValue;
 
@@ -651,17 +648,17 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             switch (element) {
 
                                 case 'fogType':
-        
+
                                     value = parentNodeAF.getAttribute('fog').type;
                                     break;
-                                
+
                                 case 'fogColor':
-        
+
                                     value = parentNodeAF.getAttribute('fog').color;
                                     break;
-                                
+
                                 default:
-                                    value = parentNodeAF.getAttribute('fog').element; 
+                                    value = parentNodeAF.getAttribute('fog').element;
                                     break;
 
                             }
@@ -762,26 +759,33 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     // let parentNodeAF = self.state.nodes[node.parentID].aframeObj;
                     let parentNodeAF = aframeObject.el;
 
-                    switch (propertyName) {
+                    self.aframeComponentDef['A-MATERIAL'].forEach(element => {
+                        if (element == propertyName) {
+                            value = parentNodeAF.getAttribute('material').element;
+                        }
 
-                        case "color":
-                            value = parentNodeAF.getAttribute('material').color;
-                            break;
+                    })
 
-                        case "opacity":
-                            value = parentNodeAF.getAttribute('material').opacity;
-                            break;
+                    // switch (propertyName) {
 
-                        case "side":
-                            value = parentNodeAF.getAttribute('material').side;
-                            break;
+                    //     case "color":
+                    //         value = parentNodeAF.getAttribute('material').color;
+                    //         break;
 
-                        case "transparent":
-                            value = parentNodeAF.getAttribute('material').transparent;
-                            break;
-                        
+                    //     case "opacity":
+                    //         value = parentNodeAF.getAttribute('material').opacity;
+                    //         break;
+
+                    //     case "side":
+                    //         value = parentNodeAF.getAttribute('material').side;
+                    //         break;
+
+                    //     case "transparent":
+                    //         value = parentNodeAF.getAttribute('material').transparent;
+                    //         break;
 
-                    }
+
+                    // }
 
                 }
 
@@ -801,10 +805,10 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             value = parentNodeAF.getAttribute(aframeObject.compName).path;
                             break;
 
-                            case "width":
+                        case "width":
                             value = parentNodeAF.getAttribute(aframeObject.compName).width;
                             break;
-                        
+
 
                     }
 
@@ -837,7 +841,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                         case "xoffset":
                             value = parentNodeAF.getAttribute(aframeObject.compName).xoffset;
                             break;
-                        
+
                         case "yoffset":
                             value = parentNodeAF.getAttribute(aframeObject.compName).yoffset;
                             break;
@@ -845,7 +849,6 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                 }
 
-
                 if (value === undefined && isAInterpolationDefinition(node.prototypes)) {
                     value = propertyValue;
 
@@ -882,7 +885,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             value = parentNodeAF.getAttribute(aframeObject.compName).mode;
                             break;
 
-                       
+
 
                     }
 
@@ -1054,7 +1057,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         var sceneEl = document.querySelector('a-scene');
 
         aframeObj.id = node.parentID;
-       // aframeObj.el = sceneEl.children[node.parentID];
+        // aframeObj.el = sceneEl.children[node.parentID];
         aframeObj.el = Array.from(sceneEl.querySelectorAll('*')).filter(item => { return item.id == aframeObj.id })[0];
 
 
@@ -1073,13 +1076,13 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/gizmoComponent.vwf")) {
-            
-            
-                        // aframeObj.el.setAttribute(node.type, {});
-                        aframeObj.compName = "gizmo";
-                        aframeObj.el.setAttribute(aframeObj.compName, {});
-            
-                    }
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "gizmo";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/aSceneFogComponent.vwf")) {
 
@@ -1087,7 +1090,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
             aframeObj = {};
             //var sceneEl = document.querySelector('a-scene');
-    
+
             aframeObj.id = node.parentID;
             aframeObj.el = document.querySelector('a-scene');
 
@@ -1105,10 +1108,10 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
         }
 
-        
+
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/shadowComponent.vwf")) {
-            
+
             // aframeObj.el.setAttribute(node.type, {});
             aframeObj.compName = "shadow";
             aframeObj.el.setAttribute(aframeObj.compName, {});
@@ -1116,7 +1119,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/viewOffsetCamera-component.vwf")) {
-            
+
             // aframeObj.el.setAttribute(node.type, {});
             aframeObj.compName = "viewoffset";
             aframeObj.el.setAttribute(aframeObj.compName, {});
@@ -1124,8 +1127,8 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/streamSoundComponent.vwf")) {
-            
-            
+
+
             // aframeObj.el.setAttribute(node.type, {});
             aframeObj.compName = "streamsound";
             aframeObj.el.setAttribute(aframeObj.compName, {});
@@ -1133,13 +1136,13 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/linepath.vwf")) {
-            
-            
-                        // aframeObj.el.setAttribute(node.type, {});
-                        aframeObj.compName = "linepath";
-                        aframeObj.el.setAttribute(aframeObj.compName, {});
-            
-                    }
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "linepath";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/aMaterialComponent.vwf")) {
 
@@ -1187,23 +1190,23 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-sun-component.vwf")) {
-            
- 
-                // aframeObj.el.setAttribute(node.type, {});
-             aframeObj.compName = "sun";
-             aframeObj.el.setAttribute('id', "sun");
-             aframeObj.el.setAttribute(aframeObj.compName, {});
- 
-         }
-
-         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-skyshader-component.vwf")) {
-            
- 
-                // aframeObj.el.setAttribute(node.type, {});
-             aframeObj.compName = "skyshader";
-             aframeObj.el.setAttribute(aframeObj.compName, {});
- 
-         }
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "sun";
+            aframeObj.el.setAttribute('id', "sun");
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-skyshader-component.vwf")) {
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "skyshader";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-raycaster-listener-component.vwf")) {
 

support/client/lib/vwf/view/aframe.js

@@ -183,12 +183,20 @@ define(["module", "vwf/view"], function (module, view) {
                 //console.log("sat new item");
                 let elID = '#' + node.aframeObj.getAttribute('id');
                 Object.entries(this.state.nodes).forEach(el => {
-                    let src = el[1].aframeObj.getAttribute('src');
-                    if (src){
+                    let material = el[1].aframeObj.getAttribute('material');
+                    if(material) {
+                   
+                    if (material.src !== ""){
                        // console.log("my: " + src);
-                        if (src == elID)
-                        self.kernel.callMethod(el[0], "updateSrc", [elID])
+                        let src = '#' + material.src.id;
+                        if (src == elID){
+                            let materialID = vwf.find(el[0], 'material');
+                            self.kernel.callMethod(materialID, "updateSrc", [elID])
+                        }
+                        
                     }
+                }
+
                 })
 
             }

support/client/lib/vwf/view/aframeComponent.js

@@ -103,7 +103,13 @@ define(["module", "vwf/view"], function (module, view) {
                             return;
                         }
 
-                    
+                        if (node.name == "material" && propertyName == 'repeat') {
+
+                           let srcID = node.aframeObj.el.getAttribute('material').src.id;
+                           let elID = '#'+ srcID;
+                           if(srcID) self.kernel.callMethod(nodeId, "updateSrc", [elID])
+
+                        }
             // if (node.name == "material" && propertyName == 'color') {
     
             //     console.log("sat color on material");

support/proxy/vwf.example.com/aframe/aMaterialComponent.js

@@ -0,0 +1,8 @@
+this.updateSrc = function(srcID){
+
+    if (srcID) {
+        this.src = "";
+        this.src = srcID;
+    }
+    
+}

support/proxy/vwf.example.com/aframe/aMaterialComponent.vwf.yaml

@@ -3,7 +3,48 @@
 extends: http://vwf.example.com/aframe/aentityComponent.vwf
 type: "component"
 properties:
+  alphaTest:
+  depthTest:
+  flatShading:
+  npot:
+  offset:
   opacity:
+  remain:
+  repeat:
+  shader:
+  side:
   transparent:
+  vertexColors:
+  visible:
+  ambient-occlusion-map:
+  ambient-occlusion-map-intensity:
+  ambient-occlusion-texture-offset:
+  ambient-occlusion-texture-repeat:
   color:
-  side:
+  displacement-bias:
+  displacement-map:
+  displacement-scale:
+  displacement-texture-offset:
+  displacement-texture-repeat:
+  emissive:
+  emissiveIntensity:
+  height:
+  envMap:
+  fog:
+  metalness:
+  normal-map:
+  normal-scale:
+  normal-texture-offset:
+  normal-texture-repeat:
+  roughness:
+  sphericalEnvMap:
+  width:
+  wireframe:
+  wireframe-linewidth:
+  src:
+methods:
+  updateSrc:
+    parameters:
+      - srcID
+scripts:
+  - source: "http://vwf.example.com/aframe/aMaterialComponent.js"

support/proxy/vwf.example.com/aframe/abox.vwf.yaml

@@ -3,32 +3,9 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-box"
 properties:
-  ambient-occlusion-map:
-  ambient-occlusion-map-intensity:
-  ambient-occlusion-texture-offset:
-  ambient-occlusion-texture-repeat:
-  color:
   depth:
-  displacement-bias:
-  displacement-map:
-  displacement-scale:
-  displacement-texture-offset:
-  displacement-texture-repeat:
-  env-map:
-  fog:
   height:
-  metalness:
-  normal-map:
-  normal-scale:
-  normal-texture-offset:
-  normal-texture-repeat:
-  repeat: 
-  roughness:
   segments-depth:
   segments-height:
   segments-width:
-  spherical-env-map:
-  src:
-  width:
-  wireframe:
-  wireframe-linewidth:
+  width:

support/proxy/vwf.example.com/aframe/acone.vwf.yaml

@@ -0,0 +1,13 @@
+# https://aframe.io/docs/0.5.0/primitives/a-sphere.html
+--- 
+extends: http://vwf.example.com/aframe/aentity.vwf
+type: "a-cone"
+properties:
+  height:
+  open-ended:
+  radius-bottom:
+  radius-top:
+  segments-height:
+  segments-radial: 
+  theta-length:
+  theta-start:

support/proxy/vwf.example.com/aframe/acylinder.vwf.yaml

@@ -0,0 +1,14 @@
+# https://aframe.io/docs/0.5.0/primitives/a-sphere.html
+--- 
+extends: http://vwf.example.com/aframe/aentity.vwf
+type: "a-cylinder"
+properties:
+  height:
+  radius:
+  open-ended:
+  radius-bottom:
+  radius-top:
+  segments-height:
+  segments-radial:
+  theta-length:
+  theta-start:

support/proxy/vwf.example.com/aframe/aimage.vwf.yaml

@@ -0,0 +1,17 @@
+--- 
+extends: http://vwf.example.com/aframe/node.vwf
+type: "a-image"
+properties:
+  color:
+  height:
+  metalness:
+  opacity:
+  repeat:
+  roughness:
+  segments-height:
+  segments-width:
+  shader:
+  side:
+  src:
+  transparent:
+  width:

support/proxy/vwf.example.com/aframe/aplane.vwf.yaml

@@ -3,30 +3,7 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-plane"
 properties:
-  ambient-occlusion-map:
-  ambient-occlusion-map-intensity:
-  ambient-occlusion-texture-offset:
-  ambient-occlusion-texture-repeat:
-  color:
-  displacement-bias:
-  displacement-map:
-  displacement-scale:
-  displacement-texture-offset:
-  displacement-texture-repeat:
-  env-map:
-  fog:
   height:
-  metalness:
-  normal-map:
-  normal-scale:
-  normal-texture-offset:
-  normal-texture-repeat:
-  repeat: 
-  roughness:
   segments-height:
   segments-width:
-  spherical-env-map:
-  src:
-  width:
-  wireframe:
-  wireframe-linewidth:
+  width:

support/proxy/vwf.example.com/aframe/ascene.js

@@ -57,14 +57,99 @@ this.sphereProto = function () {
         "extends": "http://vwf.example.com/aframe/asphere.vwf",
         "properties": {
             "displayName": "sphere",
-            "color": "white",
             "radius": 1,
             "clickable": true
         },
         children: {
             "material": {
                 "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                "type": "component",
+                "properties":{
+                    "color": "white"
+                }
+            },
+            "interpolation":
+                {
+                    "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
+                    "type": "component",
+                    "properties": {
+                        "enabled": true
+                    }
+                },
+            "cursor-listener": {
+                "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
                 "type": "component"
+            }
+        },
+        events: {
+            "clickEvent": {
+                "body": ""
+            }
+        }
+    }
+
+    return node
+}
+
+this.cylinderProto = function () {
+
+    let node = {
+        "extends": "http://vwf.example.com/aframe/acylinder.vwf",
+        "properties": {
+            "displayName": "cylinder",
+            "radius": 1,
+            "height": 1,
+            "clickable": true
+        },
+        children: {
+            "material": {
+                "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                "type": "component",
+                "properties":{
+                    "color": "white"
+                }
+            },
+            "interpolation":
+                {
+                    "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
+                    "type": "component",
+                    "properties": {
+                        "enabled": true
+                    }
+                },
+            "cursor-listener": {
+                "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
+                "type": "component"
+            }
+        },
+        events: {
+            "clickEvent": {
+                "body": ""
+            }
+        }
+    }
+
+    return node
+}
+
+this.coneProto = function () {
+
+    let node = {
+        "extends": "http://vwf.example.com/aframe/acone.vwf",
+        "properties": {
+            "displayName": "cone",
+            "radius-bottom": 1,
+            "radius-top": 0.01,
+            "height": 1,
+            "clickable": true
+        },
+        children: {
+            "material": {
+                "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                "type": "component",
+                "properties":{
+                    "color": "white"
+                }
             },
             "interpolation":
                 {
@@ -101,10 +186,6 @@ this.textProto = function () {
             "clickable": true
         },
         children: {
-            "material": {
-                "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
-                "type": "component"
-            },
             "interpolation":
                 {
                     "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
@@ -134,7 +215,6 @@ this.cubeProto = function () {
         "extends": "http://vwf.example.com/aframe/abox.vwf",
         "properties": {
             "displayName": "cube",
-            "color": "white",
             "height": 1,
             "width": 1,
             "depth": 1,
@@ -155,7 +235,10 @@ this.cubeProto = function () {
             },
             "material": {
                 "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
-                "type": "component"
+                "type": "component",
+                "properties":{
+                    "color": "white"
+                }
             }
         },
         events: {
@@ -213,7 +296,6 @@ this.planeProto = function () {
         "extends": "http://vwf.example.com/aframe/aplane.vwf",
         "properties": {
             "displayName": "plane",
-            "color": "white",
             "height": 1,
             "width": 1,
             "clickable": true
@@ -223,7 +305,8 @@ this.planeProto = function () {
                 "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
                 "type": "component",
                 "properties": {
-                    "side": "double"
+                    "side": "double",
+                    "color": "white"
                 }
             },
             "interpolation":
@@ -291,6 +374,14 @@ this.createPrimitive = function (type, avatar, params, name, node) {
             newNode = this.textProto(params);
             break;
 
+        case "cylinder":
+            newNode = this.cylinderProto();
+            break;
+        
+        case "cone":
+            newNode = this.coneProto();
+            break;
+
         default:
             newNode = undefined;
             break;

support/proxy/vwf.example.com/aframe/ascene.vwf.yaml

@@ -19,6 +19,8 @@ methods:
   planeProto:
   cubeProto:
   sphereProto:
+  cylinderProto:
+  coneProto:
   textProto:
   lightProto:
      parameters:

support/proxy/vwf.example.com/aframe/asky.vwf.yaml

@@ -3,19 +3,10 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-sky"
 properties:
-  color:
-  metalness:
-  opacity:
   phi-length:
   phi-start:
   radius:
-  repeat:
-  roughness:
   segments-height:
   segments-width:
-  shader:
-  side:
-  src:
   theta-length:
-  theta-start:
-  transparent:
+  theta-start:

support/proxy/vwf.example.com/aframe/asphere.vwf.yaml

@@ -3,36 +3,11 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-sphere"
 properties:
-  ambient-occlusion-map:
-  ambient-occlusion-map-intensity:
-  ambient-occlusion-texture-offset:
-  ambient-occlusion-texture-repeat:
-  color:
-  displacement-bias:
-  displacement-map:
-  displacement-scale:
-  displacement-texture-offset:
-  displacement-texture-repeat:
-  env-map:
-  fog:
-  height:
-  metalness:
-  normal-map:
-  normal-scale:
-  normal-texture-offset:
-  normal-texture-repeat:
   phi-length:
   phi-start:
   radius: 
-  repeat:
-  roughness:
   segments-depth:
   segments-height:
   segments-width:
-  spherical-env-map:
-  src: 
   theta-length:
-  theta-start:
-  width:
-  wireframe:
-  wireframe-linewidth:
+  theta-start:

support/proxy/vwf.example.com/aframe/avatar.js

@@ -1,11 +1,19 @@
 this.simpleBodyDef = {
     "extends": "http://vwf.example.com/aframe/abox.vwf",
     "properties": {
-        "color": "white",
         "position": "0 0.66 0.7",
         "height": 1.3,
         "width": 0.65,
         "depth": 0.1,
+    },
+    "children": {
+        "material": {
+            "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+            "type": "component",
+            "properties":{
+                "color": "white"
+            }
+        }
     }
 }
 
@@ -46,7 +54,7 @@ this.createAvatarBody = function (modelSrc) {
     let myBodyDef = this.simpleBodyDef;
     //let myHandDef = this.simpleVrControllerDef;
 
-    myBodyDef.properties.color = myColor;
+    myBodyDef.children.material.properties.color = myColor;
 
     var newNode = {
         "extends": "http://vwf.example.com/aframe/aentity.vwf",
@@ -75,11 +83,19 @@ this.createAvatarBody = function (modelSrc) {
                     "visual": {
                         "extends": "http://vwf.example.com/aframe/abox.vwf",
                         "properties": {
-                            "color": myColor,
                             "height": 0.5,
                             "width": 0.5,
                             "depth": 0.1,
                             "visible": true
+                        },
+                        "children": {
+                            "material": {
+                                "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                                "type": "component",
+                                "properties":{
+                                    "color": myColor
+                                }
+                            }
                         }
                     },
                     
@@ -103,13 +119,22 @@ this.createAvatarBody = function (modelSrc) {
                             "vis": {
                                 "extends": "http://vwf.example.com/aframe/abox.vwf",
                                 "properties": {
-                                    "color": myColor,
                                     "position": "0 0 -3",
                                     "height": 0.05,
                                     "width": 0.05,
                                     "depth": 0.01,
                                     "visible": true
+                                },
+                                "children": {
+                                    "material": {
+                                        "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                                        "type": "component",
+                                        "properties":{
+                                            "color": myColor
+                                        }
+                                    }
                                 }
+                                
                             },
                             "line": {
                                 "extends": "http://vwf.example.com/aframe/lineComponent.vwf",
@@ -268,10 +293,10 @@ this.createSimpleAvatar = function(){
         this.avatarNode.children.delete(this.avatarNode.myBody);
         var myColor = this.getRandomColor();
         if (this.avatarNode.myHead){
-            myColor = this.avatarNode.myHead.visual.properties.color;
+            myColor = this.avatarNode.myHead.visual.material.color;
         }
         let myBodyDef = this.simpleBodyDef;
-        myBodyDef.properties.color = myColor;
+        myBodyDef.material.color = myColor;
 
         this.avatarNode.children.create("myBody", myBodyDef);
         this.avatarNode.myHead.visual.properties.visible = true;
@@ -319,15 +344,15 @@ this.setSmallVideoHead = function(val){
 this.setVideoTexture = function(val){
     console.log(val);
    // this.setSmallVideoHead();
-    this.avatarNode.myHead.visual.color = "white";
-    this.avatarNode.myHead.visual.src = '#temp';
-    this.avatarNode.myHead.visual.src = '#'+val;
+    this.avatarNode.myHead.visual.material.color = "white";
+    this.avatarNode.myHead.visual.material.src = '#temp';
+    this.avatarNode.myHead.visual.material.src = '#'+val;
 }
 
 this.removeVideoTexture = function(){
    // this.setSmallVideoHead();
-    this.avatarNode.myHead.visual.color = this.avatarNode.myBody.color;
-    this.avatarNode.myHead.visual.src = "";
+    this.avatarNode.myHead.visual.material.color = this.avatarNode.myBody.material.color;
+    this.avatarNode.myHead.visual.material.src = "";
     // this.avatarNode.myHead.visual.src = '#'+val;
 }