framebuffer cache

src/apps/canvas/component/viewport.tsx

@@ -45,9 +45,9 @@ export class Viewport extends React.Component<ViewportProps, ViewportState> {
         viewer.input.resize.subscribe(() => this.handleResize())
 
         let prevLoci: Loci = EmptyLoci
-        viewer.input.move.subscribe(({x, y, inside, buttons}) => {
+        viewer.input.move.subscribe(async ({x, y, inside, buttons}) => {
             if (!inside || buttons) return
-            const p = viewer.identify(x, y)
+            const p = await viewer.identify(x, y)
             if (p) {
                 const loci = viewer.getLoci(p)
 

src/mol-canvas3d/viewer.ts

@@ -43,7 +43,7 @@ interface Viewer {
     requestDraw: (force?: boolean) => void
     animate: () => void
     pick: () => void
-    identify: (x: number, y: number) => PickingId | undefined
+    identify: (x: number, y: number) => Promise<PickingId | undefined>
     mark: (loci: Loci, action: MarkerAction) => void
     getLoci: (pickingId: PickingId) => Loci
 
@@ -216,7 +216,7 @@ namespace Viewer {
             pickDirty = false
         }
 
-        function identify(x: number, y: number): PickingId | undefined {
+        async function identify(x: number, y: number): Promise<PickingId | undefined> {
             if (pickDirty) return undefined
 
             isPicking = true
@@ -230,15 +230,15 @@ namespace Viewer {
             const yp = Math.round(y * pickScale)
 
             objectPickTarget.bind()
-            ctx.readPixels(xp, yp, 1, 1, buffer)
+            await ctx.readPixelsAsync(xp, yp, 1, 1, buffer)
             const objectId = decodeIdRGB(buffer[0], buffer[1], buffer[2])
 
             instancePickTarget.bind()
-            ctx.readPixels(xp, yp, 1, 1, buffer)
+            await ctx.readPixels(xp, yp, 1, 1, buffer)
             const instanceId = decodeIdRGB(buffer[0], buffer[1], buffer[2])
 
             groupPickTarget.bind()
-            ctx.readPixels(xp, yp, 1, 1, buffer)
+            await ctx.readPixels(xp, yp, 1, 1, buffer)
             const groupId = decodeIdRGB(buffer[0], buffer[1], buffer[2])
 
             isPicking = false

src/mol-gl/webgl/context.ts

@@ -7,6 +7,7 @@
 import { createProgramCache, ProgramCache } from './program'
 import { createShaderCache, ShaderCache } from './shader'
 import { GLRenderingContext, COMPAT_instanced_arrays, COMPAT_standard_derivatives, COMPAT_vertex_array_object, getInstancedArrays, getStandardDerivatives, getVertexArrayObject, isWebGL2, COMPAT_element_index_uint, getElementIndexUint, COMPAT_texture_float, getTextureFloat, COMPAT_texture_float_linear, getTextureFloatLinear, COMPAT_blend_minmax, getBlendMinMax, getFragDepth, COMPAT_frag_depth } from './compat';
+import { createFramebufferCache, FramebufferCache } from './framebuffer';
 
 export function getGLContext(canvas: HTMLCanvasElement, contextAttributes?: WebGLContextAttributes): GLRenderingContext | null {
     function getContext(contextId: 'webgl' | 'experimental-webgl' | 'webgl2') {
@@ -122,6 +123,7 @@ export interface Context {
 
     readonly shaderCache: ShaderCache
     readonly programCache: ProgramCache
+    readonly framebufferCache: FramebufferCache
 
     bufferCount: number
     framebufferCount: number
@@ -179,6 +181,7 @@ export function createContext(gl: GLRenderingContext): Context {
 
     const shaderCache = createShaderCache()
     const programCache = createProgramCache()
+    const framebufferCache = createFramebufferCache()
 
     const parameters = {
         maxTextureSize: gl.getParameter(gl.MAX_TEXTURE_SIZE),
@@ -197,8 +200,12 @@ export function createContext(gl: GLRenderingContext): Context {
             gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pbo)
             gl.bufferData(gl.PIXEL_PACK_BUFFER, width * height * 4, gl.STATIC_COPY)
             gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, 0)
+            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null)
+            // need to unbind/bind PBO before/after async awaiting the fence
             await fence(gl)
-            gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, buffer);
+            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pbo)
+            gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, buffer)
+            gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null)
         }
     } else {
         readPixelsAsync = async (x: number, y: number, width: number, height: number, buffer: Uint8Array) => {
@@ -223,6 +230,7 @@ export function createContext(gl: GLRenderingContext): Context {
 
         shaderCache,
         programCache,
+        framebufferCache,
 
         bufferCount: 0,
         framebufferCount: 0,
@@ -254,6 +262,7 @@ export function createContext(gl: GLRenderingContext): Context {
             unbindResources(gl)
             programCache.dispose()
             shaderCache.dispose()
+            framebufferCache.dispose()
             // TODO destroy buffers and textures
         }
     }

src/mol-gl/webgl/framebuffer.ts

@@ -6,6 +6,7 @@
 
 import { Context } from './context'
 import { idFactory } from 'mol-util/id-factory';
+import { ReferenceCache, createReferenceCache } from 'mol-util/reference-cache';
 
 const getNextFramebufferId = idFactory()
 
@@ -37,4 +38,14 @@ export function createFramebuffer (ctx: Context): Framebuffer {
             ctx.framebufferCount -= 1
         }
     }
+}
+
+export type FramebufferCache = ReferenceCache<Framebuffer, string, Context>
+
+export function createFramebufferCache(): FramebufferCache {
+    return createReferenceCache(
+        (name: string) => name,
+        (ctx: Context) => createFramebuffer(ctx),
+        (framebuffer: Framebuffer) => { framebuffer.destroy() }
+    )
 }

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

@@ -16,11 +16,13 @@ import { ValueCell, defaults } from 'mol-util'
 import { RenderableState, Renderable } from 'mol-gl/renderable'
 import { createRenderable, createGaussianDensityRenderObject } from 'mol-gl/render-object'
 import { Context, createContext, getGLContext } from 'mol-gl/webgl/context';
-import { createFramebuffer } from 'mol-gl/webgl/framebuffer';
 import { createTexture, Texture } from 'mol-gl/webgl/texture';
 import { GLRenderingContext, isWebGL2 } from 'mol-gl/webgl/compat';
 import { decodeIdRGB } from 'mol-geo/geometry/picking';
 
+/** name for shared framebuffer used for gpu gaussian surface operations */
+const FramebufferName = 'gaussian-density-gpu'
+
 export async function GaussianDensityGPU(ctx: RuntimeContext, position: PositionData, box: Box3D, radius: (index: number) => number, props: GaussianDensityProps): Promise<DensityData> {
     const webgl = defaults(props.webgl, getWebGLContext())
     // always use texture2d when the gaussian density needs to be downloaded from the GPU,
@@ -68,10 +70,10 @@ async function GaussianDensityTexture2d(ctx: RuntimeContext, webgl: Context, pos
 
     //
 
-    const { gl } = webgl
+    const { gl, framebufferCache } = webgl
     const { uCurrentSlice, uCurrentX, uCurrentY } = renderObject.values
 
-    const framebuffer = createFramebuffer(webgl)
+    const framebuffer = framebufferCache.get(webgl, FramebufferName).value
     framebuffer.bind()
     setRenderingDefaults(gl)
 
@@ -108,8 +110,6 @@ async function GaussianDensityTexture2d(ctx: RuntimeContext, webgl: Context, pos
     setupGroupIdRendering(webgl, renderable)
     render(texture)
 
-    framebuffer.destroy() // clean up
-
     await ctx.update({ message: 'gpu gaussian density calculation' });
     await webgl.waitForGpuCommandsComplete()
 
@@ -129,10 +129,10 @@ async function GaussianDensityTexture3d(ctx: RuntimeContext, webgl: Context, pos
 
     //
 
-    const { gl } = webgl
+    const { gl, framebufferCache } = webgl
     const { uCurrentSlice } = renderObject.values
 
-    const framebuffer = createFramebuffer(webgl)
+    const framebuffer = framebufferCache.get(webgl, FramebufferName).value
     framebuffer.bind()
     setRenderingDefaults(gl)
     gl.viewport(0, 0, dx, dy)
@@ -157,8 +157,6 @@ async function GaussianDensityTexture3d(ctx: RuntimeContext, webgl: Context, pos
     setupGroupIdRendering(webgl, renderable)
     render(texture)
 
-    framebuffer.destroy() // clean up
-
     await ctx.update({ message: 'gpu gaussian density calculation' });
     await webgl.waitForGpuCommandsComplete()
 
@@ -310,27 +308,10 @@ function getTexture2dSize(maxTexSize: number, gridDim: Vec3) {
     return { texDimX, texDimY, texRows, texCols }
 }
 
-  
-//   function pick_nonblocking_getBufferSubData() {
-//     gl.readPixels(mouse.x, pickingTexture.height - mouse.y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, 0);
-  
-//     fence().then(function() {
-//       stats1.begin();
-//       gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, readbackBuffer);
-//       stats1.end();
-//       gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
-  
-//       var id = (readbackBuffer[0] << 16) | (readbackBuffer[1] << 8) | (readbackBuffer[2]);
-//       render(id);
-//       gl.finish();
-//       stats2.end();
-//     });
-//   }
-
 async function fieldFromTexture2d(ctx: Context, texture: Texture, dim: Vec3) {
     console.log('isWebGL2', isWebGL2(ctx.gl))
     console.time('fieldFromTexture2d')
-    const { gl } = ctx
+    const { framebufferCache } = ctx
     const [ dx, dy, dz ] = dim
     const { width, height } = texture
     const fboTexCols = Math.floor(width / dx)
@@ -343,25 +324,10 @@ async function fieldFromTexture2d(ctx: Context, texture: Texture, dim: Vec3) {
 
     const image = new Uint8Array(width * height * 4)
 
-    const framebuffer = createFramebuffer(ctx)
+    const framebuffer = framebufferCache.get(ctx, FramebufferName).value
     framebuffer.bind()
-    texture.attachFramebuffer(framebuffer, 0)
-    
-    if (isWebGL2(gl)) {
-        const pbo = gl.createBuffer()
-        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pbo)
-        gl.bufferData(gl.PIXEL_PACK_BUFFER, width * height * 4, gl.STATIC_COPY)
-        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, 0)
-        await ctx.waitForGpuCommandsComplete()
-        gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, image);
-        gl.deleteBuffer(pbo)
-    } else {
-        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, image)
-    }
-    // gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, image)
-
-    framebuffer.destroy()
-    gl.finish()
+    texture.attachFramebuffer(framebuffer, 0)   
+    await ctx.readPixelsAsync(0, 0, width, height, image)
 
     let j = 0
     let tmpCol = 0
@@ -385,40 +351,4 @@ async function fieldFromTexture2d(ctx: Context, texture: Texture, dim: Vec3) {
     console.timeEnd('fieldFromTexture2d')
 
     return { field, idField }
-}
-
-// function fieldFromTexture3d(ctx: Context, texture: Texture, dim: Vec3) {
-//     console.time('fieldFromTexture3d')
-//     const { gl } = ctx
-//     const { width, height, depth } = texture
-
-//     const space = Tensor.Space(dim, [2, 1, 0], Float32Array)
-//     const data = space.create()
-//     const field = Tensor.create(space, data)
-//     const idData = space.create()
-//     const idField = Tensor.create(space, idData)
-
-//     const slice = new Uint8Array(width * height * 4)
-
-//     const framebuffer = createFramebuffer(ctx)
-//     framebuffer.bind()
-
-//     let j = 0
-//     for (let i = 0; i < depth; ++i) {
-//         texture.attachFramebuffer(framebuffer, 0, i)
-//         gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, slice)
-//         for (let iy = 0; iy < height; ++iy) {
-//             for (let ix = 0; ix < width; ++ix) {
-//                 const idx = 4 * (iy * width + ix)
-//                 data[j] = slice[idx + 3] / 255
-//                 idData[j] = decodeIdRGB(slice[idx], slice[idx + 1], slice[idx + 2])
-//                 ++j
-//             }
-//         }
-//     }
-
-//     framebuffer.destroy()
-//     console.timeEnd('fieldFromTexture3d')
-
-//     return { field, idField }
-// }
+}