representation.ts 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  1. /**
  2. * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  3. *
  4. * @author Alexander Rose <alexander.rose@weirdbyte.de>
  5. */
  6. import { ParamDefinition as PD } from '../../mol-util/param-definition';
  7. import { Visual, VisualContext } from '../visual';
  8. import { Volume } from '../../mol-model/volume';
  9. import { Geometry, GeometryUtils } from '../../mol-geo/geometry/geometry';
  10. import { LocationIterator } from '../../mol-geo/util/location-iterator';
  11. import { Theme } from '../../mol-theme/theme';
  12. import { createIdentityTransform } from '../../mol-geo/geometry/transform-data';
  13. import { createRenderObject, getNextMaterialId, GraphicsRenderObject } from '../../mol-gl/render-object';
  14. import { PickingId } from '../../mol-geo/geometry/picking';
  15. import { Loci, isEveryLoci, EmptyLoci } from '../../mol-model/loci';
  16. import { Interval } from '../../mol-data/int';
  17. import { getQualityProps, VisualUpdateState } from '../util';
  18. import { ColorTheme } from '../../mol-theme/color';
  19. import { ValueCell } from '../../mol-util';
  20. import { createSizes } from '../../mol-geo/geometry/size-data';
  21. import { createColors } from '../../mol-geo/geometry/color-data';
  22. import { MarkerAction } from '../../mol-util/marker-action';
  23. import { Mat4 } from '../../mol-math/linear-algebra';
  24. import { Overpaint } from '../../mol-theme/overpaint';
  25. import { Transparency } from '../../mol-theme/transparency';
  26. import { Representation, RepresentationProvider, RepresentationContext, RepresentationParamsGetter } from '../representation';
  27. import { BaseGeometry } from '../../mol-geo/geometry/base';
  28. import { Subject } from 'rxjs';
  29. import { Task } from '../../mol-task';
  30. import { SizeValues } from '../../mol-gl/renderable/schema';
  31. import { Clipping } from '../../mol-theme/clipping';
  32. import { WebGLContext } from '../../mol-gl/webgl/context';
  33. import { isPromiseLike } from '../../mol-util/type-helpers';
  34. import { Substance } from '../../mol-theme/substance';
  35. import { createMarkers } from '../../mol-geo/geometry/marker-data';
  36. export interface VolumeVisual<P extends VolumeParams> extends Visual<Volume, P> { }
  37. function createVolumeRenderObject<G extends Geometry>(volume: Volume, geometry: G, locationIt: LocationIterator, theme: Theme, props: PD.Values<Geometry.Params<G>>, materialId: number) {
  38. const { createValues, createRenderableState } = Geometry.getUtils(geometry);
  39. const transform = createIdentityTransform();
  40. const values = createValues(geometry, transform, locationIt, theme, props);
  41. const state = createRenderableState(props);
  42. return createRenderObject(geometry.kind, values, state, materialId);
  43. }
  44. interface VolumeVisualBuilder<P extends VolumeParams, G extends Geometry> {
  45. defaultProps: PD.Values<P>
  46. createGeometry(ctx: VisualContext, volume: Volume, theme: Theme, props: PD.Values<P>, geometry?: G): Promise<G> | G
  47. createLocationIterator(volume: Volume): LocationIterator
  48. getLoci(pickingId: PickingId, volume: Volume, props: PD.Values<P>, id: number): Loci
  49. eachLocation(loci: Loci, volume: Volume, props: PD.Values<P>, apply: (interval: Interval) => boolean): boolean
  50. setUpdateState(state: VisualUpdateState, volume: Volume, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme): void
  51. mustRecreate?: (volume: Volume, props: PD.Values<P>) => boolean
  52. dispose?: (geometry: G) => void
  53. }
  54. interface VolumeVisualGeometryBuilder<P extends VolumeParams, G extends Geometry> extends VolumeVisualBuilder<P, G> {
  55. geometryUtils: GeometryUtils<G>
  56. }
  57. export function VolumeVisual<G extends Geometry, P extends VolumeParams & Geometry.Params<G>>(builder: VolumeVisualGeometryBuilder<P, G>, materialId: number): VolumeVisual<P> {
  58. const { defaultProps, createGeometry, createLocationIterator, getLoci, eachLocation, setUpdateState, mustRecreate, dispose } = builder;
  59. const { updateValues, updateBoundingSphere, updateRenderableState, createPositionIterator } = builder.geometryUtils;
  60. const updateState = VisualUpdateState.create();
  61. let renderObject: GraphicsRenderObject<G['kind']> | undefined;
  62. let newProps: PD.Values<P>;
  63. let newTheme: Theme;
  64. let newVolume: Volume;
  65. let currentProps: PD.Values<P> = Object.assign({}, defaultProps);
  66. let currentTheme: Theme = Theme.createEmpty();
  67. let currentVolume: Volume;
  68. let geometry: G;
  69. let geometryVersion = -1;
  70. let locationIt: LocationIterator;
  71. let positionIt: LocationIterator;
  72. function prepareUpdate(theme: Theme, props: Partial<PD.Values<P>>, volume: Volume) {
  73. if (!volume && !currentVolume) {
  74. throw new Error('missing volume');
  75. }
  76. newProps = Object.assign({}, currentProps, props);
  77. newTheme = theme;
  78. newVolume = volume;
  79. VisualUpdateState.reset(updateState);
  80. if (!renderObject) {
  81. updateState.createNew = true;
  82. } else if (!currentVolume || !Volume.areEquivalent(newVolume, currentVolume)) {
  83. updateState.createNew = true;
  84. }
  85. if (updateState.createNew) {
  86. updateState.createGeometry = true;
  87. return;
  88. }
  89. setUpdateState(updateState, volume, newProps, currentProps, newTheme, currentTheme);
  90. if (!ColorTheme.areEqual(theme.color, currentTheme.color)) updateState.updateColor = true;
  91. if (updateState.createGeometry) {
  92. updateState.updateColor = true;
  93. }
  94. if (newProps.instanceGranularity !== currentProps.instanceGranularity) {
  95. updateState.updateTransform = true;
  96. }
  97. }
  98. function update(newGeometry?: G) {
  99. if (updateState.createNew) {
  100. locationIt = createLocationIterator(newVolume);
  101. if (newGeometry) {
  102. renderObject = createVolumeRenderObject(newVolume, newGeometry, locationIt, newTheme, newProps, materialId);
  103. positionIt = createPositionIterator(newGeometry, renderObject.values);
  104. } else {
  105. throw new Error('expected geometry to be given');
  106. }
  107. } else {
  108. if (!renderObject) {
  109. throw new Error('expected renderObject to be available');
  110. }
  111. if (updateState.updateTransform) {
  112. // console.log('update transform');
  113. locationIt = createLocationIterator(newVolume);
  114. const { instanceCount, groupCount } = locationIt;
  115. if (newProps.instanceGranularity) {
  116. createMarkers(instanceCount, 'instance', renderObject.values);
  117. } else {
  118. createMarkers(instanceCount * groupCount, 'groupInstance', renderObject.values);
  119. }
  120. } else {
  121. locationIt.reset();
  122. }
  123. if (updateState.createGeometry) {
  124. if (newGeometry) {
  125. ValueCell.updateIfChanged(renderObject.values.drawCount, Geometry.getDrawCount(newGeometry));
  126. ValueCell.updateIfChanged(renderObject.values.uVertexCount, Geometry.getVertexCount(newGeometry));
  127. ValueCell.updateIfChanged(renderObject.values.uGroupCount, Geometry.getGroupCount(newGeometry));
  128. } else {
  129. throw new Error('expected geometry to be given');
  130. }
  131. }
  132. if (updateState.updateTransform || updateState.createGeometry) {
  133. updateBoundingSphere(renderObject.values, newGeometry || geometry);
  134. positionIt = createPositionIterator(newGeometry || geometry, renderObject.values);
  135. }
  136. if (updateState.updateSize) {
  137. // not all geometries have size data, so check here
  138. if ('uSize' in renderObject.values) {
  139. createSizes(locationIt, newTheme.size, renderObject.values as SizeValues);
  140. }
  141. }
  142. if (updateState.updateColor) {
  143. createColors(locationIt, positionIt, newTheme.color, renderObject.values);
  144. }
  145. updateValues(renderObject.values, newProps);
  146. updateRenderableState(renderObject.state, newProps);
  147. }
  148. currentProps = newProps;
  149. currentTheme = newTheme;
  150. currentVolume = newVolume;
  151. if (newGeometry) {
  152. geometry = newGeometry;
  153. geometryVersion += 1;
  154. }
  155. }
  156. function eachInstance(loci: Loci, volume: Volume, apply: (interval: Interval) => boolean) {
  157. let changed = false;
  158. if (!Volume.Cell.isLoci(loci)) return false;
  159. if (Volume.Cell.isLociEmpty(loci)) return false;
  160. if (!Volume.areEquivalent(loci.volume, volume)) return false;
  161. if (apply(Interval.ofSingleton(0))) changed = true;
  162. return changed;
  163. }
  164. function lociApply(loci: Loci, apply: (interval: Interval) => boolean) {
  165. if (isEveryLoci(loci)) {
  166. if (currentProps.instanceGranularity) {
  167. return apply(Interval.ofBounds(0, locationIt.instanceCount));
  168. } else {
  169. return apply(Interval.ofBounds(0, locationIt.groupCount * locationIt.instanceCount));
  170. }
  171. } else {
  172. if (currentProps.instanceGranularity) {
  173. return eachInstance(loci, currentVolume, apply);
  174. } else {
  175. return eachLocation(loci, currentVolume, currentProps, apply);
  176. }
  177. }
  178. }
  179. return {
  180. get groupCount() { return locationIt ? locationIt.count : 0; },
  181. get renderObject() { return renderObject; },
  182. get geometryVersion() { return geometryVersion; },
  183. async createOrUpdate(ctx: VisualContext, theme: Theme, props: Partial<PD.Values<P>> = {}, volume?: Volume) {
  184. prepareUpdate(theme, props, volume || currentVolume);
  185. if (updateState.createGeometry) {
  186. const newGeometry = createGeometry(ctx, newVolume, newTheme, newProps, geometry);
  187. return isPromiseLike(newGeometry) ? newGeometry.then(update) : update(newGeometry);
  188. } else {
  189. update();
  190. }
  191. },
  192. getLoci(pickingId: PickingId) {
  193. return renderObject ? getLoci(pickingId, currentVolume, currentProps, renderObject.id) : EmptyLoci;
  194. },
  195. mark(loci: Loci, action: MarkerAction) {
  196. return Visual.mark(renderObject, loci, action, lociApply);
  197. },
  198. setVisibility(visible: boolean) {
  199. Visual.setVisibility(renderObject, visible);
  200. },
  201. setAlphaFactor(alphaFactor: number) {
  202. Visual.setAlphaFactor(renderObject, alphaFactor);
  203. },
  204. setPickable(pickable: boolean) {
  205. Visual.setPickable(renderObject, pickable);
  206. },
  207. setColorOnly(colorOnly: boolean) {
  208. Visual.setColorOnly(renderObject, colorOnly);
  209. },
  210. setTransform(matrix?: Mat4, instanceMatrices?: Float32Array | null) {
  211. Visual.setTransform(renderObject, matrix, instanceMatrices);
  212. },
  213. setOverpaint(overpaint: Overpaint) {
  214. return Visual.setOverpaint(renderObject, overpaint, lociApply, true);
  215. },
  216. setTransparency(transparency: Transparency) {
  217. return Visual.setTransparency(renderObject, transparency, lociApply, true);
  218. },
  219. setSubstance(substance: Substance) {
  220. return Visual.setSubstance(renderObject, substance, lociApply, true);
  221. },
  222. setClipping(clipping: Clipping) {
  223. return Visual.setClipping(renderObject, clipping, lociApply, true);
  224. },
  225. setThemeStrength(strength: { overpaint: number, transparency: number, substance: number }) {
  226. Visual.setThemeStrength(renderObject, strength);
  227. },
  228. destroy() {
  229. dispose?.(geometry);
  230. if (renderObject) {
  231. renderObject.state.disposed = true;
  232. renderObject = undefined;
  233. }
  234. },
  235. mustRecreate
  236. };
  237. }
  238. export interface VolumeRepresentation<P extends VolumeParams> extends Representation<Volume, P> { }
  239. export type VolumeRepresentationProvider<P extends VolumeParams, Id extends string = string> = RepresentationProvider<Volume, P, Representation.State, Id>
  240. export function VolumeRepresentationProvider<P extends VolumeParams, Id extends string>(p: VolumeRepresentationProvider<P, Id>): VolumeRepresentationProvider<P, Id> { return p; }
  241. //
  242. export const VolumeParams = {
  243. ...BaseGeometry.Params,
  244. };
  245. export type VolumeParams = typeof VolumeParams
  246. export function VolumeRepresentation<P extends VolumeParams>(label: string, ctx: RepresentationContext, getParams: RepresentationParamsGetter<Volume, P>, visualCtor: (materialId: number, volume: Volume, props: PD.Values<P>, webgl?: WebGLContext) => VolumeVisual<P>, getLoci: (volume: Volume, props: PD.Values<P>) => Loci): VolumeRepresentation<P> {
  247. let version = 0;
  248. const { webgl } = ctx;
  249. const updated = new Subject<number>();
  250. const geometryState = new Representation.GeometryState();
  251. const materialId = getNextMaterialId();
  252. const renderObjects: GraphicsRenderObject[] = [];
  253. const _state = Representation.createState();
  254. let visual: VolumeVisual<P> | undefined;
  255. let _volume: Volume;
  256. let _params: P;
  257. let _props: PD.Values<P>;
  258. let _theme = Theme.createEmpty();
  259. function createOrUpdate(props: Partial<PD.Values<P>> = {}, volume?: Volume) {
  260. if (volume && volume !== _volume) {
  261. _params = getParams(ctx, volume);
  262. _volume = volume;
  263. if (!_props) _props = PD.getDefaultValues(_params);
  264. }
  265. const qualityProps = getQualityProps(Object.assign({}, _props, props), _volume);
  266. Object.assign(_props, props, qualityProps);
  267. return Task.create('Creating or updating VolumeRepresentation', async runtime => {
  268. if (!visual) {
  269. visual = visualCtor(materialId, _volume, _props, webgl);
  270. } else if (visual.mustRecreate?.(_volume, _props, webgl)) {
  271. visual.destroy();
  272. visual = visualCtor(materialId, _volume, _props, webgl);
  273. }
  274. const promise = visual.createOrUpdate({ webgl, runtime }, _theme, _props, volume);
  275. if (promise) await promise;
  276. // update list of renderObjects
  277. renderObjects.length = 0;
  278. if (visual && visual.renderObject) {
  279. renderObjects.push(visual.renderObject);
  280. geometryState.add(visual.renderObject.id, visual.geometryVersion);
  281. }
  282. geometryState.snapshot();
  283. // increment version
  284. updated.next(version++);
  285. });
  286. }
  287. function mark(loci: Loci, action: MarkerAction) {
  288. return visual ? visual.mark(loci, action) : false;
  289. }
  290. function setState(state: Partial<Representation.State>) {
  291. if (state.visible !== undefined && visual) visual.setVisibility(state.visible);
  292. if (state.alphaFactor !== undefined && visual) visual.setAlphaFactor(state.alphaFactor);
  293. if (state.pickable !== undefined && visual) visual.setPickable(state.pickable);
  294. if (state.overpaint !== undefined && visual) visual.setOverpaint(state.overpaint);
  295. if (state.transparency !== undefined && visual) visual.setTransparency(state.transparency);
  296. if (state.transform !== undefined && visual) visual.setTransform(state.transform);
  297. Representation.updateState(_state, state);
  298. }
  299. function setTheme(theme: Theme) {
  300. _theme = theme;
  301. }
  302. function destroy() {
  303. if (visual) visual.destroy();
  304. }
  305. return {
  306. label,
  307. get groupCount() {
  308. return visual ? visual.groupCount : 0;
  309. },
  310. get props() { return _props; },
  311. get params() { return _params; },
  312. get state() { return _state; },
  313. get theme() { return _theme; },
  314. get geometryVersion() { return geometryState.version; },
  315. renderObjects,
  316. updated,
  317. createOrUpdate,
  318. setState,
  319. setTheme,
  320. getLoci: (pickingId: PickingId): Loci => {
  321. return visual ? visual.getLoci(pickingId) : EmptyLoci;
  322. },
  323. getAllLoci: (): Loci[] => {
  324. return [getLoci(_volume, _props)];
  325. },
  326. mark,
  327. destroy
  328. };
  329. }