improved normals and transparency

src/apps/render-test/state.ts

@@ -40,8 +40,13 @@ export type ColorTheme = keyof typeof ColorTheme
 
 export default class State {
     viewer: Viewer
-    pdbId = '5ire'
+    pdbId = ''
+    // pdbId = '5ire'
     emdId = '8116'
+    // pdbId = '6G1K'
+    // emdId = '4339'
+    // pdbId = '4cup'
+    // emdId = ''
     model = new BehaviorSubject<Model | undefined>(undefined)
     volume = new BehaviorSubject<Volume | undefined>(undefined)
     initialized = new BehaviorSubject<boolean>(false)
@@ -154,7 +159,10 @@ export default class State {
         if (this.surfaceRepr) this.viewer.remove(this.surfaceRepr)
 
         this.surfaceRepr = VolumeRepresentation(Surface)
-        await Run(this.surfaceRepr.create(v.volume, { isoValue: VolumeIsoValue.relative(v.volume.dataStats, 1.5) }), log, 500)
+        await Run(this.surfaceRepr.create(v.volume, {
+            isoValue: VolumeIsoValue.relative(v.volume.dataStats, 3.0),
+            alpha: 0.3
+        }), log, 500)
         viewer.add(this.surfaceRepr)
 
         viewer.requestDraw()

src/mol-geo/representation/volume/surface.ts

@@ -61,7 +61,7 @@ export default function Surface(): VolumeElementRepresentation<SurfaceProps> {
                     position: mesh.vertexBuffer,
                     normal: mesh.normalBuffer,
                     id: ValueCell.create(fillSerial(new Float32Array(mesh.vertexCount / 3))),
-                    color: createUniformColor({ value: 0x999999 }),
+                    color: createUniformColor({ value: 0x7ec0ee }),
                     transform: ValueCell.create(new Float32Array(Mat4.identity())),
                     index: mesh.indexBuffer,
 
@@ -70,7 +70,9 @@ export default function Surface(): VolumeElementRepresentation<SurfaceProps> {
                     elementCount: mesh.triangleCount,
                     positionCount: mesh.vertexCount / 3,
 
-                    flatShaded: true
+                    flatShaded: true,
+                    doubleSided: true,
+                    flipSided: true
                 })
                 renderObjects.push(surface)
             })

src/mol-geo/util.ts

@@ -29,8 +29,12 @@ export function transformPositionArray (t: Mat4, array: Helpers.NumberArray, off
     }
 }
 
