isosurface.ts 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. /**
  2. * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  3. *
  4. * @author Alexander Rose <alexander.rose@weirdbyte.de>
  5. */
  6. import { createComputeRenderable } from '../../renderable'
  7. import { WebGLContext } from '../../webgl/context';
  8. import { createComputeRenderItem } from '../../webgl/render-item';
  9. import { Values, TextureSpec, UniformSpec } from '../../renderable/schema';
  10. import { Texture, createTexture } from 'mol-gl/webgl/texture';
  11. import { ShaderCode } from 'mol-gl/shader-code';
  12. import { ValueCell } from 'mol-util';
  13. import { Vec3, Vec2, Mat4 } from 'mol-math/linear-algebra';
  14. import { QuadSchema, QuadValues } from '../util';
  15. import { HistogramPyramid } from '../histogram-pyramid/reduction';
  16. import { getTriIndices } from './tables';
  17. import quad_vert from 'mol-gl/shader/quad.vert'
  18. import isosurface_frag from 'mol-gl/shader/marching-cubes/isosurface.frag'
  19. /** name for shared framebuffer used for gpu marching cubes operations */
  20. const FramebufferName = 'marching-cubes-isosurface'
  21. const IsosurfaceSchema = {
  22. ...QuadSchema,
  23. tTriIndices: TextureSpec('image-uint8', 'alpha', 'ubyte', 'nearest'),
  24. tActiveVoxelsPyramid: TextureSpec('texture', 'rgba', 'float', 'nearest'),
  25. tActiveVoxelsBase: TextureSpec('texture', 'rgba', 'float', 'nearest'),
  26. tVolumeData: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
  27. uIsoValue: UniformSpec('f'),
  28. uSize: UniformSpec('f'),
  29. uLevels: UniformSpec('f'),
  30. uCount: UniformSpec('f'),
  31. uGridDim: UniformSpec('v3'),
  32. uGridTexDim: UniformSpec('v3'),
  33. uGridTransform: UniformSpec('m4'),
  34. uScale: UniformSpec('v2'),
  35. }
  36. function getIsosurfaceRenderable(ctx: WebGLContext, activeVoxelsPyramid: Texture, activeVoxelsBase: Texture, volumeData: Texture, gridDim: Vec3, gridTexDim: Vec3, transform: Mat4, isoValue: number, levels: number, scale: Vec2, count: number, height: number) {
  37. // console.log('uSize', Math.pow(2, levels))
  38. const values: Values<typeof IsosurfaceSchema> = {
  39. ...QuadValues,
  40. uQuadScale: ValueCell.create(Vec2.create(1, height / Math.pow(2, levels))),
  41. tTriIndices: ValueCell.create(getTriIndices()),
  42. tActiveVoxelsPyramid: ValueCell.create(activeVoxelsPyramid),
  43. tActiveVoxelsBase: ValueCell.create(activeVoxelsBase),
  44. tVolumeData: ValueCell.create(volumeData),
  45. uIsoValue: ValueCell.create(isoValue),
  46. uSize: ValueCell.create(Math.pow(2, levels)),
  47. uLevels: ValueCell.create(levels),
  48. uCount: ValueCell.create(count),
  49. uGridDim: ValueCell.create(gridDim),
  50. uGridTexDim: ValueCell.create(gridTexDim),
  51. uGridTransform: ValueCell.create(transform),
  52. uScale: ValueCell.create(scale),
  53. }
  54. const schema = { ...IsosurfaceSchema }
  55. const shaderCode = ShaderCode(quad_vert, isosurface_frag, { drawBuffers: true })
  56. const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values)
  57. return createComputeRenderable(renderItem, values);
  58. }
  59. function setRenderingDefaults(ctx: WebGLContext) {
  60. const { gl, state } = ctx
  61. state.disable(gl.CULL_FACE)
  62. state.disable(gl.BLEND)
  63. state.disable(gl.DEPTH_TEST)
  64. state.disable(gl.SCISSOR_TEST)
  65. state.depthMask(false)
  66. state.colorMask(true, true, true, true)
  67. state.clearColor(0, 0, 0, 0)
  68. }
  69. export function createIsosurfaceBuffers(ctx: WebGLContext, activeVoxelsBase: Texture, volumeData: Texture, histogramPyramid: HistogramPyramid, gridDim: Vec3, gridTexDim: Vec3, transform: Mat4, isoValue: number, vertexGroupTexture?: Texture, normalTexture?: Texture) {
  70. const { gl, framebufferCache } = ctx
  71. const { pyramidTex, height, levels, scale, count } = histogramPyramid
  72. // console.log('iso', 'gridDim', gridDim, 'scale', scale, 'gridTexDim', gridTexDim)
  73. // console.log('iso volumeData', volumeData)
  74. const framebuffer = framebufferCache.get(FramebufferName).value
  75. let needsClear = false
  76. if (!vertexGroupTexture) {
  77. vertexGroupTexture = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
  78. vertexGroupTexture.define(pyramidTex.width, pyramidTex.height)
  79. } else if (vertexGroupTexture.width !== pyramidTex.width || vertexGroupTexture.height !== pyramidTex.height) {
  80. vertexGroupTexture.define(pyramidTex.width, pyramidTex.height)
  81. } else {
  82. needsClear = true
  83. }
  84. if (!normalTexture) {
  85. normalTexture = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
  86. normalTexture.define(pyramidTex.width, pyramidTex.height)
  87. } else if (normalTexture.width !== pyramidTex.width || normalTexture.height !== pyramidTex.height) {
  88. normalTexture.define(pyramidTex.width, pyramidTex.height)
  89. } else {
  90. needsClear = true
  91. }
  92. // const infoTex = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
  93. // infoTex.define(pyramidTex.width, pyramidTex.height)
  94. // const pointTexA = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
  95. // pointTexA.define(pyramidTex.width, pyramidTex.height)
  96. // const pointTexB = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
  97. // pointTexB.define(pyramidTex.width, pyramidTex.height)
  98. // const coordTex = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
  99. // coordTex.define(pyramidTex.width, pyramidTex.height)
  100. // const indexTex = createTexture(ctx, 'image-float32', 'rgba', 'float', 'nearest')
  101. // indexTex.define(pyramidTex.width, pyramidTex.height)
  102. const renderable = getIsosurfaceRenderable(ctx, pyramidTex, activeVoxelsBase, volumeData, gridDim, gridTexDim, transform, isoValue, levels, scale, count, height)
  103. ctx.state.currentRenderItemId = -1
  104. vertexGroupTexture.attachFramebuffer(framebuffer, 0)
  105. normalTexture.attachFramebuffer(framebuffer, 1)
  106. // infoTex.attachFramebuffer(framebuffer, 1)
  107. // pointTexA.attachFramebuffer(framebuffer, 2)
  108. // pointTexB.attachFramebuffer(framebuffer, 3)
  109. // coordTex.attachFramebuffer(framebuffer, 4)
  110. // indexTex.attachFramebuffer(framebuffer, 5)
  111. const { drawBuffers } = ctx.extensions
  112. if (!drawBuffers) throw new Error('need WebGL draw buffers')
  113. drawBuffers.drawBuffers([
  114. drawBuffers.COLOR_ATTACHMENT0,
  115. drawBuffers.COLOR_ATTACHMENT1,
  116. // drawBuffers.COLOR_ATTACHMENT2,
  117. // drawBuffers.COLOR_ATTACHMENT3,
  118. // drawBuffers.COLOR_ATTACHMENT4,
  119. // drawBuffers.COLOR_ATTACHMENT5
  120. ])
  121. setRenderingDefaults(ctx)
  122. gl.viewport(0, 0, pyramidTex.width, pyramidTex.height)
  123. if (needsClear) gl.clear(gl.COLOR_BUFFER_BIT)
  124. renderable.render()
  125. gl.finish()
  126. // const vgt = readTexture(ctx, vertexGroupTexture, pyramidTex.width, height)
  127. // console.log('vertexGroupTexture', vgt.array.subarray(0, 4 * count))
  128. // const vt = readTexture(ctx, verticesTex, pyramidTex.width, height)
  129. // console.log('vt', vt)
  130. // const vertices = new Float32Array(3 * compacted.count)
  131. // for (let i = 0; i < compacted.count; ++i) {
  132. // vertices[i * 3] = vt.array[i * 4]
  133. // vertices[i * 3 + 1] = vt.array[i * 4 + 1]
  134. // vertices[i * 3 + 2] = vt.array[i * 4 + 2]
  135. // }
  136. // console.log('vertices', vertices)
  137. // const it = readTexture(ctx, infoTex, pyramidTex.width, height)
  138. // console.log('info', it.array.subarray(0, 4 * compacted.count))
  139. // const pat = readTexture(ctx, pointTexA, pyramidTex.width, height)
  140. // console.log('point a', pat.array.subarray(0, 4 * compacted.count))
  141. // const pbt = readTexture(ctx, pointTexB, pyramidTex.width, height)
  142. // console.log('point b', pbt.array.subarray(0, 4 * compacted.count))
  143. // const ct = readTexture(ctx, coordTex, pyramidTex.width, height)
  144. // console.log('coord', ct.array.subarray(0, 4 * compacted.count))
  145. // const idxt = readTexture(ctx, indexTex, pyramidTex.width, height)
  146. // console.log('index', idxt.array.subarray(0, 4 * compacted.count))
  147. // const { field, idField } = await fieldFromTexture2d(ctx, volumeData, gridDimensions)
  148. // console.log({ field, idField })
  149. // const valuesA = new Float32Array(compacted.count)
  150. // const valuesB = new Float32Array(compacted.count)
  151. // for (let i = 0; i < compacted.count; ++i) {
  152. // valuesA[i] = field.space.get(field.data, pat.array[i * 4], pat.array[i * 4 + 1], pat.array[i * 4 + 2])
  153. // valuesB[i] = field.space.get(field.data, pbt.array[i * 4], pbt.array[i * 4 + 1], pbt.array[i * 4 + 2])
  154. // }
  155. // console.log('valuesA', valuesA)
  156. // console.log('valuesB', valuesB)
  157. return { vertexGroupTexture, normalTexture, vertexCount: count }
  158. }