various tweaks and formating

src/apps/canvas/component/structure-representation.tsx

@@ -24,6 +24,7 @@ export interface StructureRepresentationComponentState {
     quality: VisualQuality
     colorTheme: ColorThemeProps
 
+    flatShaded?: boolean
     resolutionFactor?: number
     probeRadius?: number
     isoValue?: number
@@ -37,6 +38,7 @@ export class StructureRepresentationComponent extends React.Component<StructureR
         quality: this.props.representation.props.quality,
         colorTheme: this.props.representation.props.colorTheme,
 
+        flatShaded: (this.props.representation.props as any).flatShaded,
         resolutionFactor: (this.props.representation.props as any).resolutionFactor,
         probeRadius: (this.props.representation.props as any).probeRadius,
         isoValue: (this.props.representation.props as any).isoValue,
@@ -53,6 +55,7 @@ export class StructureRepresentationComponent extends React.Component<StructureR
             quality: repr.props.quality,
             colorTheme: repr.props.colorTheme,
 
+            flatShaded: (repr.props as any).flatShaded,
             resolutionFactor: (repr.props as any).resolutionFactor,
             probeRadius: (repr.props as any).probeRadius,
             isoValue: (repr.props as any).isoValue,
@@ -68,12 +71,13 @@ export class StructureRepresentationComponent extends React.Component<StructureR
         if (state.alpha !== undefined) props.alpha = state.alpha
         if (state.colorTheme !== undefined) props.colorTheme = state.colorTheme
 
+        if (state.flatShaded !== undefined) (props as any).flatShaded = state.flatShaded
         if (state.resolutionFactor !== undefined) (props as any).resolutionFactor = state.resolutionFactor
         if (state.probeRadius !== undefined) (props as any).probeRadius = state.probeRadius
         if (state.isoValue !== undefined) (props as any).isoValue = state.isoValue
 
         await repr.createOrUpdate(props).run(
-            progress => console.log(Progress.format(progress)), 100
+            progress => console.log(Progress.format(progress))
         )
         this.props.viewer.add(repr)
         this.props.viewer.draw(true)
@@ -95,6 +99,7 @@ export class StructureRepresentationComponent extends React.Component<StructureR
             alpha: repr.props.alpha,
             colorTheme: repr.props.colorTheme,
 
+            flatShaded: (repr.props as any).flatShaded,
             resolutionFactor: (repr.props as any).resolutionFactor,
             probeRadius: (repr.props as any).probeRadius,
             isoValue: (repr.props as any).isoValue,
@@ -122,6 +127,12 @@ export class StructureRepresentationComponent extends React.Component<StructureR
                         {visible ? 'Hide' : 'Show'}
                     </button>
                 </div>
+                { this.state.flatShaded !== undefined ? <div>
+                    <span>Flat Shaded </span>
+                    <button onClick={(e) => this.update({ flatShaded: !this.state.flatShaded }) }>
+                        {this.state.flatShaded ? 'Deactivate' : 'Activate'}
+                    </button>
+                </div> : '' }
                 <div>
                     <span>Quality </span>
                     <select value={quality} onChange={(e) => this.update({ quality: e.target.value as VisualQuality }) }>
@@ -155,7 +166,7 @@ export class StructureRepresentationComponent extends React.Component<StructureR
                     <input type='range'
                         defaultValue={this.state.isoValue.toString()}
                         min='0.1'
-                        max='2'
+                        max='3'
                         step='0.1'
                         onInput={(e) => this.update({ isoValue: parseFloat(e.currentTarget.value) })}
                     >

src/apps/canvas/structure-view.ts

@@ -210,7 +210,7 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
             for (const k in structureRepresentations) {
                 if (active[k]) {
                     await structureRepresentations[k].createOrUpdate({}, structure).run(
-                        progress => console.log(Progress.format(progress)), 100
+                        progress => console.log(Progress.format(progress))
                     )
                     viewer.add(structureRepresentations[k])
                 } else {

src/mol-geo/representation/structure/visual/gaussian-surface-mesh.ts

@@ -91,15 +91,16 @@ async function createGaussianSurfaceMesh(ctx: RuntimeContext, unit: Unit, struct
         const minX = Math.floor(v[0] - radius)
         const minY = Math.floor(v[1] - radius)
         const minZ = Math.floor(v[2] - radius)
-        const maxX = Math.floor(v[0] + radius)
-        const maxY = Math.floor(v[1] + radius)
-        const maxZ = Math.floor(v[2] + radius)
+        const maxX = Math.ceil(v[0] + radius)
+        const maxY = Math.ceil(v[1] + radius)
+        const maxZ = Math.ceil(v[2] + radius)
 
-        for (let x = minX; x <= maxX; ++x) {
-            for (let y = minY; y <= maxY; ++y) {
-                for (let z = minZ; z <= maxZ; ++z) {
+        for (let x = minX; x < maxX; ++x) {
+            for (let y = minY; y < maxY; ++y) {
+                for (let z = minZ; z < maxZ; ++z) {
                     const dist = Vec3.distance(Vec3.set(p, x, y, z), v)
                     if (dist <= radius) {
+                        // TODO use actual gaussian
                         const density = 1.0 - smoothstep(0.0, radius * 1.0, dist)
                         space.set(data, x, y, z, space.get(data, x, y, z) + density)
                     }

src/mol-geo/representation/util.ts

@@ -140,12 +140,12 @@ export function getQualityProps(props: Partial<QualityProps>, structure?: Struct
             break
         case 'low':
             detail = 0
-            radialSegments = 5
+            radialSegments = 8
             linearSegments = 3
             break
         case 'lowest':
             detail = 0
-            radialSegments = 3
+            radialSegments = 4
             linearSegments = 2
             break
         case 'custom':

src/mol-geo/util/marching-cubes/algorithm.ts

@@ -100,9 +100,13 @@ class MarchingCubesComputation {
         if (!params.bottomLeft) params.bottomLeft = [0, 0, 0];
         if (!params.topRight) params.topRight = params.scalarField.space.dimensions;
 
-        this.state = new MarchingCubesState(params),
-            this.minX = params.bottomLeft[0]; this.minY = params.bottomLeft[1]; this.minZ = params.bottomLeft[2];
-        this.maxX = params.topRight[0] - 1; this.maxY = params.topRight[1] - 1; this.maxZ = params.topRight[2] - 1;
+        this.state = new MarchingCubesState(params);
+        this.minX = params.bottomLeft[0];
+        this.minY = params.bottomLeft[1];
+        this.minZ = params.bottomLeft[2];
+        this.maxX = params.topRight[0] - 1;
+        this.maxY = params.topRight[1] - 1;
+        this.maxZ = params.topRight[2] - 1;
 
         this.size = (this.maxX - this.minX) * (this.maxY - this.minY) * (this.maxZ - this.minZ);
         this.sliceSize = (this.maxX - this.minX) * (this.maxY - this.minY);
@@ -162,7 +166,8 @@ class MarchingCubesState {
             this.vertexBuffer,
             li + t * (li - hi),
             lj + t * (lj - hj),
-            lk + t * (lk - hk)) | 0;
+            lk + t * (lk - hk)
+        ) | 0;
 
         this.verticesOnEdges[edgeId] = id + 1;
 

src/mol-gl/scene.ts

@@ -15,7 +15,7 @@ import { Vec3 } from 'mol-math/linear-algebra';
 function calculateBoundingSphere(renderableMap: Map<RenderObject, Renderable<RenderableValues & BaseValues>>): Sphere3D {
     let count = 0
     const center = Vec3.zero()
-    renderableMap.forEach((r, o) => {
+    renderableMap.forEach(r => {
         if (r.boundingSphere.radius) {
             Vec3.add(center, center, r.boundingSphere.center)
             ++count
@@ -26,7 +26,7 @@ function calculateBoundingSphere(renderableMap: Map<RenderObject, Renderable<Ren
     }
 
     let radius = 0
-    renderableMap.forEach((r, o) => {
+    renderableMap.forEach(r => {
         if (r.boundingSphere.radius) {
             radius = Math.max(radius, Vec3.distance(center, r.boundingSphere.center) + r.boundingSphere.radius)
         }
@@ -60,7 +60,7 @@ namespace Scene {
 
             update: () => {
                 update()
-                renderableMap.forEach(o => o.update())
+                renderableMap.forEach(r => r.update())
                 boundingSphere = undefined
             },
 

src/mol-gl/webgl/render-item.ts

@@ -172,13 +172,13 @@ export function createRenderItem(ctx: Context, drawMode: DrawMode, shaderCode: S
                 if (value.ref.version !== versions[k]) {
                     const buffer = attributeBuffers[k]
                     if (buffer.length >= value.ref.value.length) {
-                        // console.log('attribute array large enough to update', k)
+                        // console.log('attribute array large enough to update', k, value.ref.id, value.ref.version)
                         attributeBuffers[k].updateData(value.ref.value)
                     } else {
-                        // console.log('attribute array to small, need to create new attribute', k)
+                        // console.log('attribute array to small, need to create new attribute', k, value.ref.id, value.ref.version)
                         attributeBuffers[k].destroy()
-                        const spec = schema[k] as AttributeSpec<ArrayKind>
-                        attributeBuffers[k] = createAttributeBuffer(ctx, value.ref.value, spec.itemSize, spec.divisor)
+                        const { itemSize, divisor } = schema[k] as AttributeSpec<ArrayKind>
+                        attributeBuffers[k] = createAttributeBuffer(ctx, value.ref.value, itemSize, divisor)
                         valueChanges.attributes = true
                     }
                     versions[k] = value.ref.version
@@ -188,10 +188,10 @@ export function createRenderItem(ctx: Context, drawMode: DrawMode, shaderCode: S
             valueChanges.elements = false
             if (elementsBuffer && values.elements.ref.version !== versions.elements) {
                 if (elementsBuffer.length >= values.elements.ref.value.length) {
-                    // console.log('elements array large enough to update')
+                    // console.log('elements array large enough to update', values.elements.ref.id, values.elements.ref.version)
                     elementsBuffer.updateData(values.elements.ref.value)
                 } else {
-                    // console.log('elements array to small, need to create new elements')
+                    // console.log('elements array to small, need to create new elements', values.elements.ref.id, values.elements.ref.version)
                     elementsBuffer.destroy()
                     elementsBuffer = createElementsBuffer(ctx, values.elements.ref.value)
                     valueChanges.elements = true