isosurface.ts 8.5 KB

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