Merge pull request #121 from archilogic-com/custom-maps

Implement basic support for adding maps to SCNMaterial

Author: macrozone

README.md

@@ -244,7 +244,10 @@ Most objects take a material property with these sub-props:
 
 | Prop | Type | Description |
 |---|---|---|
-| `diffuse` | colorstring | diffuse color  |
+| `diffuse` | { `path`, `color`, `intensity` } | [diffuse](https://developer.apple.com/documentation/scenekit/scnmaterial/1462589-diffuse?language=objc)
+| `specular` | { `path`, `color`, `intensity` } | [specular](https://developer.apple.com/documentation/scenekit/scnmaterial/1462516-specular?language=objc)
+| `displacement` | { `path`, `color`, `intensity` } | [displacement](https://developer.apple.com/documentation/scenekit/scnmaterial/2867516-displacement?language=objc)
+| `normal` | { `path`, `color`, `intensity` } |  [normal](https://developer.apple.com/documentation/scenekit/scnmaterial/1462542-normal)
 | `metalness` | number | metalness of the object |
 | `roughness` | number | roughness of the object |
 | `doubleSided` | boolean | render both sides, default is `true` |

components/lib/createArComponent.js

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { NativeModules } from 'react-native';
+import { NativeModules, processColor } from 'react-native';
 import PropTypes from 'prop-types';
 import filter from 'lodash/filter';
 import isDeepEqual from 'fast-deep-equal';
@@ -20,7 +20,7 @@ import {
   scale,
   transition,
 } from './propTypes';
-import { processColor, processColorInMaterial } from './parseColor';
+import processMaterial from './processMaterial';
 import generateId from './generateId';
 
 const { ARGeosManager } = NativeModules;
@@ -69,20 +69,17 @@ export default (mountConfig, propTypes = {}, nonUpdateablePropKeys = []) => {
   // any custom props (material, shape, ...)
   const nonNodePropKeys = keys(propTypes);
 
-  const processColors = props => ({
+  const parseMaterials = props => ({
     ...props,
-    ...(props.color ? { color: processColor(props.color) } : {}),
     ...(props.shadowColor
       ? { shadowColor: processColor(props.shadowColor) }
       : {}),
-    ...(props.material
-      ? { material: processColorInMaterial(props.material) }
-      : {}),
+    ...(props.material ? { material: processMaterial(props.material) } : {}),
   });
 
   const getNonNodeProps = props => ({
     ...pick(props, nonNodePropKeys),
-    ...processColors(props),
+    ...parseMaterials(props),
   });
 
   const mountFunc =
@@ -158,7 +155,7 @@ export default (mountConfig, propTypes = {}, nonUpdateablePropKeys = []) => {
             ...this.props.transition,
             ...props.transition,
           },
-          ...processColors(pick(props, changedKeys)),
+          ...parseMaterials(pick(props, changedKeys)),
         };
 
         if (DEBUG) console.log('update node', propsToupdate);

components/lib/parseColor.js

@@ -0,0 +1,26 @@
+import { processColor } from 'react-native';
+import { isString, mapValues, set } from 'lodash';
+
+// https://developer.apple.com/documentation/scenekit/scnmaterial
+const propsWithMaps = ['normal', 'diffuse', 'displacement', 'specular'];
+
+export default function processMaterial(material) {
+  // previously it was possible to set { material: { color:'colorstring'}}... translate this to { material: { diffuse: { color: 'colorstring'}}}
+  if (material.color) {
+    set(material, 'diffuse.color', material.color);
+  }
+
+  return mapValues(
+    material,
+    (prop, key) =>
+      propsWithMaps.includes(key)
+        ? {
+            ...prop,
+            color: processColor(
+              // allow for setting a diffuse  colorstring { diffuse: 'colorstring'}
+              key === 'diffuse' && isString(prop) ? prop : prop.color,
+            ),
+          }
+        : prop,
+  );
+}

components/lib/processMaterial.js

@@ -61,8 +61,18 @@ export const colorBufferWriteMask = PropTypes.oneOf(
 
 export const opacity = PropTypes.number;
 
+export const materialProperty = PropTypes.shape({
+  path: PropTypes.string,
+  color: PropTypes.string,
+  intensity: PropTypes.number,
+});
+
 export const material = PropTypes.shape({
   color,
+  normal: materialProperty,
+  specular: materialProperty,
+  displacement: materialProperty,
+  diffuse: PropTypes.oneOfType([PropTypes.string, materialProperty]),
   metalness: PropTypes.number,
   roughness: PropTypes.number,
   blendMode,

components/lib/propTypes.js

@@ -187,24 +187,24 @@ + (SVGBezierPath *)svgStringToBezier:(NSString *)pathString {
 
 + (void)setChamferProfilePathSvg:(SCNShape *)geometry properties:(NSDictionary *)shape {
     if (shape[@"chamferProfilePathSvg"]) {
-       
-    
-    SVGBezierPath * path = [self svgStringToBezier:shape[@"chamferProfilePathSvg"]];
-    if(shape[@"chamferProfilePathFlatness"]) {
-        path.flatness = [shape[@"chamferProfilePathFlatness"] floatValue];
-    }
-    // normalize path
-    CGRect boundingBox = path.bounds;
-    if(path.bounds.size.width !=0 && path.bounds.size.height != 0) {
-        CGFloat scaleX = 1/boundingBox.size.width;
-        CGFloat scaleY =  scaleY = 1/boundingBox.size.height;
 
-        CGAffineTransform transform = CGAffineTransformMakeScale(scaleX, scaleY);
-        [path applyTransform:transform];
-        geometry.chamferProfile = path;
-    } else {
-        NSLog(@"Invalid chamferProfilePathFlatness");
-    }
+        
+        SVGBezierPath * path = [self svgStringToBezier:shape[@"chamferProfilePathSvg"]];
+        if(shape[@"chamferProfilePathFlatness"]) {
+            path.flatness = [shape[@"chamferProfilePathFlatness"] floatValue];
+        }
+        // normalize path
+        CGRect boundingBox = path.bounds;
+        if(path.bounds.size.width !=0 && path.bounds.size.height != 0) {
+            CGFloat scaleX = 1/boundingBox.size.width;
+            CGFloat scaleY =  scaleY = 1/boundingBox.size.height;
+            
+            CGAffineTransform transform = CGAffineTransformMakeScale(scaleX, scaleY);
+            [path applyTransform:transform];
+            geometry.chamferProfile = path;
+        } else {
+            NSLog(@"Invalid chamferProfilePathFlatness");
+        }
     }
 
 }
@@ -305,6 +305,17 @@ + (SCNLight *)SCNLight:(id)json {
 }
 
 
++ (void)setMaterialPropertyContents:(id)property material:(SCNMaterialProperty *)material {
+    if (property[@"path"]) {
+        material.contents = property[@"path"];
+    } else if (property[@"color"]) {
+        material.contents = [self UIColor:property[@"color"]];
+    }
+    if (property[@"intensity"]) {
+        material.intensity = [property[@"intensity"] floatValue];
+    }
+}
+
 + (void)setMaterialProperties:(SCNMaterial *)material properties:(id)json {
     if (json[@"doubleSided"]) {
         material.doubleSided = [json[@"doubleSided"] boolValue];
@@ -321,8 +332,21 @@ + (void)setMaterialProperties:(SCNMaterial *)material properties:(id)json {
     }
 
     if (json[@"diffuse"]) {
-        material.diffuse.contents = [self UIColor:json[@"diffuse"]];
+        [self setMaterialPropertyContents:json[@"diffuse"] material:material.diffuse];
+    }
+    
+    if (json[@"normal"]) {
+        [self setMaterialPropertyContents:json[@"normal"] material:material.normal];
+    }
+    
+    if (json[@"displacement"]) {
+        [self setMaterialPropertyContents:json[@"displacement"] material:material.displacement];
+    }
+    
+    if (json[@"specular"]) {
+        [self setMaterialPropertyContents:json[@"specular"] material:material.specular];
     }
+    
     if (json[@"transparency"]) {
         material.transparency = [json[@"transparency"] floatValue];
     }
@@ -357,7 +381,6 @@ + (void)setMaterialProperties:(SCNMaterial *)material properties:(id)json {
         material.doubleSided = [json[@"doubleSided"] boolValue];
     }
 
-    
     if(json[@"litPerPixel"]) {
         material.litPerPixel = [json[@"litPerPixel"] boolValue];
     }