Merge 1510b6f into 27c9659

modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer-fragment.glsl.js

@@ -1,27 +1,37 @@
-export default `
+export default `#version 300 es
 #define SHADER_NAME simple-mesh-layer-fs
 
 precision highp float;
 
 uniform bool hasTexture;
 uniform sampler2D sampler;
 uniform vec4 color;
+uniform bool flatShading;
 
-varying vec2 vTexCoord;
-varying vec3 cameraPosition;
-varying vec3 normals_commonspace;
-varying vec4 position_commonspace;
-varying vec4 vColor;
+in vec2 vTexCoord;
+in vec3 cameraPosition;
+in vec3 normals_commonspace;
+in vec4 position_commonspace;
+in vec4 vColor;
+
+out vec4 fragColor;
 
 void main(void) {
-  vec4 color = hasTexture ? texture2D(sampler, vTexCoord) : vColor / 255.;
-  vec3 lightColor = lighting_getLightColor(color.rgb * 255., cameraPosition, position_commonspace.xyz, normals_commonspace);
-  gl_FragColor = vec4(lightColor / 255., color.a);
+  vec3 normal;
+  if (flatShading) {
+    normal = normalize(cross(dFdx(position_commonspace.xyz), dFdy(position_commonspace.xyz)));
+  } else {
+    normal = normals_commonspace;
+  }
+
+  vec4 color = hasTexture ? texture(sampler, vTexCoord) : vColor / 255.;
+  vec3 lightColor = lighting_getLightColor(color.rgb * 255., cameraPosition, position_commonspace.xyz, normal);
+  fragColor = vec4(lightColor / 255., color.a);
 
   // use highlight color if this fragment belongs to the selected object.
-  gl_FragColor = picking_filterHighlightColor(gl_FragColor);
+  fragColor = picking_filterHighlightColor(fragColor);
 
   // use picking color if rendering to picking FBO.
-  gl_FragColor = picking_filterPickingColor(gl_FragColor);
+  fragColor = picking_filterPickingColor(fragColor);
 }
 `;

modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer-fragment.glsl1.js

@@ -0,0 +1,35 @@
+export default `
+#define SHADER_NAME simple-mesh-layer-fs
+
+precision highp float;
+
+uniform bool hasTexture;
+uniform sampler2D sampler;
+uniform vec4 color;
+uniform bool flatShading;
+
+varying vec2 vTexCoord;
+varying vec3 cameraPosition;
+varying vec3 normals_commonspace;
+varying vec4 position_commonspace;
+varying vec4 vColor;
+
+void main(void) {
+  vec3 normal;
+  if (flatShading) {
+    normal = normalize(cross(dFdx(position_commonspace.xyz), dFdy(position_commonspace.xyz)));
+  } else {
+    normal = normals_commonspace;
+  }
+
+  vec4 color = hasTexture ? texture2D(sampler, vTexCoord) : vColor / 255.;
+  vec3 lightColor = lighting_getLightColor(color.rgb * 255., cameraPosition, position_commonspace.xyz, normal);
+  gl_FragColor = vec4(lightColor / 255., color.a);
+
+  // use highlight color if this fragment belongs to the selected object.
+  gl_FragColor = picking_filterHighlightColor(gl_FragColor);
+
+  // use picking color if rendering to picking FBO.
+  gl_FragColor = picking_filterPickingColor(gl_FragColor);
+}
+`;

modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer-vertex.glsl.js

@@ -1,28 +1,28 @@
-export default `
+export default `#version 300 es
 #define SHADER_NAME simple-mesh-layer-vs
 
 // Scale the model
 uniform float sizeScale;
 
 // Primitive attributes
-attribute vec3 positions;
-attribute vec3 normals;
-attribute vec2 texCoords;
+in vec3 positions;
+in vec3 normals;
+in vec2 texCoords;
 
 // Instance attributes
-attribute vec3 instancePositions;
-attribute vec2 instancePositions64xy;
-attribute vec4 instanceColors;
-attribute vec3 instancePickingColors;
-attribute mat3 instanceModelMatrix;
-attribute vec3 instanceTranslation;
+in vec3 instancePositions;
+in vec2 instancePositions64xy;
+in vec4 instanceColors;
+in vec3 instancePickingColors;
+in mat3 instanceModelMatrix;
+in vec3 instanceTranslation;
 
 // Outputs to fragment shader
-varying vec2 vTexCoord;
-varying vec3 cameraPosition;
-varying vec3 normals_commonspace;
-varying vec4 position_commonspace;
-varying vec4 vColor;
+out vec2 vTexCoord;
+out vec3 cameraPosition;
+out vec3 normals_commonspace;
+out vec4 position_commonspace;
+out vec4 vColor;
 
 void main(void) {
   vec3 pos = (instanceModelMatrix * positions) * sizeScale + instanceTranslation;

modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer-vertex.glsl1.js

@@ -0,0 +1,40 @@
+export default `
+#define SHADER_NAME simple-mesh-layer-vs
+
+// Scale the model
+uniform float sizeScale;
+
+// Primitive attributes
+attribute vec3 positions;
+attribute vec3 normals;
+attribute vec2 texCoords;
+
+// Instance attributes
+attribute vec3 instancePositions;
+attribute vec2 instancePositions64xy;
+attribute vec4 instanceColors;
+attribute vec3 instancePickingColors;
+attribute mat3 instanceModelMatrix;
+attribute vec3 instanceTranslation;
+
+// Outputs to fragment shader
+varying vec2 vTexCoord;
+varying vec3 cameraPosition;
+varying vec3 normals_commonspace;
+varying vec4 position_commonspace;
+varying vec4 vColor;
+
+void main(void) {
+  vec3 pos = (instanceModelMatrix * positions) * sizeScale + instanceTranslation;
+  pos = project_size(pos);
+
+  vTexCoord = texCoords;
+  cameraPosition = project_uCameraPosition;
+  normals_commonspace = project_normal(instanceModelMatrix * normals);
+  vColor = instanceColors;
+
+  gl_Position = project_position_to_clipspace(instancePositions, instancePositions64xy, pos, position_commonspace);
+
+  picking_setPickingColor(instancePickingColors);
+}
+`;

modules/mesh-layers/src/simple-mesh-layer/simple-mesh-layer.js

@@ -24,15 +24,18 @@
 
 import {Layer, createIterable} from '@deck.gl/core';
 import GL from '@luma.gl/constants';
-import {Model, Geometry, Texture2D, fp64, Buffer, PhongMaterial} from '@luma.gl/core';
+import {Model, Geometry, Texture2D, fp64, Buffer, PhongMaterial, isWebGL2} from '@luma.gl/core';
 import {loadImage, loadFile} from '@loaders.gl/core';
 import {Matrix4} from 'math.gl';
 const {fp64LowPart} = fp64;
 
 import {MATRIX_ATTRIBUTES} from '../utils/matrix';
 
-import vs from './simple-mesh-layer-vertex.glsl';
-import fs from './simple-mesh-layer-fragment.glsl';
+// NOTE(Tarek): Should eventually phase out the glsl1 versions.
+import vs1 from './simple-mesh-layer-vertex.glsl1';
+import fs1 from './simple-mesh-layer-fragment.glsl1';
+import vs3 from './simple-mesh-layer-vertex.glsl';
+import fs3 from './simple-mesh-layer-fragment.glsl';
 
 // Replacement for the external assert method to reduce bundle size
 function assert(condition, message) {
@@ -73,7 +76,8 @@ function getTextureFromData(gl, data, opts) {
 
 function validateGeometryAttributes(attributes) {
   assert(
-    (attributes.positions && attributes.normals) || (attributes.POSITION && attributes.NORMAL)
+    attributes.positions || attributes.POSITION,
+    'SimpleMeshLayer requires "postions" or "POSITION" attribute in mesh property.'
   );
 }
 
@@ -141,6 +145,10 @@ const defaultProps = {
 export default class SimpleMeshLayer extends Layer {
   getShaders() {
     const projectModule = this.use64bitProjection() ? 'project64' : 'project32';
+    const gl2 = isWebGL2(this.context.gl);
+    const vs = gl2 ? vs3 : vs1;
+    const fs = gl2 ? fs3 : fs1;
+
     return {vs, fs, modules: [projectModule, 'phong-lighting', 'picking']};
   }
 
@@ -187,6 +195,9 @@ export default class SimpleMeshLayer extends Layer {
       }
       if (props.mesh) {
         this.setState({model: this.getModel(props.mesh)});
+        this.setState({
+          hasNormals: Boolean(props.mesh.attributes.NORMAL || props.mesh.attributes.normals)
+        });
       }
       this.getAttributeManager().invalidateAll();
     }
@@ -209,7 +220,8 @@ export default class SimpleMeshLayer extends Layer {
 
     this.state.model.draw({
       uniforms: Object.assign({}, uniforms, {
-        sizeScale
+        sizeScale,
+        flatShade: !this.state.hasNormals
       })
     });
   }