wip

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

@@ -11,7 +11,7 @@ import { Values, TextureSpec, UniformSpec } from '../../renderable/schema';
 import { Texture, createTexture } from 'mol-gl/webgl/texture';
 import { ShaderCode } from 'mol-gl/shader-code';
 import { ValueCell } from 'mol-util';
-import { QuadSchema, QuadValues } from '../util';
+import { QuadSchema, QuadValues, printTexture } from '../util';
 import { Vec2 } from 'mol-math/linear-algebra';
 import { getHistopyramidSum } from './sum';
 import { Framebuffer, createFramebuffer } from 'mol-gl/webgl/framebuffer';
@@ -100,7 +100,7 @@ export interface HistogramPyramid {
 export function createHistogramPyramid(ctx: WebGLContext, inputTexture: Texture): HistogramPyramid {
     const { gl, framebufferCache } = ctx
 
-    // printTexture(ctx, inputTexture, 2)
+    printTexture(ctx, inputTexture, 2)
     const inputTextureMaxDim = Math.max(inputTexture.width, inputTexture.height)
 
     // This part set the levels
@@ -173,7 +173,7 @@ export function createHistogramPyramid(ctx: WebGLContext, inputTexture: Texture)
     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)
+    console.log('height', height, 'finalCount', finalCount, 'scale', scale)
 
 
     return {

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

@@ -11,7 +11,7 @@ import { Values, TextureSpec, UniformSpec } from '../../renderable/schema';
 import { Texture, createTexture } from 'mol-gl/webgl/texture';
 import { ShaderCode } from 'mol-gl/shader-code';
 import { ValueCell } from 'mol-util';
-import { Vec3 } from 'mol-math/linear-algebra';
+import { Vec3, Vec2 } from 'mol-math/linear-algebra';
 import { QuadSchema, QuadValues } from '../util';
 import { getTriCount } from './tables';
 
@@ -27,9 +27,11 @@ const ActiveVoxelsSchema = {
 
     uGridDim: UniformSpec('v3'),
     uGridTexDim: UniformSpec('v3'),
+
+    uScale: UniformSpec('v2'),
 }
 
-function getActiveVoxelsRenderable(ctx: WebGLContext, volumeData: Texture, gridDimensions: Vec3, isoValue: number) {
+function getActiveVoxelsRenderable(ctx: WebGLContext, volumeData: Texture, gridDim: Vec3, gridTexDim: Vec3, isoValue: number, scale: Vec2) {
     const values: Values<typeof ActiveVoxelsSchema> = {
         ...QuadValues,
 
@@ -37,8 +39,10 @@ function getActiveVoxelsRenderable(ctx: WebGLContext, volumeData: Texture, gridD
         tVolumeData: ValueCell.create(volumeData),
         uIsoValue: ValueCell.create(isoValue),
 
-        uGridDim: ValueCell.create(gridDimensions),
-        uGridTexDim: ValueCell.create(Vec3.create(volumeData.width, volumeData.height, 0)),
+        uGridDim: ValueCell.create(gridDim),
+        uGridTexDim: ValueCell.create(gridTexDim),
+
+        uScale: ValueCell.create(scale),
     }
 
     const schema = { ...ActiveVoxelsSchema }
@@ -62,7 +66,7 @@ function setRenderingDefaults(ctx: WebGLContext) {
     state.clearColor(0, 0, 0, 0)
 }
 
-export function calcActiveVoxels(ctx: WebGLContext, cornerTex: Texture, gridDimensions: Vec3, isoValue: number) {
+export function calcActiveVoxels(ctx: WebGLContext, cornerTex: Texture, gridDim: Vec3, gridTexDim: Vec3, isoValue: number, gridScale: Vec2) {
     const { gl, framebufferCache } = ctx
     const { width, height } = cornerTex
 
@@ -72,7 +76,7 @@ export function calcActiveVoxels(ctx: WebGLContext, cornerTex: Texture, gridDime
     const activeVoxelsTex = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
     activeVoxelsTex.define(width, height)
 
-    const renderable = getActiveVoxelsRenderable(ctx, cornerTex, gridDimensions, isoValue)
+    const renderable = getActiveVoxelsRenderable(ctx, cornerTex, gridDim, gridTexDim, isoValue, gridScale)
     ctx.state.currentRenderItemId = -1
 
     activeVoxelsTex.attachFramebuffer(framebuffer, 0)
@@ -80,6 +84,7 @@ export function calcActiveVoxels(ctx: WebGLContext, cornerTex: Texture, gridDime
     gl.viewport(0, 0, width, height)
     renderable.render()
 
+    console.log('gridScale', gridScale)
     // console.log('at', readTexture(ctx, activeVoxelsTex))
 
     gl.finish()

src/mol-gl/compute/util.ts

@@ -8,7 +8,8 @@ import { WebGLContext } from 'mol-gl/webgl/context';
 import { Texture } from 'mol-gl/webgl/texture';
 import { printTextureImage } from 'mol-gl/renderable/util';
 import { defaults, ValueCell } from 'mol-util';
-import { ValueSpec, AttributeSpec } from 'mol-gl/renderable/schema';
+import { ValueSpec, AttributeSpec, UniformSpec } from 'mol-gl/renderable/schema';
+import { Vec2 } from 'mol-math/linear-algebra';
 
 export const QuadPositions = new Float32Array([
      1.0,  1.0,  -1.0,  1.0,  -1.0, -1.0, // First triangle
@@ -18,13 +19,15 @@ export const QuadPositions = new Float32Array([
 export const QuadSchema = {
     drawCount: ValueSpec('number'),
     instanceCount: ValueSpec('number'),
-    aPosition: AttributeSpec('float32', 2, 0)
+    aPosition: AttributeSpec('float32', 2, 0),
+    uScale: UniformSpec('v2'),
 }
 
 export const QuadValues = {
     drawCount: ValueCell.create(6),
     instanceCount: ValueCell.create(1),
     aPosition: ValueCell.create(QuadPositions),
+    uScale: ValueCell.create(Vec2.create(1, 1)),
 }
 
 //

src/mol-gl/shader/marching-cubes/active-voxels.frag

@@ -62,4 +62,7 @@ void main(void) {
     // get total triangles to generate for calculated MC case from triCount texture
     float totalTrianglesToGenerate = texture2D(tTriCount, vec2(intMod(c, 16.), floor(c / 16.)) / 16.).a;
     gl_FragColor = vec4(vec3(floor(totalTrianglesToGenerate * 255.0 + 0.5) * 3.0), c);
+
+    // gl_FragColor = vec4(vCoordinate * 255.0, 0.0, 255.0);
+    // gl_FragColor = vec4(250.0, 0.0, 0.0, 255.0);
 }
\ No newline at end of file

src/mol-gl/shader/quad.vert

@@ -4,16 +4,20 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-precision mediump float;
+precision highp float;
 
 attribute vec2 aPosition;
 
 // the output UV coordinate for each fragment
 varying vec2 vCoordinate;
 
+uniform vec2 uScale;
+
 const vec2 scale = vec2(0.5, 0.5);
 
 void main(void) {
-    vCoordinate  = aPosition * scale + scale; // scale vertex attribute to [0,1] range
-    gl_Position = vec4(aPosition, 0.0, 1.0);
+    vec2 s = scale * uScale;
+    vec2 position = aPosition * uScale - vec2(1.0, 1.0) + uScale;
+    vCoordinate = position * s + s; // scale vertex attribute to [0,1] range
+    gl_Position = vec4(position, 0.0, 1.0);
 }
\ No newline at end of file

src/mol-math/geometry/common.ts

@@ -6,7 +6,7 @@
  */
 
 import { OrderedSet } from 'mol-data/int'
-import { Mat4, Tensor, Vec3 } from '../linear-algebra';
+import { Mat4, Tensor, Vec3, Vec2 } from '../linear-algebra';
 import { Box3D } from '../geometry';
 import { Texture } from 'mol-gl/webgl/texture';
 
@@ -30,7 +30,9 @@ export type DensityTextureData = {
     transform: Mat4,
     texture: Texture,
     bbox: Box3D,
-    gridDimension: Vec3
+    gridDim: Vec3,
+    gridTexDim: Vec3
+    gridTexScale: Vec2
 }
 
 export function fillGridDim(length: number, start: number, step: number) {

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

@@ -9,7 +9,7 @@ import { PositionData, DensityData, DensityTextureData } from '../common'
 import { Box3D } from '../../geometry'
 import { GaussianDensityGPUProps } from '../gaussian-density'
 import { OrderedSet } from 'mol-data/int'
-import { Vec3, Tensor, Mat4 } from '../../linear-algebra'
+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';
@@ -54,7 +54,7 @@ export function GaussianDensityGPU(position: PositionData, box: Box3D, radius: (
     // always use texture2d when the gaussian density needs to be downloaded from the GPU,
     // it's faster than texture3d
     // console.time('GaussianDensityTexture2d')
-    const { scale, bbox, texture, dim } = calcGaussianDensityTexture2d(webgl, position, box, radius, props)
+    const { scale, bbox, texture, gridDim: dim } = calcGaussianDensityTexture2d(webgl, position, box, radius, props)
     // webgl.waitForGpuCommandsCompleteSync()
     // console.timeEnd('GaussianDensityTexture2d')
     const { field, idField } = fieldFromTexture2d(webgl, texture, dim)
@@ -76,8 +76,8 @@ export function GaussianDensityTexture3d(webgl: WebGLContext, position: Position
     return finalizeGaussianDensityTexture(calcGaussianDensityTexture3d(webgl, position, box, radius, props, oldTexture))
 }
 
-function finalizeGaussianDensityTexture({ texture, scale, bbox, dim }: GaussianDensityTextureData): DensityTextureData {
-    return { transform: getTransform(scale, bbox), texture, bbox, gridDimension: dim }
+function finalizeGaussianDensityTexture({ texture, scale, bbox, gridDim, gridTexDim, gridTexScale }: GaussianDensityTextureData): DensityTextureData {
+    return { transform: getTransform(scale, bbox), texture, bbox, gridDim, gridTexDim, gridTexScale }
 }
 
 function getTransform(scale: Vec3, bbox: Box3D) {
@@ -89,19 +89,30 @@ function getTransform(scale: Vec3, bbox: Box3D) {
 
 //
 
-type GaussianDensityTextureData = { texture: Texture, scale: Vec3, bbox: Box3D, dim: Vec3}
+type GaussianDensityTextureData = {
+    texture: Texture,
+    scale: Vec3,
+    bbox: Box3D,
+    gridDim: Vec3,
+    gridTexDim: Vec3
+    gridTexScale: Vec2
+}
 
 function calcGaussianDensityTexture2d(webgl: WebGLContext, position: PositionData, box: Box3D, radius: (index: number) => number, props: GaussianDensityGPUProps, texture?: Texture): GaussianDensityTextureData {
     const { smoothness } = props
 
     const { drawCount, positions, radii, groups, delta, expandedBox, dim } = prepareGaussianDensityData(position, box, radius, props)
     const [ dx, dy, dz ] = dim
-    const { texDimX, texDimY, texCols } = getTexture2dSize(dim)
+    const { texDimX, texDimY, texCols, powerOfTwoSize } = getTexture2dSize(dim)
+    console.log({ texDimX, texDimY, texCols, powerOfTwoSize })
+    // const gridTexDim = Vec3.create(powerOfTwoSize, powerOfTwoSize, 0)
+    const gridTexDim = Vec3.create(texDimX, texDimY, 0)
+    const gridTexScale = Vec2.create(texDimX / powerOfTwoSize, texDimY / powerOfTwoSize)
 
     const minDistanceTexture = createTexture(webgl, 'image-float32', 'rgba', 'float', 'nearest')
-    minDistanceTexture.define(texDimX, texDimY)
+    minDistanceTexture.define(powerOfTwoSize, powerOfTwoSize)
 
-    const renderable = getGaussianDensityRenderable(webgl, drawCount, positions, radii, groups, minDistanceTexture, expandedBox, dim, smoothness)
+    const renderable = getGaussianDensityRenderable(webgl, drawCount, positions, radii, groups, minDistanceTexture, expandedBox, dim, gridTexDim, smoothness)
 
     //
 
@@ -113,7 +124,7 @@ function calcGaussianDensityTexture2d(webgl: WebGLContext, position: PositionDat
     setRenderingDefaults(webgl)
 
     if (!texture) texture = createTexture(webgl, 'image-float32', 'rgba', 'float', 'nearest')
-    texture.define(texDimX, texDimY)
+    texture.define(powerOfTwoSize, powerOfTwoSize)
 
     // console.log(renderable)
 
@@ -155,7 +166,7 @@ function calcGaussianDensityTexture2d(webgl: WebGLContext, position: PositionDat
 
     gl.finish()
 
-    return { texture, scale: Vec3.inverse(Vec3.zero(), delta), bbox: expandedBox, dim }
+    return { texture, scale: Vec3.inverse(Vec3.zero(), delta), bbox: expandedBox, gridDim: dim, gridTexDim, gridTexScale }
 }
 
 function calcGaussianDensityTexture3d(webgl: WebGLContext, position: PositionData, box: Box3D, radius: (index: number) => number, props: GaussianDensityGPUProps, texture?: Texture): GaussianDensityTextureData {
@@ -166,7 +177,7 @@ function calcGaussianDensityTexture3d(webgl: WebGLContext, position: PositionDat
     const minDistanceTexture = createTexture(webgl, 'volume-float32', 'rgba', 'float', 'nearest')
     minDistanceTexture.define(dx, dy, dz)
 
-    const renderable = getGaussianDensityRenderable(webgl, drawCount, positions, radii, groups, minDistanceTexture, expandedBox, dim, smoothness)
+    const renderable = getGaussianDensityRenderable(webgl, drawCount, positions, radii, groups, minDistanceTexture, expandedBox, dim, dim, smoothness)
 
     //
 
@@ -198,7 +209,7 @@ function calcGaussianDensityTexture3d(webgl: WebGLContext, position: PositionDat
     setupGroupIdRendering(webgl, renderable)
     render(texture)
 
-    return { texture, scale: Vec3.inverse(Vec3.zero(), delta), bbox: expandedBox, dim }
+    return { texture, scale: Vec3.inverse(Vec3.zero(), delta), bbox: expandedBox, gridDim: dim, gridTexDim: dim, gridTexScale: Vec2() }
 }
 
 //
@@ -239,9 +250,8 @@ function prepareGaussianDensityData(position: PositionData, box: Box3D, radius:
     return { drawCount: n, positions, radii, groups, delta, expandedBox, dim }
 }
 
-function getGaussianDensityRenderable(webgl: WebGLContext, drawCount: number, positions: Float32Array, radii: Float32Array, groups: Float32Array, minDistanceTexture: Texture, box: Box3D, dimensions: Vec3, smoothness: number) {
+function getGaussianDensityRenderable(webgl: WebGLContext, drawCount: number, positions: Float32Array, radii: Float32Array, groups: Float32Array, minDistanceTexture: Texture, box: Box3D, gridDim: Vec3, gridTexDim: Vec3, smoothness: number) {
     const extent = Vec3.sub(Vec3.zero(), box.max, box.min)
-    const { texDimX, texDimY } = getTexture2dSize(dimensions)
 
     const values: Values<typeof GaussianDensitySchema> = {
         drawCount: ValueCell.create(drawCount),
@@ -256,8 +266,8 @@ function getGaussianDensityRenderable(webgl: WebGLContext, drawCount: number, po
         uCurrentY: ValueCell.create(0),
         uBboxMin: ValueCell.create(box.min),
         uBboxSize: ValueCell.create(extent),
-        uGridDim: ValueCell.create(dimensions),
-        uGridTexDim: ValueCell.create(Vec3.create(texDimX, texDimY, 0)),
+        uGridDim: ValueCell.create(gridDim),
+        uGridTexDim: ValueCell.create(gridTexDim),
         uAlpha: ValueCell.create(smoothness),
         tMinDistanceTex: ValueCell.create(minDistanceTexture),
 
@@ -314,21 +324,21 @@ function setupGroupIdRendering(webgl: WebGLContext, renderable: ComputeRenderabl
 function getTexture2dSize(gridDim: Vec3) {
     const area = gridDim[0] * gridDim[1] * gridDim[2]
     const squareDim = Math.sqrt(area)
-    const squareTexSize = Math.pow(2, Math.ceil(Math.log(squareDim) / Math.log(2)))
+    const powerOfTwoSize = Math.pow(2, Math.ceil(Math.log(squareDim) / Math.log(2)))
 
     let texDimX = 0
     let texDimY = gridDim[1]
     let texRows = 1
     let texCols = gridDim[2]
-    if (squareTexSize < gridDim[0] * gridDim[2]) {
-        texCols = Math.floor(squareTexSize / gridDim[0])
+    if (powerOfTwoSize < gridDim[0] * gridDim[2]) {
+        texCols = Math.floor(powerOfTwoSize / gridDim[0])
         texRows = Math.ceil(gridDim[2] / texCols)
         texDimX = texCols * gridDim[0]
         texDimY *= texRows
     } else {
         texDimX = gridDim[0] * gridDim[2]
     }
-    return { texDimX, texDimY, texRows, texCols }
+    return { texDimX, texDimY, texRows, texCols, powerOfTwoSize }
 }
 
 export function fieldFromTexture2d(ctx: WebGLContext, texture: Texture, dim: Vec3) {

src/mol-repr/structure/visual/gaussian-density-volume.ts

@@ -23,9 +23,9 @@ async function createGaussianDensityVolume(ctx: VisualContext, structure: Struct
     const p = { ...props, useGpu: true }
     const oldTexture = directVolume ? directVolume.gridTexture.ref.value : undefined
     const densityTextureData = await computeStructureGaussianDensityTexture(structure, p, webgl, oldTexture).runInContext(runtime)
-    const { transform, texture, bbox, gridDimension } = densityTextureData
+    const { transform, texture, bbox, gridDim } = densityTextureData
 
-    return DirectVolume.create(bbox, gridDimension, transform, texture, directVolume)
+    return DirectVolume.create(bbox, gridDim, transform, texture, directVolume)
 }
 
 export const GaussianDensityVolumeParams = {

src/mol-repr/structure/visual/gaussian-surface-mesh.ts

@@ -79,13 +79,13 @@ async function createGaussianSurfaceTextureMesh(ctx: VisualContext, unit: Unit,
     // console.log('vertexGroupTexture', readTexture(ctx.webgl, densityTextureData.texture))
     // ctx.webgl.waitForGpuCommandsCompleteSync()
 
-    const activeVoxelsTex = calcActiveVoxels(ctx.webgl, densityTextureData.texture, densityTextureData.gridDimension, isoLevel)
+    const activeVoxelsTex = calcActiveVoxels(ctx.webgl, densityTextureData.texture, densityTextureData.gridDim, densityTextureData.gridTexDim, isoLevel, densityTextureData.gridTexScale)
     // ctx.webgl.waitForGpuCommandsCompleteSync()
 
     const compacted = createHistogramPyramid(ctx.webgl, activeVoxelsTex)
     // ctx.webgl.waitForGpuCommandsCompleteSync()
 
-    const gv = createIsosurfaceBuffers(ctx.webgl, activeVoxelsTex, densityTextureData.texture, compacted, densityTextureData.gridDimension, densityTextureData.transform, isoLevel, textureMesh ? textureMesh.vertexGroupTexture.ref.value : undefined, textureMesh ? textureMesh.normalTexture.ref.value : undefined)
+    const gv = createIsosurfaceBuffers(ctx.webgl, activeVoxelsTex, densityTextureData.texture, compacted, densityTextureData.gridDim, densityTextureData.transform, isoLevel, textureMesh ? textureMesh.vertexGroupTexture.ref.value : undefined, textureMesh ? textureMesh.normalTexture.ref.value : undefined)
     // ctx.webgl.waitForGpuCommandsCompleteSync()
 
     // const boundingSphere = Sphere3D.zero()

src/tests/browser/marching-cubes.ts

@@ -50,13 +50,13 @@ async function init() {
     const box = Box3D.create(Vec3.create(0, 0, 0), Vec3.create(2, 2, 2))
     const radius = () => 1.8
     const props = {
-        resolution: 0.1,
+        resolution: 0.3,
         radiusOffset: 0,
         smoothness: 1.5
     }
     const isoValue = Math.exp(-props.smoothness)
 
-    if (true) {
+    if (false) {
         console.time('gpu gaussian2')
         const densityTextureData2 = await computeGaussianDensityTexture2d(position, box, radius, props, webgl).run()
         webgl.waitForGpuCommandsCompleteSync()
@@ -64,7 +64,7 @@ async function init() {
 
         console.time('gpu mc2')
         console.time('gpu mc active2')
-        const activeVoxelsTex2 = calcActiveVoxels(webgl, densityTextureData2.texture, densityTextureData2.gridDimension, isoValue)
+        const activeVoxelsTex2 = calcActiveVoxels(webgl, densityTextureData2.texture, densityTextureData2.gridDim, densityTextureData2.gridTexDim, isoValue, densityTextureData2.gridTexScale)
         webgl.waitForGpuCommandsCompleteSync()
         console.timeEnd('gpu mc active2')
 
@@ -74,7 +74,7 @@ async function init() {
         console.timeEnd('gpu mc pyramid2')
 
         console.time('gpu mc vert2')
-        createIsosurfaceBuffers(webgl, activeVoxelsTex2, densityTextureData2.texture, compacted2, densityTextureData2.gridDimension, densityTextureData2.transform, isoValue)
+        createIsosurfaceBuffers(webgl, activeVoxelsTex2, densityTextureData2.texture, compacted2, densityTextureData2.gridDim, densityTextureData2.transform, isoValue)
         webgl.waitForGpuCommandsCompleteSync()
         console.timeEnd('gpu mc vert2')
         console.timeEnd('gpu mc2')
@@ -87,7 +87,7 @@ async function init() {
 
     console.time('gpu mc')
     console.time('gpu mc active')
-    const activeVoxelsTex = calcActiveVoxels(webgl, densityTextureData.texture, densityTextureData.gridDimension, isoValue)
+    const activeVoxelsTex = calcActiveVoxels(webgl, densityTextureData.texture, densityTextureData.gridDim, densityTextureData.gridTexDim, isoValue, densityTextureData.gridTexScale)
     webgl.waitForGpuCommandsCompleteSync()
     console.timeEnd('gpu mc active')
 
@@ -97,7 +97,7 @@ async function init() {
     console.timeEnd('gpu mc pyramid')
 
     console.time('gpu mc vert')
-    const gv = createIsosurfaceBuffers(webgl, activeVoxelsTex, densityTextureData.texture, compacted, densityTextureData.gridDimension, densityTextureData.transform, isoValue)
+    const gv = createIsosurfaceBuffers(webgl, activeVoxelsTex, densityTextureData.texture, compacted, densityTextureData.gridDim, densityTextureData.transform, isoValue)
     webgl.waitForGpuCommandsCompleteSync()
     console.timeEnd('gpu mc vert')
     console.timeEnd('gpu mc')