vao update improvements

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

@@ -216,11 +216,20 @@ export function createRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCo
             }
 
             if (valueChanges.attributes || valueChanges.defines || valueChanges.elements) {
-                // console.log('program/defines or buffers changed, rebuild vaos')
-                Object.keys(RenderVariantDefines).forEach(k => {
-                    deleteVertexArray(ctx, vertexArrays[k])
-                    vertexArrays[k] = createVertexArray(ctx, programs[k].value, attributeBuffers, elementsBuffer)
-                })
+                // console.log('program/defines or buffers changed, update vaos')
+                const { vertexArrayObject } = ctx.extensions
+                if (vertexArrayObject) {
+                    Object.keys(RenderVariantDefines).forEach(k => {
+                        vertexArrayObject.bindVertexArray(vertexArrays[k])
+                        if (elementsBuffer && (valueChanges.defines || valueChanges.elements)) {
+                            elementsBuffer.bind()
+                        }
+                        if (valueChanges.attributes || valueChanges.defines) {
+                            programs[k].value.bindAttributes(attributeBuffers)
+                        }
+                        vertexArrayObject.bindVertexArray(null)
+                    })
+                }
             }
 
             valueChanges.textures = false

src/mol-gl/webgl/vertex-array.ts

@@ -17,11 +17,21 @@ export function createVertexArray(ctx: WebGLContext, program: Program, attribute
         if (elementsBuffer) elementsBuffer.bind()
         program.bindAttributes(attributeBuffers)
         ctx.vaoCount += 1
-        vertexArrayObject.bindVertexArray(null!)
+        vertexArrayObject.bindVertexArray(null)
     }
     return vertexArray
 }
 
+export function updateVertexArray(ctx: WebGLContext, vertexArray: WebGLVertexArrayObject | null, program: Program, attributeBuffers: AttributeBuffers, elementsBuffer?: ElementsBuffer) {
+    const { vertexArrayObject } = ctx.extensions
+    if (vertexArrayObject && vertexArray) {
+        vertexArrayObject.bindVertexArray(vertexArray)
+        if (elementsBuffer) elementsBuffer.bind()
+        program.bindAttributes(attributeBuffers)
+        vertexArrayObject.bindVertexArray(null)
+    }
+}
+
 export function deleteVertexArray(ctx: WebGLContext, vertexArray: WebGLVertexArrayObject | null) {
     const { vertexArrayObject } = ctx.extensions
     if (vertexArrayObject && vertexArray) {