gl compute and state handling improvements

src/mol-canvas3d/canvas3d.ts

@@ -208,19 +208,15 @@ namespace Canvas3D {
                     case 'pick':
                         renderer.setViewport(0, 0, pickWidth, pickHeight);
                         objectPickTarget.bind();
-                        renderer.clear()
                         renderer.render(scene, 'pickObject');
                         instancePickTarget.bind();
-                        renderer.clear()
                         renderer.render(scene, 'pickInstance');
                         groupPickTarget.bind();
-                        renderer.clear()
                         renderer.render(scene, 'pickGroup');
                         break;
                     case 'draw':
                         webgl.unbindFramebuffer();
                         renderer.setViewport(0, 0, canvas.width, canvas.height);
-                        renderer.clear()
                         renderer.render(scene, variant);
                         if (debugHelper.isEnabled) {
                             debugHelper.syncVisibility()

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

@@ -173,6 +173,8 @@ class MarchingCubesState {
         );
         this.verticesOnEdges[edgeId] = id + 1;
 
+        // TODO cache scalarField differences for slices
+        // TODO make calculation optional
         const n0x = sfg(sf, Math.max(0, li - 1), lj, lk) - sfg(sf, Math.min(this.nX - 1, li + 1), lj, lk)
         const n0y = sfg(sf, li, Math.max(0, lj - 1), lk) - sfg(sf, li, Math.min(this.nY - 1, lj + 1), lk)
         const n0z = sfg(sf, li, lj, Math.max(0, lk - 1)) - sfg(sf, li, lj, Math.min(this.nZ, lk + 1))

src/mol-gl/compute/histogram-pyramid/reduction.ts

@@ -14,6 +14,7 @@ import { ValueCell } from 'mol-util';
 import { QuadSchema, QuadValues } from '../util';
 import { Vec2 } from 'mol-math/linear-algebra';
 import { getHistopyramidSum } from './sum';
+import { Framebuffer, createFramebuffer } from 'mol-gl/webgl/framebuffer';
 
 const HistopyramidReductionSchema = {
     ...QuadSchema,
@@ -61,12 +62,31 @@ function getLevelTexture(ctx: WebGLContext, level: number) {
     return tex
 }
 
+type TextureFramebuffer = { texture: Texture, framebuffer: Framebuffer }
+const LevelTexturesFramebuffers: TextureFramebuffer[] = []
+function getLevelTextureFramebuffer(ctx: WebGLContext, level: number) {
+    let textureFramebuffer  = LevelTexturesFramebuffers[level]
+    const size = Math.pow(2, level)
+    if (textureFramebuffer === undefined) {
+        const texture = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
+        const framebuffer = createFramebuffer(ctx.gl, ctx.stats)
+        texture.attachFramebuffer(framebuffer, 0)
+        textureFramebuffer = { texture, framebuffer }
+        textureFramebuffer.texture.define(size, size)
+        LevelTexturesFramebuffers[level] = textureFramebuffer
+    }
+    return textureFramebuffer
+}
+
 function setRenderingDefaults(ctx: WebGLContext) {
     const { gl, state } = ctx
     state.disable(gl.CULL_FACE)
     state.disable(gl.BLEND)
     state.disable(gl.DEPTH_TEST)
+    state.disable(gl.SCISSOR_TEST)
     state.depthMask(false)
+    state.colorMask(true, true, true, true)
+    state.clearColor(0, 0, 0, 0)
 }
 
 export interface HistogramPyramid {
@@ -98,16 +118,19 @@ export function createHistogramPyramid(ctx: WebGLContext, inputTexture: Texture)
     const pyramidTexture = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
     pyramidTexture.define(maxSize, maxSize)
 
-    const levelTextures: Texture[] = []
-    for (let i = 0; i < levels; ++i) levelTextures.push(getLevelTexture(ctx, i))
+    const levelTexturesFramebuffers: TextureFramebuffer[] = []
+    for (let i = 0; i < levels; ++i) levelTexturesFramebuffers.push(getLevelTextureFramebuffer(ctx, i))
 
     const renderable = getHistopyramidReductionRenderable(ctx, initialTexture)
+    ctx.state.currentRenderItemId = -1
     setRenderingDefaults(ctx)
 
     let offset = 0;
     for (let i = 0; i < levels; i++) {
         const currLevel = levels - 1 - i
-        levelTextures[currLevel].attachFramebuffer(framebuffer, 0)
+        const tf = levelTexturesFramebuffers[currLevel]
+        tf.framebuffer.bind()
+        // levelTextures[currLevel].attachFramebuffer(framebuffer, 0)
 
         const size = Math.pow(2, currLevel)
         // console.log('size', size, 'draw-level', currLevel, 'read-level', levels - i)
@@ -116,9 +139,10 @@ export function createHistogramPyramid(ctx: WebGLContext, inputTexture: Texture)
 
         ValueCell.update(renderable.values.uSize, Math.pow(2, i + 1) / maxSize)
         if (i > 0) {
-            ValueCell.update(renderable.values.tPreviousLevel, levelTextures[levels - i])
+            ValueCell.update(renderable.values.tPreviousLevel, levelTexturesFramebuffers[levels - i].texture)
             renderable.update()
         }
+        ctx.state.currentRenderItemId = -1
         renderable.render()
 
         pyramidTexture.bind(0)
@@ -140,15 +164,18 @@ export function createHistogramPyramid(ctx: WebGLContext, inputTexture: Texture)
         offset += size;
     }
 
+    gl.finish()
+
     // printTexture(ctx, pyramidTexture, 2)
 
     //
 
-    const finalCount = getHistopyramidSum(ctx, levelTextures[0])
+    const finalCount = getHistopyramidSum(ctx, levelTexturesFramebuffers[0].texture)
     const height = Math.ceil(finalCount / Math.pow(2, levels))
     const scale = Vec2.create(maxSize / inputTexture.width, maxSize / inputTexture.height)
     // console.log('height', height, 'finalCount', finalCount, 'scale', scale)
 
+    
     return {
         pyramidTex: pyramidTexture,
         count: finalCount,

src/mol-gl/compute/histogram-pyramid/sum.ts

@@ -54,17 +54,33 @@ function getSumTexture(ctx: WebGLContext) {
 /** name for shared framebuffer used for histogram-pyramid operations */
 const FramebufferName = 'histogram-pyramid-sum'
 
+function setRenderingDefaults(ctx: WebGLContext) {
+    const { gl, state } = ctx
+    state.disable(gl.CULL_FACE)
+    state.disable(gl.BLEND)
+    state.disable(gl.DEPTH_TEST)
+    state.disable(gl.SCISSOR_TEST)
+    state.depthMask(false)
+    state.colorMask(true, true, true, true)
+    state.clearColor(0, 0, 0, 0)
+}
+
 const sumArray = new Uint8Array(4)
 export function getHistopyramidSum(ctx: WebGLContext, pyramidTopTexture: Texture) {
     const { gl, framebufferCache } = ctx
 
     const renderable = getHistopyramidSumRenderable(ctx, pyramidTopTexture)
+    ctx.state.currentRenderItemId = -1
+    
     const framebuffer = framebufferCache.get(FramebufferName).value
     const sumTexture = getSumTexture(ctx)
     sumTexture.attachFramebuffer(framebuffer, 0)
 
+    setRenderingDefaults(ctx)
+
     gl.viewport(0, 0, 1, 1)
     renderable.render()
+    gl.finish()
     ctx.readPixels(0, 0, 1, 1, sumArray)
     ctx.unbindFramebuffer()
 

src/mol-gl/compute/marching-cubes/active-voxels.ts

@@ -56,7 +56,10 @@ function setRenderingDefaults(ctx: WebGLContext) {
     state.disable(gl.CULL_FACE)
     state.disable(gl.BLEND)
     state.disable(gl.DEPTH_TEST)
+    state.disable(gl.SCISSOR_TEST)
     state.depthMask(false)
+    state.colorMask(true, true, true, true)
+    state.clearColor(0, 0, 0, 0)
 }
 
 export function calcActiveVoxels(ctx: WebGLContext, cornerTex: Texture, gridDimensions: Vec3, isoValue: number) {
@@ -70,6 +73,7 @@ export function calcActiveVoxels(ctx: WebGLContext, cornerTex: Texture, gridDime
     activeVoxelsTex.define(width, height)
 
     const renderable = getActiveVoxelsRenderable(ctx, cornerTex, gridDimensions, isoValue)
+    ctx.state.currentRenderItemId = -1
 
     activeVoxelsTex.attachFramebuffer(framebuffer, 0)
     setRenderingDefaults(ctx)
@@ -78,5 +82,7 @@ export function calcActiveVoxels(ctx: WebGLContext, cornerTex: Texture, gridDime
 
     // console.log('at', readTexture(ctx, activeVoxelsTex))
 
+    gl.finish()
+
     return activeVoxelsTex
 }

src/mol-gl/compute/marching-cubes/isosurface.ts

@@ -77,8 +77,10 @@ function setRenderingDefaults(ctx: WebGLContext) {
     state.disable(gl.CULL_FACE)
     state.disable(gl.BLEND)
     state.disable(gl.DEPTH_TEST)
-    state.depthMask(false)
     state.enable(gl.SCISSOR_TEST)
+    state.depthMask(false)
+    state.colorMask(true, true, true, true)
+    state.clearColor(0, 0, 0, 0)
 }
 
 export function createIsosurfaceBuffers(ctx: WebGLContext, activeVoxelsBase: Texture, volumeData: Texture, histogramPyramid: HistogramPyramid, gridDimensions: Vec3, transform: Mat4, isoValue: number, vertexGroupTexture?: Texture, normalTexture?: Texture) {
@@ -87,11 +89,25 @@ export function createIsosurfaceBuffers(ctx: WebGLContext, activeVoxelsBase: Tex
 
     const framebuffer = framebufferCache.get(FramebufferName).value
 
-    if (!vertexGroupTexture) vertexGroupTexture = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
-    vertexGroupTexture.define(pyramidTex.width, pyramidTex.height)
+    let needsClear = false
+
+    if (!vertexGroupTexture) {
+        vertexGroupTexture = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
+        vertexGroupTexture.define(pyramidTex.width, pyramidTex.height)
+    } else if (vertexGroupTexture.width !== pyramidTex.width || vertexGroupTexture.height !== pyramidTex.height) {
+        vertexGroupTexture.define(pyramidTex.width, pyramidTex.height)
+    } else {
+        needsClear = true
+    }
 
-    if (!normalTexture) normalTexture = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
-    normalTexture.define(pyramidTex.width, pyramidTex.height)
+    if (!normalTexture) {
+        normalTexture = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
+        normalTexture.define(pyramidTex.width, pyramidTex.height)
+    } else if (normalTexture.width !== pyramidTex.width || normalTexture.height !== pyramidTex.height) {
+        normalTexture.define(pyramidTex.width, pyramidTex.height)
+    } else {
+        needsClear = true
+    }
 
     // const infoTex = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
     // infoTex.define(pyramidTex.width, pyramidTex.height)
@@ -109,6 +125,7 @@ export function createIsosurfaceBuffers(ctx: WebGLContext, activeVoxelsBase: Tex
     // indexTex.define(pyramidTex.width, pyramidTex.height)
 
     const renderable = getIsosurfaceRenderable(ctx, pyramidTex, activeVoxelsBase, volumeData, gridDimensions, transform, isoValue, levels, scale, count)
+    ctx.state.currentRenderItemId = -1
 
     vertexGroupTexture.attachFramebuffer(framebuffer, 0)
     normalTexture.attachFramebuffer(framebuffer, 1)
@@ -133,9 +150,12 @@ export function createIsosurfaceBuffers(ctx: WebGLContext, activeVoxelsBase: Tex
     setRenderingDefaults(ctx)
     gl.viewport(0, 0, pyramidTex.width, pyramidTex.height)
     gl.scissor(0, 0, pyramidTex.width, height)
+    if (needsClear) gl.clear(gl.COLOR_BUFFER_BIT)
     renderable.render()
     state.disable(gl.SCISSOR_TEST)
 
+    gl.finish()
+
     // const vgt = readTexture(ctx, vertexGroupTexture, pyramidTex.width, height)
     // console.log('vertexGroupTexture', vgt.array.subarray(0, 4 * count))
 

src/mol-gl/renderer.ts

@@ -64,6 +64,7 @@ namespace Renderer {
         const p = deepClone({ ...PD.getDefaultValues(RendererParams), ...props })
 
         const viewport = Viewport()
+        const bgColor = Color.toVec3Normalized(Vec3(), p.backgroundColor)
 
         const view = Mat4.clone(camera.view)
         const invView = Mat4.invert(Mat4.identity(), view)
@@ -98,23 +99,14 @@ namespace Renderer {
             uCameraPosition: ValueCell.create(Vec3.clone(camera.state.position)),
             uFogNear: ValueCell.create(camera.state.fogNear),
             uFogFar: ValueCell.create(camera.state.fogFar),
-            uFogColor: ValueCell.create(Color.toVec3Normalized(Vec3(), p.backgroundColor)),
+            uFogColor: ValueCell.create(bgColor),
 
             uPickingAlphaThreshold: ValueCell.create(p.pickingAlphaThreshold),
         }
         const globalUniformList = Object.entries(globalUniforms)
 
-        const [ bgRed, bgGreen, bgBlue ] = Color.toRgbNormalized(p.backgroundColor)
-        gl.clearColor(bgRed, bgGreen, bgBlue, 1.0)
-
-        if (props.backgroundColor !== undefined && props.backgroundColor !== p.backgroundColor) {
-            p.backgroundColor = props.backgroundColor
-            const [ r, g, b ] = Color.toRgbNormalized(p.backgroundColor)
-            gl.clearColor(r, g, b, 1.0)
-            ValueCell.update(globalUniforms.uFogColor, Vec3.set(globalUniforms.uFogColor.ref.value, r, g, b))
-        }
-
         let globalUniformsNeedUpdate = true
+
         const renderObject = (r: Renderable<RenderableValues & BaseValues>, variant: GraphicsRenderVariant) => {
             const program = r.getProgram(variant)
             if (r.state.visible) {
@@ -175,13 +167,19 @@ namespace Renderer {
             ValueCell.update(globalUniforms.uFogNear, camera.state.fogNear)
 
             globalUniformsNeedUpdate = true
+            state.currentRenderItemId = -1
 
             const { renderables } = scene
 
+            state.disable(gl.SCISSOR_TEST)
+            state.disable(gl.BLEND)
+            state.depthMask(true)
+            state.colorMask(true, true, true, true)
+            state.enable(gl.DEPTH_TEST)
+            state.clearColor(bgColor[0], bgColor[1], bgColor[2], 1.0)
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
+
             if (variant === 'draw') {
-                state.disable(gl.BLEND)
-                state.enable(gl.DEPTH_TEST)
-                state.depthMask(true)
                 for (let i = 0, il = renderables.length; i < il; ++i) {
                     const r = renderables[i]
                     if (r.state.opaque) renderObject(r, variant)
@@ -196,9 +194,6 @@ namespace Renderer {
                 }
             } else {
                 // picking
-                state.disable(gl.BLEND)
-                state.enable(gl.DEPTH_TEST)
-                state.depthMask(true)
                 for (let i = 0, il = renderables.length; i < il; ++i) {
                     renderObject(renderables[i], variant)
                 }
@@ -210,6 +205,7 @@ namespace Renderer {
         return {
             clear: () => {
                 state.depthMask(true)
+                state.clearColor(bgColor[0], bgColor[1], bgColor[2], 1.0)
                 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
             },
             render,
@@ -221,9 +217,8 @@ namespace Renderer {
                 }
                 if (props.backgroundColor !== undefined && props.backgroundColor !== p.backgroundColor) {
                     p.backgroundColor = props.backgroundColor
-                    const [ r, g, b ] = Color.toRgbNormalized(p.backgroundColor)
-                    gl.clearColor(r, g, b, 1.0)
-                    ValueCell.update(globalUniforms.uFogColor, Vec3.set(globalUniforms.uFogColor.ref.value, r, g, b))
+                    Color.toVec3Normalized(bgColor, p.backgroundColor)
+                    ValueCell.update(globalUniforms.uFogColor, Vec3.copy(globalUniforms.uFogColor.ref.value, bgColor))
                 }
                 if (props.lightIntensity !== undefined && props.lightIntensity !== p.lightIntensity) {
                     p.lightIntensity = props.lightIntensity

src/mol-gl/shader/gaussian-density.frag

@@ -28,8 +28,6 @@ varying float vRadius;
 #pragma glslify: texture3dFrom2dNearest = require(./utils/texture3d-from-2d-nearest.glsl, intMod=intMod, intDiv=intDiv, foo=foo) // foo=foo is a workaround for a bug in glslify
 
 uniform vec3 uBboxSize;
-uniform vec3 uBboxMin;
-uniform vec3 uBboxMax;
 uniform vec3 uGridDim;
 uniform float uCurrentSlice;
 uniform float uCurrentX;
@@ -56,7 +54,7 @@ void main() {
     #if defined(dCalcType_density)
         float radiusSq = vRadius * vRadius;
         float density = exp(-uAlpha * ((dist * dist) / radiusSq));
-        gl_FragColor = vec4(density);
+        gl_FragColor.a = density;
     #elif defined(dCalcType_minDistance)
         gl_FragColor.a = 10000.0 - dist;
         // gl_FragColor.a = 1.0 - encodeFloatLog(dist);

src/mol-gl/shader/gaussian-density.vert

@@ -20,7 +20,6 @@ varying float vRadius;
 
 uniform vec3 uBboxSize;
 uniform vec3 uBboxMin;
-uniform vec3 uBboxMax;
 uniform vec3 uGridDim;
 uniform float uCurrentSlice;
 
@@ -29,7 +28,7 @@ void main() {
     #if defined(dCalcType_groupId)
         vGroup = aGroup;
     #endif
-    float scale = max(uBboxSize.z, max(uBboxSize.x, uBboxSize.y));
+    float scale = max(uBboxSize.x, uBboxSize.y);
     gl_PointSize = (vRadius / scale) * max(uGridDim.x, uGridDim.y) * 6.0;
     vPosition = (aPosition - uBboxMin) / uBboxSize;
     gl_Position = vec4(vPosition * 2.0 - 1.0, 1.0);

src/mol-gl/webgl/context.ts

@@ -245,6 +245,7 @@ function createStats(): WebGLStats {
 export type WebGLState = {
     currentProgramId: number
     currentMaterialId: number
+    currentRenderItemId: number
 
     enable: (cap: number) => void
     disable: (cap: number) => void
@@ -252,6 +253,8 @@ export type WebGLState = {
     frontFace: (mode: number) => void
     cullFace: (mode: number) => void
     depthMask: (flag: boolean) => void
+    colorMask: (red: boolean, green: boolean, blue: boolean, alpha: boolean) => void
+    clearColor: (red: number, green: number, blue: number, alpha: number) => void
 
     blendFunc: (src: number, dst: number) => void
     blendFuncSeparate: (srcRGB: number, dstRGB: number, srcAlpha: number, dstAlpha: number) => void
@@ -266,6 +269,8 @@ function createState(gl: GLRenderingContext): WebGLState {
     let currentFrontFace = gl.getParameter(gl.FRONT_FACE)
     let currentCullFace = gl.getParameter(gl.CULL_FACE_MODE)
     let currentDepthMask = gl.getParameter(gl.DEPTH_WRITEMASK)
+    let currentColorMask = gl.getParameter(gl.COLOR_WRITEMASK)
+    let currentClearColor = gl.getParameter(gl.COLOR_CLEAR_VALUE)
 
     let currentBlendSrcRGB = gl.getParameter(gl.BLEND_SRC_RGB)
     let currentBlendDstRGB = gl.getParameter(gl.BLEND_DST_RGB)
@@ -278,6 +283,7 @@ function createState(gl: GLRenderingContext): WebGLState {
     return {
         currentProgramId: -1,
         currentMaterialId: -1,
+        currentRenderItemId: -1,
 
         enable: (cap: number) => {
             if (enabledCapabilities[cap] !== true ) {
@@ -310,6 +316,22 @@ function createState(gl: GLRenderingContext): WebGLState {
                 currentDepthMask = flag
             }
         },
+        colorMask: (red: boolean, green: boolean, blue: boolean, alpha: boolean) => {
+            if (red !== currentColorMask[0] || green !== currentColorMask[1] || blue !== currentColorMask[2] || alpha !== currentColorMask[3])
+            gl.colorMask(red, green, blue, alpha)
+            currentColorMask[0] = red
+            currentColorMask[1] = green
+            currentColorMask[2] = blue
+            currentColorMask[3] = alpha
+        },
+        clearColor: (red: number, green: number, blue: number, alpha: number) => {
+            if (red !== currentClearColor[0] || green !== currentClearColor[1] || blue !== currentClearColor[2] || alpha !== currentClearColor[3])
+            gl.clearColor(red, green, blue, alpha)
+            currentClearColor[0] = red
+            currentClearColor[1] = green
+            currentClearColor[2] = blue
+            currentClearColor[3] = alpha
+        },
 
         blendFunc: (src: number, dst: number) => {
             if (src !== currentBlendSrcRGB || dst !== currentBlendDstRGB || src !== currentBlendSrcAlpha || dst !== currentBlendDstAlpha) {

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

@@ -96,8 +96,8 @@ export function createGraphicsRenderItem(ctx: WebGLContext, drawMode: DrawMode,
 }
 
 export type ComputeRenderItem = RenderItem<keyof typeof ComputeRenderVariantDefines & string>
-export function createComputeRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCode: ShaderCode, schema: RenderableSchema, values: RenderableValues) {
-    return createRenderItem(ctx, drawMode, shaderCode, schema, values, -1, ComputeRenderVariantDefines)
+export function createComputeRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCode: ShaderCode, schema: RenderableSchema, values: RenderableValues, materialId = -1) {
+    return createRenderItem(ctx, drawMode, shaderCode, schema, values, materialId, ComputeRenderVariantDefines)
 }
 
 /**
@@ -164,25 +164,31 @@ export function createRenderItem<T extends RenderVariantDefines, S extends keyof
         render: (variant: S) => {
             if (drawCount === 0 || instanceCount === 0) return
             const program = programs[variant].value
-            const vertexArray = vertexArrays[variant]
-            if (program.id !== state.currentProgramId || program.id !== currentProgramId ||
-                materialId === -1 || materialId !== state.currentMaterialId
-            ) {
-                // console.log('program.id changed or materialId changed/-1', materialId)
-                if (program.id !== state.currentProgramId) program.use()
-                program.setUniforms(materialUniformValueEntries)
-                state.currentMaterialId = materialId
-                currentProgramId = program.id
-            }
-            program.setUniforms(uniformValueEntries)
-            program.bindTextures(textures)
-            if (vertexArrayObject && vertexArray) {
-                vertexArrayObject.bindVertexArray(vertexArray)
-                // need to bind elements buffer explicitly since it is not always recorded in the VAO
-                if (elementsBuffer) elementsBuffer.bind()
+            if (program.id === currentProgramId && state.currentRenderItemId === id) {
+                program.setUniforms(uniformValueEntries)
+                program.bindTextures(textures)
             } else {
-                if (elementsBuffer) elementsBuffer.bind()
-                program.bindAttributes(attributeBuffers)
+                const vertexArray = vertexArrays[variant]
+                if (program.id !== state.currentProgramId || program.id !== currentProgramId ||
+                    materialId === -1 || materialId !== state.currentMaterialId
+                ) {
+                    // console.log('program.id changed or materialId changed/-1', materialId)
+                    if (program.id !== state.currentProgramId) program.use()
+                    program.setUniforms(materialUniformValueEntries)
+                    state.currentMaterialId = materialId
+                    currentProgramId = program.id
+                }
+                program.setUniforms(uniformValueEntries)
+                program.bindTextures(textures)
+                if (vertexArrayObject && vertexArray) {
+                    vertexArrayObject.bindVertexArray(vertexArray)
+                    // need to bind elements buffer explicitly since it is not always recorded in the VAO
+                    if (elementsBuffer) elementsBuffer.bind()
+                } else {
+                    if (elementsBuffer) elementsBuffer.bind()
+                    program.bindAttributes(attributeBuffers)
+                }
+                state.currentRenderItemId = id
             }
             if (isDebugMode) {
                 checkFramebufferStatus(ctx.gl)

src/mol-math/geometry/gaussian-density/gpu.ts

@@ -30,12 +30,11 @@ export const GaussianDensitySchema = {
     uCurrentSlice: UniformSpec('f'),
     uCurrentX: UniformSpec('f'),
     uCurrentY: UniformSpec('f'),
-    uBboxMin: UniformSpec('v3'),
-    uBboxMax: UniformSpec('v3'),
-    uBboxSize: UniformSpec('v3'),
-    uGridDim: UniformSpec('v3'),
-    uGridTexDim: UniformSpec('v3'),
-    uAlpha: UniformSpec('f'),
+    uBboxMin: UniformSpec('v3', true),
+    uBboxSize: UniformSpec('v3', true),
+    uGridDim: UniformSpec('v3', true),
+    uGridTexDim: UniformSpec('v3', true),
+    uAlpha: UniformSpec('f', true),
     tMinDistanceTex: TextureSpec('texture', 'rgba', 'float', 'nearest'),
 
     dGridTexType: DefineSpec('string', ['2d', '3d']),
@@ -106,7 +105,7 @@ function calcGaussianDensityTexture2d(webgl: WebGLContext, position: PositionDat
 
     //
 
-    const { gl, framebufferCache } = webgl
+    const { gl, framebufferCache, state } = webgl
     const { uCurrentSlice, uCurrentX, uCurrentY } = renderable.values
 
     const framebuffer = framebufferCache.get(FramebufferName).value
@@ -116,8 +115,12 @@ function calcGaussianDensityTexture2d(webgl: WebGLContext, position: PositionDat
     if (!texture) texture = createTexture(webgl, 'image-float32', 'rgba', 'float', 'nearest')
     texture.define(texDimX, texDimY)
 
-    function render(fbTex: Texture) {
+    // console.log(renderable)
+
+    function render(fbTex: Texture, clear: boolean) {
+        state.currentRenderItemId = -1
         fbTex.attachFramebuffer(framebuffer, 0)
+        if (clear) gl.clear(gl.COLOR_BUFFER_BIT)
         let currCol = 0
         let currY = 0
         let currX = 0
@@ -126,25 +129,31 @@ function calcGaussianDensityTexture2d(webgl: WebGLContext, position: PositionDat
                 currCol -= texCols
                 currY += dy
                 currX = 0
+                ValueCell.update(uCurrentY, currY)
             }
-            gl.viewport(currX, currY, dx, dy)
-            ValueCell.update(uCurrentSlice, i)
+            // console.log({ i, currX, currY })
             ValueCell.update(uCurrentX, currX)
-            ValueCell.update(uCurrentY, currY)
+            ValueCell.update(uCurrentSlice, i)
+            gl.viewport(currX, currY, dx, dy)
             renderable.render()
             ++currCol
             currX += dx
         }
     }
 
-    setupMinDistanceRendering(webgl, renderable)
-    render(minDistanceTexture)
-
     setupDensityRendering(webgl, renderable)
-    render(texture)
+    render(texture, true)
+
+    setupMinDistanceRendering(webgl, renderable)
+    render(minDistanceTexture, true)
+    gl.finish()
 
     setupGroupIdRendering(webgl, renderable)
-    render(texture)
+    render(texture, false)
+
+    // printTexture(webgl, texture, 1)
+
+    gl.finish()
 
     return { texture, scale: Vec3.inverse(Vec3.zero(), delta), bbox: expandedBox, dim }
 }
@@ -246,7 +255,6 @@ function getGaussianDensityRenderable(webgl: WebGLContext, drawCount: number, po
         uCurrentX: ValueCell.create(0),
         uCurrentY: ValueCell.create(0),
         uBboxMin: ValueCell.create(box.min),
-        uBboxMax: ValueCell.create(box.max),
         uBboxSize: ValueCell.create(extent),
         uGridDim: ValueCell.create(dimensions),
         uGridTexDim: ValueCell.create(Vec3.create(texDimX, texDimY, 0)),
@@ -267,15 +275,18 @@ function getGaussianDensityRenderable(webgl: WebGLContext, drawCount: number, po
 function setRenderingDefaults(ctx: WebGLContext) {
     const { gl, state } = ctx
     state.disable(gl.CULL_FACE)
-    state.frontFace(gl.CCW)
-    state.cullFace(gl.BACK)
     state.enable(gl.BLEND)
+    state.disable(gl.DEPTH_TEST)
+    state.disable(gl.SCISSOR_TEST)
+    state.depthMask(false)
+    state.clearColor(0, 0, 0, 0)
 }
 
 function setupMinDistanceRendering(webgl: WebGLContext, renderable: ComputeRenderable<any>) {
     const { gl, state } = webgl
     ValueCell.update(renderable.values.dCalcType, 'minDistance')
     renderable.update()
+    state.colorMask(false, false, false, true)
     state.blendFunc(gl.ONE, gl.ONE)
     // the shader writes 1 - dist so we set blending to MAX
     state.blendEquation(webgl.extensions.blendMinMax.MAX)
@@ -285,6 +296,7 @@ function setupDensityRendering(webgl: WebGLContext, renderable: ComputeRenderabl
     const { gl, state } = webgl
     ValueCell.update(renderable.values.dCalcType, 'density')
     renderable.update()
+    state.colorMask(false, false, false, true)
     state.blendFunc(gl.ONE, gl.ONE)
     state.blendEquation(gl.FUNC_ADD)
 }
@@ -294,7 +306,8 @@ function setupGroupIdRendering(webgl: WebGLContext, renderable: ComputeRenderabl
     ValueCell.update(renderable.values.dCalcType, 'groupId')
     renderable.update()
     // overwrite color, don't change alpha
-    state.blendFuncSeparate(gl.ONE, gl.ZERO, gl.ZERO, gl.ONE)
+    state.colorMask(true, true, true, false)
+    state.blendFunc(gl.ONE, gl.ZERO)
     state.blendEquation(gl.FUNC_ADD)
 }
 

src/tests/browser/marching-cubes.ts

@@ -56,7 +56,7 @@ async function init() {
     }
     const isoValue = Math.exp(-props.smoothness)
 
-    if (false) {
+    if (true) {
         console.time('gpu gaussian2')
         const densityTextureData2 = await computeGaussianDensityTexture2d(position, box, radius, props, webgl).run()
         webgl.waitForGpuCommandsCompleteSync()
@@ -119,7 +119,7 @@ async function init() {
     //
 
     console.time('cpu gaussian')
-    const densityData = await computeGaussianDensity(position, box, radius, { ...props, useGpu: false }, webgl).run()
+    const densityData = await computeGaussianDensity(position, box, radius, { ...props, useGpu: true }, webgl).run()
     console.timeEnd('cpu gaussian')
     // console.log({ densityData })
 
@@ -134,7 +134,6 @@ async function init() {
     console.timeEnd('cpu mc')
     // console.log('surface', surface)
     Mesh.transformImmediate(surface, densityData.transform)
-    Mesh.computeNormalsImmediate(surface)
     const meshProps = { doubleSided: true, flatShaded: false, alpha: 1.0 }
     const meshValues = Mesh.Utils.createValuesSimple(surface, meshProps, Color(0x995511), 1)
     const meshState = Mesh.Utils.createRenderableState(meshProps)