-export function transformDirectionArray (t: Mat3, array: Helpers.NumberArray, offset: number, count: number) {
-    // TODO
+export function transformDirectionArray (n: Mat3, array: Helpers.NumberArray, offset: number, count: number) {
+    for (let i = 0, il = count * 3; i < il; i += 3) {
+        Vec3.fromArray(tmpV, array, offset + i)
+        Vec3.transformMat3(tmpV, tmpV, n)
+        Vec3.toArray(tmpV, array, offset + i)
+    }
 }
 
 export function setArrayZero(array: Helpers.NumberArray) {

src/mol-gl/renderable/mesh.ts

@@ -35,12 +35,14 @@ namespace Mesh {
 
         flatShaded?: boolean
         doubleSided?: boolean
+        flipSided?: boolean
     }
 
     export function create(ctx: Context, props: Props): Renderable<Props> {
         const defines = getBaseDefines(props)
         if (props.flatShaded) defines.FLAT_SHADED = ''
         if (props.doubleSided) defines.DOUBLE_SIDED = ''
+        if (props.flipSided) defines.FLIP_SIDED = ''
 
         const defs: RenderItemProps = {
             ...getBaseDefs(props),

src/mol-gl/shader-code.ts

@@ -24,7 +24,7 @@ type ShaderDefine = (
     'UNIFORM_COLOR' | 'ATTRIBUTE_COLOR' | 'INSTANCE_COLOR' | 'ELEMENT_COLOR' | 'ELEMENT_INSTANCE_COLOR' |
     'UNIFORM_SIZE' | 'ATTRIBUTE_SIZE' |
     'POINT_SIZE_ATTENUATION' |
-    'FLAT_SHADED' | 'DOUBLE_SIDED'
+    'FLAT_SHADED' | 'DOUBLE_SIDED' | 'FLIP_SIDED'
 )
 export type ShaderDefines = {
     [k in ShaderDefine]?: number|string

src/mol-gl/shader/mesh.frag

@@ -65,6 +65,7 @@ void main() {
     vec3 finalColor = material * (diffuse + ambient) + specular;
 
     // gl_FragColor.rgb = N;
+    // gl_FragColor.a = 1.0;
     // gl_FragColor.rgb = vec3(1.0, 0.0, 0.0);
     gl_FragColor.rgb = finalColor;
     gl_FragColor.a = alpha;

src/mol-gl/shader/mesh.vert

@@ -39,6 +39,10 @@ void main(){
 
     #ifndef FLAT_SHADED
         mat3 normalMatrix = transpose(inverse(mat3(modelView)));
-        vNormal = normalize(normalMatrix * normal);
+        vec3 transformedNormal = normalize(normalMatrix * normal);
+        #ifdef FLIP_SIDED
+            transformedNormal = -transformedNormal;
+        #endif
+        vNormal = transformedNormal;
     #endif
 }

src/mol-math/linear-algebra/3d/mat3.ts

@@ -17,6 +17,8 @@
  * furnished to do so, subject to the following conditions:
  */
 
+import { Mat4 } from '../3d'
+
 interface Mat3 extends Array<number> { [d: number]: number, '@type': 'mat3', length: 9 }
 
 namespace Mat3 {
@@ -27,6 +29,33 @@ namespace Mat3 {
         return ret as any;
     }
 
+    export function identity(): Mat3 {
+        const out = zero();
+        out[0] = 1;
+        out[1] = 0;
+        out[2] = 0;
+        out[3] = 0;
+        out[4] = 1;
+        out[5] = 0;
+        out[6] = 0;
+        out[7] = 0;
+        out[8] = 1;
+        return out;
+    }
+
+    export function setIdentity(mat: Mat3): Mat3 {
+        mat[0] = 1;
+        mat[1] = 0;
+        mat[2] = 0;
+        mat[3] = 0;
+        mat[4] = 1;
+        mat[5] = 0;
+        mat[6] = 0;
+        mat[7] = 0;
+        mat[8] = 1;
+        return mat;
+    }
+
     export function toArray(a: Mat3, out: Helpers.NumberArray, offset: number) {
         out[offset + 0] = a[0];
         out[offset + 1] = a[1];
@@ -37,9 +66,6 @@ namespace Mat3 {
         out[offset + 6] = a[6];
         out[offset + 7] = a[7];
         out[offset + 8] = a[8];
-        out[offset + 9] = a[9];
-        out[offset + 10] = a[10];
-        out[offset + 11] = a[11];
     }
 
     export function fromArray(a: Mat3, array: Helpers.NumberArray, offset: number) {
@@ -52,11 +78,107 @@ namespace Mat3 {
         a[6] = array[offset + 6]
         a[7] = array[offset + 7]
         a[8] = array[offset + 8]
-        a[9] = array[offset + 9]
-        a[10] = array[offset + 10]
-        a[11] = array[offset + 11]
         return a
     }
+
+    /**
+     * Copies the upper-left 3x3 values into the given mat3.
+     */
+    export function fromMat4(out: Mat3, a: Mat4) {
+        out[0] = a[0];
+        out[1] = a[1];
+        out[2] = a[2];
+        out[3] = a[4];
+        out[4] = a[5];
+        out[5] = a[6];
+        out[6] = a[8];
+        out[7] = a[9];
+        out[8] = a[10];
+        return out;
+    }
+
+    /**
+     * Creates a new Mat3 initialized with values from an existing matrix
+     */
+    export function clone(a: Mat3) {
+        return Mat3.copy(Mat3.zero(), a);
+    }
+
+    /**
+     * Copy the values from one Mat3 to another
+     */
+    export function copy(out: Mat3, a: Mat3) {
+        out[0] = a[0];
+        out[1] = a[1];
+        out[2] = a[2];
+        out[3] = a[3];
+        out[4] = a[4];
+        out[5] = a[5];
+        out[6] = a[6];
+        out[7] = a[7];
+        out[8] = a[8];
+        return out;
+    }
+
+    /**
+     * Transpose the values of a Mat3
+     */
+    export function transpose(out: Mat3, a: Mat3) {
+        // If we are transposing ourselves we can skip a few steps but have to cache some values
+        if (out === a) {
+            const a01 = a[1], a02 = a[2], a12 = a[5];
+            out[1] = a[3];
+            out[2] = a[6];
+            out[3] = a01;
+            out[5] = a[7];
+            out[6] = a02;
+            out[7] = a12;
+        } else {
+            out[0] = a[0];
+            out[1] = a[3];
+            out[2] = a[6];
+            out[3] = a[1];
+            out[4] = a[4];
+            out[5] = a[7];
+            out[6] = a[2];
+            out[7] = a[5];
+            out[8] = a[8];
+        }
+        return out;
+    }
+
+    /**
+     * Inverts a Mat3
+     */
+    export function invert(out: Mat3, a: Mat3): Mat3 {
+        const a00 = a[0], a01 = a[1], a02 = a[2];
+        const a10 = a[3], a11 = a[4], a12 = a[5];
+        const a20 = a[6], a21 = a[7], a22 = a[8];
+
+        const b01 = a22 * a11 - a12 * a21;
+        const b11 = -a22 * a10 + a12 * a20;
+        const b21 = a21 * a10 - a11 * a20;
+
+        // Calculate the determinant
+        let det = a00 * b01 + a01 * b11 + a02 * b21;
+
+        if (!det) {
+            console.warn('non-invertible matrix.', a);
+            return out;
+        }
+        det = 1.0 / det;
+
+        out[0] = b01 * det;
+        out[1] = (-a22 * a01 + a02 * a21) * det;
+        out[2] = (a12 * a01 - a02 * a11) * det;
+        out[3] = b11 * det;
+        out[4] = (a22 * a00 - a02 * a20) * det;
+        out[5] = (-a12 * a00 + a02 * a10) * det;
+        out[6] = b21 * det;
+        out[7] = (-a21 * a00 + a01 * a20) * det;
+        out[8] = (a11 * a00 - a01 * a10) * det;
+        return out;
+    }
 }
 
 export default Mat3

src/mol-math/linear-algebra/3d/vec3.ts

@@ -18,7 +18,7 @@
  */
 
 import Mat4 from './mat4';
-import { Quat } from '../3d';
+import { Quat, Mat3 } from '../3d';
 
 interface Vec3 extends Array<number> { [d: number]: number, '@type': 'vec3', length: 3 }
 
@@ -265,7 +265,18 @@ namespace Vec3 {
         return out;
     }
 
-    /** Transforms the vec3 with a quat */
+    /**
+     * Transforms the Vec3 with a Mat3.
+     */
+    export function transformMat3(out: Vec3, a: Vec3, m: Mat3) {
+        const x = a[0], y = a[1], z = a[2];
+        out[0] = x * m[0] + y * m[3] + z * m[6];
+        out[1] = x * m[1] + y * m[4] + z * m[7];
+        out[2] = x * m[2] + y * m[5] + z * m[8];
+        return out;
+    }
+
+    /** Transforms the Vec3 with a quat */
     export function transformQuat(out: Vec3, a: Vec3, q: Quat) {
         // benchmarks: http://jsperf.com/quaternion-transform-vec3-implementations
 

src/mol-view/viewer.ts

@@ -65,7 +65,7 @@ namespace Viewer {
         })
 
         const gl = getWebGLContext(canvas, {
-            alpha: true,
+            alpha: false,
             antialias: true,
             depth: true,
             preserveDrawingBuffer: true