<Worldview /> Favor render state provided by commands over the Regl o…

…nes (cruise-automation#539)

* Use render state provided by commands by default

* Add story to showcase default render states for triangles

packages/regl-worldview/src/stories/Triangles.stories.js

@@ -44,6 +44,14 @@ const instancedTriangles = (x, y, z) => {
   };
 };
 
+const withSingleColor = (triangle, color) => {
+  return {
+    ...triangle,
+    colors: undefined,
+    color,
+  };
+};
+
 const Example = ({ triangles }) => (
   <Container cameraState={{ perspective: true, phi: 1.83, thetaOffset: -1.1 }}>
     <Triangles>{triangles}</Triangles>
@@ -54,9 +62,25 @@ storiesOf("Worldview/Triangles", module)
   .addDecorator(withKnobs)
   .add("<Triangles> with points and color", () => <Example triangles={[singleTriangle(0, 0, 0)]} />)
   .add("<Triangles> with instancing", () => <Example triangles={[instancedTriangles(0, 0, 0)]} />)
+  .add("<Triangles> with single color", () => (
+    <Example
+      triangles={[
+        withSingleColor(singleTriangle(0, 0, 0), { r: 1, g: 1, b: 0, a: 1 }),
+        withSingleColor(singleTriangle(5.0, 0.1, 0), { r: 0, g: 1, b: 1, a: 1 }),
+      ]}
+    />
+  ))
   .add("<Triangles> with custom depth and blend values", () => (
     <Example triangles={withCustomRenderStates([singleTriangle(0, 0, 0)], [singleTriangle(5, 0, 0.1)])} />
   ))
   .add("<Triangles> with instancing and custom render states", () => (
     <Example triangles={withCustomRenderStates([instancedTriangles(0, 0, 0)], [instancedTriangles(5, 0, 0.1)])} />
+  ))
+  .add("<Triangles> with single color and custom render states", () => (
+    <Example
+      triangles={withCustomRenderStates(
+        [withSingleColor(singleTriangle(0, 0, 0), { r: 1, g: 1, b: 0, a: 1 })],
+        [withSingleColor(singleTriangle(5.0, 0.1, 0), { r: 0, g: 1, b: 1, a: 1 })]
+      )}
+    />
   ));

packages/regl-worldview/src/utils/withRenderStateOverrides.js

@@ -28,9 +28,10 @@ const withRenderStateOverrides = (command: any) => (regl: any) => {
   const renderElement = (props) => {
     // Get curstom render states from the given marker. Some commands, like <Arrows />
     // will use the originalMarker property instead. If no custom render states
-    // are present, use the default ones to make sure the hitmap works correctly.
-    const depth = props.depth || props.originalMarker?.depth || defaultReglDepth;
-    const blend = props.blend || props.originalMarker?.blend || defaultReglBlend;
+    // are present, use either the ones provided in the command or the default ones. We do
+    // need to provide valid objects in order to make sure the hitmap works correctly.
+    const depth = props.depth || props.originalMarker?.depth || reglCommand.depth || defaultReglDepth;
+    const blend = props.blend || props.originalMarker?.blend || reglCommand.blend || defaultReglBlend;
     memoizedRender({ depth, blend })(props);
   };