Allow undefined plane material #2

EddyVerbruggen · Oct 10, 2017 · ed52549 · ed52549
1 parent 62576e2
commit ed52549
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 14 deletions.
diff --git a/demo/app/main-page.ts b/demo/app/main-page.ts
@@ -115,7 +115,7 @@ export function planeTapped(args: ARPlaneTappedEventData): void {
       "Assets.scnassets/Materials/tnsgranite/tnsgranite-diffuse.png",
       {
         name: "Assets.scnassets/Materials/tnsgranite2/tnsgranite2-diffuse.png",
-        transparency: 0.8 // 0 - 1, lower number is more transparent
+        transparency: 0.9 // 0 - 1, lower number is more transparent
       }
     ],
     mass: 0.0000001,

diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml
@@ -4,7 +4,7 @@
     <AR:AR
         row="1"
         debugLevel="FEATURE_POINTS"
-        planeMaterial="Assets.scnassets/Materials/tron/tron-diffuse.png"
+        planeMaterial="{{ planeMaterial }}"
         planeOpacity="0.25"
         detectPlanes="true"
         showStatistics="true"

diff --git a/demo/app/main-view-model.ts b/demo/app/main-view-model.ts
@@ -1,9 +1,18 @@
 import { Observable } from 'tns-core-modules/data/observable';
