better webgl context resource encapsulation

- added .namedComputeRenderables, .namedFramebuffer and .namedTexture
- use for shared resourced instead of storing in closure
- required to have multiple molstar webgl contexts simultaneously

src/extensions/alpha-orbitals/gpu/compute.ts

@@ -34,7 +34,8 @@ const AlphaOrbitalsSchema = {
     uMaxCoeffs: UniformSpec('i'),
     uLittleEndian: UniformSpec('b')
 };
-const AlphaOrbitalsShaderCode = ShaderCode('postprocessing', quad_vert, shader_frag);
+const AlphaOrbitalsName = 'alpha-orbitals';
+const AlphaOrbitalsShaderCode = ShaderCode(AlphaOrbitalsName, quad_vert, shader_frag);
 type AlphaOrbitalsRenderable = ComputeRenderable<Values<typeof AlphaOrbitalsSchema>>
 
 function createTextureData({
@@ -112,7 +113,7 @@ function createTextureData({
     return { nCenters: centerCount, nAlpha: baseCount, nCoeff: coeffCount, maxCoeffs, centers, info, alpha, coeff };
 }
 
-function getPostprocessingRenderable(ctx: WebGLContext, params: CollocationParams): AlphaOrbitalsRenderable {
+function createAlphaOrbitalsRenderable(ctx: WebGLContext, params: CollocationParams): AlphaOrbitalsRenderable {
     const data = createTextureData(params);
 
     const [nx, ny, nz] = params.grid.dimensions;
@@ -136,36 +137,65 @@ function getPostprocessingRenderable(ctx: WebGLContext, params: CollocationParam
     };
 
     const schema = { ...AlphaOrbitalsSchema };
+    if (!ctx.isWebGL2) {
+        // workaround for webgl1 limitation that loop counters need to be `const`
+        (schema.uNCenters as any) = DefineSpec('number');
+        (schema.uMaxCoeffs as any) = DefineSpec('number');
+    }
+
     const renderItem = createComputeRenderItem(ctx, 'triangles', AlphaOrbitalsShaderCode, schema, values);
 
     return createComputeRenderable(renderItem, values);
 }
 
-function normalizeParams(webgl: WebGLContext) {
-    if (!webgl.isWebGL2) {
-        // workaround for webgl1 limitation that loop counters need to be `const`
-        (AlphaOrbitalsSchema.uNCenters as any) = DefineSpec('number');
-        (AlphaOrbitalsSchema.uMaxCoeffs as any) = DefineSpec('number');
+function getAlphaOrbitalsRenderable(ctx: WebGLContext, params: CollocationParams): AlphaOrbitalsRenderable {
+    if (ctx.namedComputeRenderables[AlphaOrbitalsName]) {
+        const v = ctx.namedComputeRenderables[AlphaOrbitalsName].values;
+
+        const data = createTextureData(params);
+
+        const [nx, ny, nz] = params.grid.dimensions;
+        const width = Math.ceil(Math.sqrt(nx * ny * nz));
+
+        ValueCell.update(v.uDimensions, params.grid.dimensions);
+        ValueCell.update(v.uMin, params.grid.box.min);
+        ValueCell.update(v.uDelta, params.grid.delta);
+        ValueCell.updateIfChanged(v.uWidth, width);
+        ValueCell.updateIfChanged(v.uNCenters, data.nCenters);
+        ValueCell.updateIfChanged(v.uNAlpha, data.nAlpha);
+        ValueCell.updateIfChanged(v.uNCoeff, data.nCoeff);
+        ValueCell.updateIfChanged(v.uMaxCoeffs, data.maxCoeffs);
+        ValueCell.update(v.tCenters, { width: data.nCenters, height: 1, array: data.centers });
+        ValueCell.update(v.tInfo, { width: data.nCenters, height: 1, array: data.info });
+        ValueCell.update(v.tCoeff, { width: data.nCoeff, height: 1, array: data.coeff });
+        ValueCell.update(v.tAlpha, { width: data.nAlpha, height: 1, array: data.alpha });
+        ValueCell.updateIfChanged(v.uLittleEndian, isLittleEndian());
+
+        ctx.namedComputeRenderables[AlphaOrbitalsName].update();
+    } else {
+        ctx.namedComputeRenderables[AlphaOrbitalsName] = createAlphaOrbitalsRenderable(ctx, params);
     }
+    return ctx.namedComputeRenderables[AlphaOrbitalsName];
 }
 
 export function gpuComputeAlphaOrbitalsGridValues(webgl: WebGLContext, params: CollocationParams) {
     const [nx, ny, nz] = params.grid.dimensions;
-    normalizeParams(webgl);
-
-    const renderable = getPostprocessingRenderable(webgl, params);
+    const renderable = getAlphaOrbitalsRenderable(webgl, params);
     const width = renderable.values.uWidth.ref.value;
 
-    if (!webgl.computeTargets['alpha-oribtals']) {
-        webgl.computeTargets['alpha-oribtals'] = webgl.createRenderTarget(width, width, false, 'uint8', 'nearest');
-    } else {
-        webgl.computeTargets['alpha-oribtals'].setSize(width, width);
+    if (!webgl.namedFramebuffers[AlphaOrbitalsName]) {
+        webgl.namedFramebuffers[AlphaOrbitalsName] = webgl.resources.framebuffer();
     }
+    const framebuffer = webgl.namedFramebuffers[AlphaOrbitalsName];
 
-    const target = webgl.computeTargets['alpha-oribtals'];
+    if (!webgl.namedTextures[AlphaOrbitalsName]) {
+        webgl.namedTextures[AlphaOrbitalsName] = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+    }
+    webgl.namedTextures[AlphaOrbitalsName].define(width, width);
+    webgl.namedTextures[AlphaOrbitalsName].attachFramebuffer(framebuffer, 'color0');
 
     const { gl, state } = webgl;
-    target.bind();
+    framebuffer.bind();
     gl.viewport(0, 0, width, width);
     gl.scissor(0, 0, width, width);
     state.disable(gl.SCISSOR_TEST);
@@ -176,10 +206,7 @@ export function gpuComputeAlphaOrbitalsGridValues(webgl: WebGLContext, params: C
 
     const array = new Uint8Array(width * width * 4);
     webgl.readPixels(0, 0, width, width, array);
-    const floats = new Float32Array(array.buffer, array.byteOffset, nx * ny * nz);
-    renderable.dispose();
-
-    return floats;
+    return new Float32Array(array.buffer, array.byteOffset, nx * ny * nz);
 }
 
 export function canComputeAlphaOrbitalsOnGPU(webgl?: WebGLContext) {

src/mol-gl/webgl/context.ts

@@ -5,7 +5,7 @@
  */
 
 import { GLRenderingContext, isWebGL2 } from './compat';
-import { checkFramebufferStatus } from './framebuffer';
+import { checkFramebufferStatus, Framebuffer } from './framebuffer';
 import { Scheduler } from '../../mol-task';
 import { isDebugMode } from '../../mol-util/debug';
 import { createExtensions, WebGLExtensions } from './extensions';
@@ -15,7 +15,8 @@ import { WebGLResources, createResources } from './resources';
 import { RenderTarget, createRenderTarget } from './render-target';
 import { BehaviorSubject } from 'rxjs';
 import { now } from '../../mol-util/now';
-import { TextureFilter } from './texture';
+import { Texture, TextureFilter } from './texture';
+import { ComputeRenderable } from '../renderable';
 
 export function getGLContext(canvas: HTMLCanvasElement, contextAttributes?: WebGLContextAttributes): GLRenderingContext | null {
     function getContext(contextId: 'webgl' | 'experimental-webgl' | 'webgl2') {
@@ -191,8 +192,12 @@ export interface WebGLContext {
     setContextLost: () => void
     handleContextRestored: () => void
 
-    // A cache for compute targets, managed by the code that uses it
-    readonly computeTargets: { [name: string]: RenderTarget }
+    /** Cache for compute renderables, managed by consumers */
+    readonly namedComputeRenderables: { [name: string]: ComputeRenderable<any> }
+    /** Cache for frambuffers, managed by consumers */
+    readonly namedFramebuffers: { [name: string]: Framebuffer }
+    /** Cache for textures, managed by consumers */
+    readonly namedTextures: { [name: string]: Texture }
 
     createRenderTarget: (width: number, height: number, depth?: boolean, type?: 'uint8' | 'float32', filter?: TextureFilter) => RenderTarget
     unbindFramebuffer: () => void
@@ -264,8 +269,6 @@ export function createContext(gl: GLRenderingContext, props: Partial<{ pixelScal
 
     const renderTargets = new Set<RenderTarget>();
 
-    const computeTargets = Object.create(null);
-
     return {
         gl,
         isWebGL2: isWebGL2(gl),
@@ -283,7 +286,9 @@ export function createContext(gl: GLRenderingContext, props: Partial<{ pixelScal
         get maxRenderbufferSize () { return parameters.maxRenderbufferSize; },
         get maxDrawBuffers () { return parameters.maxDrawBuffers; },
 
-        computeTargets,
+        namedComputeRenderables: Object.create(null),
+        namedFramebuffers: Object.create(null),
+        namedTextures: Object.create(null),
 
         get isContextLost () {
             return isContextLost || gl.isContextLost();

src/mol-gl/webgl/texture.ts

@@ -197,6 +197,8 @@ export function createTexture(gl: GLRenderingContext, extensions: WebGLExtension
     let destroyed = false;
 
     function define(_width: number, _height: number, _depth?: number) {
+        if (width === _width && height === _height && depth === (_depth || 0)) return;
+
         width = _width, height = _height, depth = _depth || 0;
         gl.bindTexture(target, texture);
         if (target === gl.TEXTURE_2D) {

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

@@ -13,7 +13,7 @@ import { Vec3, Tensor, Mat4, Vec2 } from '../../linear-algebra';
 import { ValueCell } from '../../../mol-util';
 import { createComputeRenderable, ComputeRenderable } from '../../../mol-gl/renderable';
 import { WebGLContext } from '../../../mol-gl/webgl/context';
-import { Texture } from '../../../mol-gl/webgl/texture';
+import { Texture, TextureFilter, TextureFormat, TextureKind, TextureType } from '../../../mol-gl/webgl/texture';
 import { decodeFloatRGB } from '../../../mol-util/float-packing';
 import { ShaderCode } from '../../../mol-gl/shader-code';
 import { createComputeRenderItem } from '../../../mol-gl/webgl/render-item';
@@ -48,21 +48,32 @@ export const GaussianDensitySchema = {
 };
 type GaussianDensityValues = Values<typeof GaussianDensitySchema>
 type GaussianDensityRenderable = ComputeRenderable<GaussianDensityValues>
-
+const GaussianDensityName = 'gaussian-density';
 const GaussianDensityShaderCode = ShaderCode(
-    'gaussian-density', gaussian_density_vert, gaussian_density_frag
+    GaussianDensityName, gaussian_density_vert, gaussian_density_frag
 );
 
-let _tmpTexture: Texture | undefined = undefined;
+function getFramebuffer(webgl: WebGLContext): Framebuffer {
+    if (!webgl.namedFramebuffers[GaussianDensityName]) {
+        webgl.namedFramebuffers[GaussianDensityName] = webgl.resources.framebuffer();
+    }
+    return webgl.namedFramebuffers[GaussianDensityName];
+}
+
+function getTexture(name: string, webgl: WebGLContext, kind: TextureKind, format: TextureFormat, type: TextureType, filter: TextureFilter): Texture {
+    const _name = `${GaussianDensityName}-${name}`;
+    if (!webgl.namedTextures[_name]) {
+        webgl.namedTextures[_name] = webgl.resources.texture(kind, format, type, filter);
+    }
+    return webgl.namedTextures[_name];
+}
 
 export function GaussianDensityGPU(position: PositionData, box: Box3D, radius: (index: number) => number, props: GaussianDensityGPUProps, webgl: WebGLContext): DensityData {
     // always use texture2d when the gaussian density needs to be downloaded from the GPU,
     // it's faster than texture3d
     // console.time('GaussianDensityTexture2d')
-    if (!_tmpTexture) {
-        _tmpTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
-    }
-    const { scale, bbox, texture, gridDim, gridTexDim } = calcGaussianDensityTexture2d(webgl, position, box, radius, props, _tmpTexture);
+    const tmpTexture = getTexture('tmp', webgl, 'image-uint8', 'rgba', 'ubyte', 'linear');
+    const { scale, bbox, texture, gridDim, gridTexDim } = calcGaussianDensityTexture2d(webgl, position, box, radius, props, tmpTexture);
     // webgl.waitForGpuCommandsCompleteSync()
     // console.timeEnd('GaussianDensityTexture2d')
     const { field, idField } = fieldFromTexture2d(webgl, texture, gridDim, gridTexDim);
@@ -106,9 +117,6 @@ type GaussianDensityTextureData = {
     gridTexScale: Vec2
 }
 
-let _tmpFramebuffer: Framebuffer | undefined = undefined;
-let _minDistanceTexture2d: Texture | undefined = undefined;
-
 function calcGaussianDensityTexture2d(webgl: WebGLContext, position: PositionData, box: Box3D, radius: (index: number) => number, props: GaussianDensityGPUProps, texture?: Texture): GaussianDensityTextureData {
     // console.log('2d');
     const { smoothness, resolution } = props;
@@ -121,31 +129,22 @@ function calcGaussianDensityTexture2d(webgl: WebGLContext, position: PositionDat
     const gridTexScale = Vec2.create(texDimX / texDimX, texDimY / texDimY);
     const radiusFactor = maxRadius * 2;
 
-    if (!_minDistanceTexture2d) {
-        _minDistanceTexture2d = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
-        _minDistanceTexture2d.define(texDimX, texDimY);
-    } else if (_minDistanceTexture2d.getWidth() !== texDimX || _minDistanceTexture2d.getHeight() !== texDimY) {
-        _minDistanceTexture2d.define(texDimX, texDimY);
-    }
+    const minDistTex = getTexture('min-dist-2d', webgl, 'image-uint8', 'rgba', 'ubyte', 'nearest');
+    minDistTex.define(texDimX, texDimY);
 
-    const renderable = getGaussianDensityRenderable(webgl, drawCount, positions, radii, groups, _minDistanceTexture2d, expandedBox, dim, gridTexDim, gridTexScale, smoothness, resolution, radiusFactor);
+    const renderable = getGaussianDensityRenderable(webgl, drawCount, positions, radii, groups, minDistTex, expandedBox, dim, gridTexDim, gridTexScale, smoothness, resolution, radiusFactor);
 
     //
 
     const { gl, resources, state } = webgl;
     const { uCurrentSlice, uCurrentX, uCurrentY } = renderable.values;
 
-    if (!_tmpFramebuffer) _tmpFramebuffer = resources.framebuffer();
-    const framebuffer = _tmpFramebuffer;
+    const framebuffer = getFramebuffer(webgl);
     framebuffer.bind();
     setRenderingDefaults(webgl);
 
-    if (!texture) {
-        texture = resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
-        texture.define(texDimX, texDimY);
-    } else if (texture.getWidth() !== texDimX || texture.getHeight() !== texDimY) {
-        texture.define(texDimX, texDimY);
-    }
+    if (!texture) texture = resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
+    texture.define(texDimX, texDimY);
 
     // console.log(renderable)
 
@@ -178,7 +177,7 @@ function calcGaussianDensityTexture2d(webgl: WebGLContext, position: PositionDat
     render(texture, true);
 
     setupMinDistanceRendering(webgl, renderable);
-    render(_minDistanceTexture2d, true);
+    render(minDistTex, true);
 
     setupGroupIdRendering(webgl, renderable);
     render(texture, false);
@@ -188,8 +187,6 @@ function calcGaussianDensityTexture2d(webgl: WebGLContext, position: PositionDat
     return { texture, scale, bbox: expandedBox, gridDim: dim, gridTexDim, gridTexScale };
 }
 
-let _minDistanceTexture3d: Texture | undefined = undefined;
-
 function calcGaussianDensityTexture3d(webgl: WebGLContext, position: PositionData, box: Box3D, radius: (index: number) => number, props: GaussianDensityGPUProps, texture?: Texture): GaussianDensityTextureData {
     // console.log('3d');
     const { gl, resources, state } = webgl;
@@ -198,33 +195,25 @@ function calcGaussianDensityTexture3d(webgl: WebGLContext, position: PositionDat
     const { drawCount, positions, radii, groups, scale, expandedBox, dim, maxRadius } = prepareGaussianDensityData(position, box, radius, props);
     const [ dx, dy, dz ] = dim;
 
-    if (!_minDistanceTexture3d) {
-        _minDistanceTexture3d = resources.texture('volume-uint8', 'rgba', 'ubyte', 'nearest');
-        _minDistanceTexture3d.define(dx, dy, dz);
-    } else if (_minDistanceTexture3d.getWidth() !== dx || _minDistanceTexture3d.getHeight() !== dy || _minDistanceTexture3d.getDepth() !== dz) {
-        _minDistanceTexture3d.define(dx, dy, dz);
-    }
+    const minDistTex = getTexture('min-dist-3d', webgl, 'volume-uint8', 'rgba', 'ubyte', 'nearest');
+    minDistTex.define(dx, dy, dz);
 
     const gridTexScale = Vec2.create(1, 1);
     const radiusFactor = maxRadius * 2;
 
-    const renderable = getGaussianDensityRenderable(webgl, drawCount, positions, radii, groups, _minDistanceTexture3d, expandedBox, dim, dim, gridTexScale, smoothness, resolution, radiusFactor);
+    const renderable = getGaussianDensityRenderable(webgl, drawCount, positions, radii, groups, minDistTex, expandedBox, dim, dim, gridTexScale, smoothness, resolution, radiusFactor);
 
     //
 
     const { uCurrentSlice } = renderable.values;
 
-    const framebuffer = resources.framebuffer();
+    const framebuffer = getFramebuffer(webgl);
     framebuffer.bind();
     setRenderingDefaults(webgl);
     gl.viewport(0, 0, dx, dy);
 
-    if (!texture) {
-        texture = resources.texture('volume-uint8', 'rgba', 'ubyte', 'linear');
-        texture.define(dx, dy, dz);
-    } else if (texture.getWidth() !== dx || texture.getHeight() !== dy || texture.getDepth() !== dz) {
-        texture.define(dx, dy, dz);
-    }
+    if (!texture) texture = resources.texture('volume-uint8', 'rgba', 'ubyte', 'linear');
+    texture.define(dx, dy, dz);
 
     function render(fbTex: Texture, clear: boolean) {
         state.currentRenderItemId = -1;
@@ -241,7 +230,7 @@ function calcGaussianDensityTexture3d(webgl: WebGLContext, position: PositionDat
     render(texture, true);
 
     setupMinDistanceRendering(webgl, renderable);
-    render(_minDistanceTexture3d, true);
+    render(minDistTex, true);
 
     setupGroupIdRendering(webgl, renderable);
     render(texture, false);
@@ -287,13 +276,11 @@ function prepareGaussianDensityData(position: PositionData, box: Box3D, radius:
     return { drawCount: n, positions, radii, groups, scale, expandedBox, dim, maxRadius };
 }
 
-let _GaussianDensityRenderable: GaussianDensityRenderable | undefined = undefined;
-
 function getGaussianDensityRenderable(webgl: WebGLContext, drawCount: number, positions: Float32Array, radii: Float32Array, groups: Float32Array, minDistanceTexture: Texture, box: Box3D, gridDim: Vec3, gridTexDim: Vec3, gridTexScale: Vec2, smoothness: number, resolution: number, radiusFactor: number) {
     // console.log('radiusFactor', radiusFactor);
-    if (_GaussianDensityRenderable) {
+    if (webgl.namedComputeRenderables[GaussianDensityName]) {
         const extent = Vec3.sub(Vec3(), box.max, box.min);
-        const v = _GaussianDensityRenderable.values;
+        const v = webgl.namedComputeRenderables[GaussianDensityName].values;
 
         ValueCell.updateIfChanged(v.drawCount, drawCount);
         ValueCell.updateIfChanged(v.instanceCount, 1);
@@ -318,14 +305,14 @@ function getGaussianDensityRenderable(webgl: WebGLContext, drawCount: number, po
         ValueCell.updateIfChanged(v.dGridTexType, minDistanceTexture.getDepth() > 0 ? '3d' : '2d');
         ValueCell.updateIfChanged(v.dCalcType, 'density');
 
-        _GaussianDensityRenderable.update();
+        webgl.namedComputeRenderables[GaussianDensityName].update();
     } else {
-        _GaussianDensityRenderable = _getGaussianDensityRenderable(webgl, drawCount, positions, radii, groups, minDistanceTexture, box, gridDim, gridTexDim, gridTexScale, smoothness, resolution, radiusFactor);
+        webgl.namedComputeRenderables[GaussianDensityName] = createGaussianDensityRenderable(webgl, drawCount, positions, radii, groups, minDistanceTexture, box, gridDim, gridTexDim, gridTexScale, smoothness, resolution, radiusFactor);
     }
-    return _GaussianDensityRenderable;
+    return webgl.namedComputeRenderables[GaussianDensityName];
 }
 
-function _getGaussianDensityRenderable(webgl: WebGLContext, drawCount: number, positions: Float32Array, radii: Float32Array, groups: Float32Array, minDistanceTexture: Texture, box: Box3D, gridDim: Vec3, gridTexDim: Vec3, gridTexScale: Vec2, smoothness: number, resolution: number, radiusFactor: number) {
+function createGaussianDensityRenderable(webgl: WebGLContext, drawCount: number, positions: Float32Array, radii: Float32Array, groups: Float32Array, minDistanceTexture: Texture, box: Box3D, gridDim: Vec3, gridTexDim: Vec3, gridTexScale: Vec2, smoothness: number, resolution: number, radiusFactor: number) {
     const extent = Vec3.sub(Vec3(), box.max, box.min);
 
     const values: GaussianDensityValues = {
@@ -423,7 +410,6 @@ function getTexture2dSize(gridDim: Vec3) {
 
 export function fieldFromTexture2d(ctx: WebGLContext, texture: Texture, dim: Vec3, texDim: Vec3) {
     // console.time('fieldFromTexture2d')
-    const { resources } = ctx;
     const [ dx, dy, dz ] = dim;
     const [ width, height ] = texDim;
     const fboTexCols = Math.floor(width / dx);
@@ -436,7 +422,7 @@ export function fieldFromTexture2d(ctx: WebGLContext, texture: Texture, dim: Vec
 
     const image = new Uint8Array(width * height * 4);
 
-    const framebuffer = resources.framebuffer();
+    const framebuffer = getFramebuffer(ctx);
     framebuffer.bind();
     texture.attachFramebuffer(framebuffer, 0);
     ctx.readPixels(0, 0, width, height, image);