-import { AR } from 'nativescript-ar';
+import { AR, ARMaterial } from 'nativescript-ar';
+import { Color } from "tns-core-modules/color";
 
 export class HelloWorldModel extends Observable {
   public message: string;
 
+  // All these are valid plane materials:
+  // public planeMaterial = "Assets.scnassets/Materials/tron/tron-diffuse.png";
+  // public planeMaterial = new Color("red");
+  public planeMaterial = <ARMaterial>{
+    diffuse: new Color("white"),
+    transparency: 0.2
+  };
+
   constructor() {
     super();
 

diff --git a/docs/ar-angular.md b/docs/ar-angular.md
@@ -21,9 +21,10 @@ Open a view that's in the same module (or you've added it to the global app modu
   <Label row="0" text="Scan a surface.." class="p-20" horizontalAlignment="center"></Label>
   <AR
     row="1"
+    debugLevel="FEATURE_POINTS"
     detectPlanes="true"
     showStatistics="true"
-    [planeOpacity]="thePlaneOpacity"
+    [planeMaterial]="planeMaterial"
     (planeTapped)="planeTapped($event)">
     <!-- you can add layouts here if you like to overlay the AR view -->
   </AR>
@@ -34,10 +35,17 @@ Open its component and, for instance, add:
 
 ```typescript
 // add to imports
-import { AR, ARPlaneTappedEventData } from "nativescript-ar";
+import { AR, ARMaterial,ARPlaneTappedEventData } from "nativescript-ar";
+import { Color } from "tns-core-modules/color";
 
 export class MyComponent {
-  thePlaneOpacity: number = 0.2;
+  // All these are valid plane materials:
+  // public planeMaterial = "Assets.scnassets/Materials/tron/tron-diffuse.png";
+  // public planeMaterial = new Color("red");
+  public planeMaterial = <ARMaterial>{
+    diffuse: new Color("white"),
+    transparency: 0.2
+  };
 
   constructor() {
     console.log("AR supported? " + AR.isSupported());

diff --git a/docs/tag-properties.md b/docs/tag-properties.md
@@ -14,7 +14,7 @@ But to help add behavior to the AR experience, here are the properties and event
 |`debugLevel`|`NONE`|One of the options in the `ARDebugLevel` enum: `NONE`, `WORLD_ORIGIN`, `FEATURE_POINTS`, `PHYSICS_SHAPES`.
 |`detectPlanes`|`false`|You can have the plugin detecting planes right away by setting this to `true`.
 |`showStatistics`|`false`|Draw a few statistics at the bottom.
-|`planeMaterial`|-|A texture for the planes. For instance, the demo uses ['tron'](https://github.com/EddyVerbruggen/nativescript-ar/tree/master/demo/app/App_Resources/iOS/Assets.scnassets/Materials/tron). 
+|`planeMaterial`|-|A `string` referencing a texture for the planes. For instance, the demo uses ['tron'](https://github.com/EddyVerbruggen/nativescript-ar/tree/master/demo/app/App_Resources/iOS/Assets.scnassets/Materials/tron). Can also be a `Color` or `ARMaterial` instance. You won't see the planes if not set.  
 |`planeOpacity`|`0.1`|Determines how transparent the planes are, where 0 is invisible, and 1 is 'solid'.
 
 ## Events

diff --git a/src/nodes/ios/armaterialfactory.d.ts b/src/nodes/ios/armaterialfactory.d.ts
@@ -1,7 +1,7 @@
 import { ARMaterial } from "../../ar-common";
 import { Color } from "tns-core-modules/color";
 export declare class ARMaterialFactory {
-    static getMaterial(material: string | Color | ARMaterial): SCNMaterial;
+    static getMaterial(material?: string | Color | ARMaterial): SCNMaterial | null;
     private static applyMaterialByColor(mat, material);
     private static applyMaterialByString(mat, material);
     private static applyMaterialByARMaterial(mat, material);

diff --git a/src/nodes/ios/armaterialfactory.ts b/src/nodes/ios/armaterialfactory.ts
@@ -3,7 +3,11 @@ import { Color } from "tns-core-modules/color";
 
 export class ARMaterialFactory {
 
-  static getMaterial(material: string | Color | ARMaterial): SCNMaterial {
+  static getMaterial(material?: string | Color | ARMaterial): SCNMaterial | null {
+    if (!material) {
+      return null;
+    }
+
     const mat = SCNMaterial.new(); // I'm sure these can be cached
     mat.lightingModelName = SCNLightingModelPhysicallyBased;
     if (typeof material === "string") {
@@ -49,6 +53,7 @@ export class ARMaterialFactory {
     }
 
     if (typeof materialProperty === "string") {
+      console.log(">>> UIImage.imageNamed(materialProperty): " + UIImage.imageNamed(materialProperty));
       scnMaterialProperty.contents = UIImage.imageNamed(materialProperty);
       scnMaterialProperty.wrapS = SCNWrapMode.Repeat;
       scnMaterialProperty.wrapT = SCNWrapMode.Repeat;

diff --git a/src/nodes/ios/arplane.d.ts b/src/nodes/ios/arplane.d.ts
@@ -6,7 +6,7 @@ export declare class ARPlane implements IARPlane {
     position: ARPosition;
     ios: SCNNode;
     static create(anchor: ARAnchor, opacity: number, material: SCNMaterial): ARPlane;
-    setMaterial(material: SCNMaterial, opacity: number): void;
+    setMaterial(material: SCNMaterial | null, opacity: number): void;
     update(anchor: any): void;
     remove(): void;
     private static setTextureScale(planeGeometry);

diff --git a/src/nodes/ios/arplane.ts b/src/nodes/ios/arplane.ts
@@ -41,7 +41,7 @@ export class ARPlane implements IARPlane {
     return instance;
   }
 
-  setMaterial(material: SCNMaterial, opacity: number): void {
+  setMaterial(material: SCNMaterial | null, opacity: number): void {
     const transparentMaterial = SCNMaterial.new();
     transparentMaterial.diffuse.contents = UIColor.colorWithWhiteAlpha(1.0, 0.0);
 
@@ -50,7 +50,7 @@ export class ARPlane implements IARPlane {
     materialArray.addObject(transparentMaterial);
     materialArray.addObject(transparentMaterial);
     materialArray.addObject(transparentMaterial);
-    if (opacity === 0) {
+    if (opacity === 0 || material === null) {
       materialArray.addObject(transparentMaterial);
     } else {
       material.transparency = opacity;

diff --git a/src/package.json b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nativescript-ar",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "NativeScript Augmented Reality plugin. ARKit on iOS and (in the future) ARCore on Android.",
   "main": "ar",
   "typings": "index.d.ts",
@@ -13,7 +13,7 @@
   "scripts": {
     "tsc": "tsc -skipLibCheck",
     "build": "npm i && npm run tsc",
-    "postclone": "npm i && node scripts/postclone.js && cd ../demo && npm i && cd ../src && npm run plugin.link",
+    "postclone": "npm i && cd ../demo && npm i && cd ../src && npm run plugin.link",
     "test.android": "npm i && npm run tsc && npm run tslint && cd ../demo && tns build android && tns test android --justlaunch",
     "test.ios": "npm i && npm run tsc && npm run tslint && cd ../demo && tns build ios && tns test ios --justlaunch",
     "tslint": "cd .. && tslint \"**/*.ts\" --config tslint.json --exclude \"**/node_modules/**\" --exclude \"**/typings/**\"",