representation.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. /**
  2. * Copyright (c) 2018-2020 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. export interface VolumeVisual<P extends VolumeParams> extends Visual<Volume, P> { }
  34. function createVolumeRenderObject<G extends Geometry>(volume: Volume, geometry: G, locationIt: LocationIterator, theme: Theme, props: PD.Values<Geometry.Params<G>>, materialId: number) {
  35. const { createValues, createRenderableState } = Geometry.getUtils(geometry);
  36. const transform = createIdentityTransform();
  37. const values = createValues(geometry, transform, locationIt, theme, props);
  38. const state = createRenderableState(props);
  39. return createRenderObject(geometry.kind, values, state, materialId);
  40. }
  41. interface VolumeVisualBuilder<P extends VolumeParams, G extends Geometry> {
  42. defaultProps: PD.Values<P>
  43. createGeometry(ctx: VisualContext, volume: Volume, theme: Theme, props: PD.Values<P>, geometry?: G): Promise<G> | G
  44. createLocationIterator(volume: Volume): LocationIterator
  45. getLoci(pickingId: PickingId, volume: Volume, props: PD.Values<P>, id: number): Loci
  46. eachLocation(loci: Loci, volume: Volume, props: PD.Values<P>, apply: (interval: Interval) => boolean): boolean
  47. setUpdateState(state: VisualUpdateState, volume: Volume, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme): void
  48. mustRecreate?: (props: PD.Values<P>) => boolean
  49. dispose?: (geometry: G) => void
  50. }
  51. interface VolumeVisualGeometryBuilder<P extends VolumeParams, G extends Geometry> extends VolumeVisualBuilder<P, G> {
  52. geometryUtils: GeometryUtils<G>
  53. }
  54. export function VolumeVisual<G extends Geometry, P extends VolumeParams & Geometry.Params<G>>(builder: VolumeVisualGeometryBuilder<P, G>, materialId: number): VolumeVisual<P> {
  55. const { defaultProps, createGeometry, createLocationIterator, getLoci, eachLocation, setUpdateState, mustRecreate, dispose } = builder;
  56. const { updateValues, updateBoundingSphere, updateRenderableState, createPositionIterator } = builder.geometryUtils;
  57. const updateState = VisualUpdateState.create();
  58. let renderObject: GraphicsRenderObject<G['kind']> | undefined;
  59. let newProps: PD.Values<P>;
  60. let newTheme: Theme;
  61. let newVolume: Volume;
  62. let currentProps: PD.Values<P> = Object.assign({}, defaultProps);
  63. let currentTheme: Theme = Theme.createEmpty();
  64. let currentVolume: Volume;
  65. let geometry: G;
  66. let locationIt: LocationIterator;
  67. let positionIt: LocationIterator;
  68. function prepareUpdate(theme: Theme, props: Partial<PD.Values<P>>, volume: Volume) {
  69. if (!volume && !currentVolume) {
  70. throw new Error('missing volume');
  71. }
  72. newProps = Object.assign({}, currentProps, props);
  73. newTheme = theme;
  74. newVolume = volume;
  75. VisualUpdateState.reset(updateState);
  76. if (!renderObject) {
  77. updateState.createNew = true;
  78. } else if (!currentVolume || !Volume.areEquivalent(newVolume, currentVolume)) {
  79. updateState.createNew = true;
  80. }
  81. if (updateState.createNew) {
  82. updateState.createGeometry = true;
  83. return;
  84. }
  85. setUpdateState(updateState, volume, newProps, currentProps, newTheme, currentTheme);
  86. if (!ColorTheme.areEqual(theme.color, currentTheme.color)) updateState.updateColor = true;
  87. if (updateState.createGeometry) {
  88. updateState.updateColor = true;
  89. }
  90. }
  91. function update(newGeometry?: G) {
  92. if (updateState.createNew) {
  93. locationIt = createLocationIterator(newVolume);
  94. if (newGeometry) {
  95. renderObject = createVolumeRenderObject(newVolume, newGeometry, locationIt, newTheme, newProps, materialId);
  96. positionIt = createPositionIterator(newGeometry, renderObject.values);
  97. } else {
  98. throw new Error('expected geometry to be given');
  99. }
  100. } else {
  101. if (!renderObject) {
  102. throw new Error('expected renderObject to be available');
  103. }
  104. locationIt.reset();
  105. if (updateState.createGeometry) {
  106. if (newGeometry) {
  107. ValueCell.updateIfChanged(renderObject.values.drawCount, Geometry.getDrawCount(newGeometry));
  108. ValueCell.updateIfChanged(renderObject.values.uVertexCount, Geometry.getVertexCount(newGeometry));
  109. } else {
  110. throw new Error('expected geometry to be given');
  111. }
  112. }
  113. if (updateState.updateTransform || updateState.createGeometry) {
  114. updateBoundingSphere(renderObject.values, newGeometry || geometry);
  115. positionIt = createPositionIterator(newGeometry || geometry, renderObject.values);
  116. }
  117. if (updateState.updateSize) {
  118. // not all geometries have size data, so check here
  119. if ('uSize' in renderObject.values) {
  120. createSizes(locationIt, newTheme.size, renderObject.values as SizeValues);
  121. }
  122. }
  123. if (updateState.updateColor) {
  124. createColors(locationIt, positionIt, newTheme.color, renderObject.values);
  125. }
  126. updateValues(renderObject.values, newProps);
  127. updateRenderableState(renderObject.state, newProps);
  128. }
  129. currentProps = newProps;
  130. currentTheme = newTheme;
  131. currentVolume = newVolume;
  132. if (newGeometry) geometry = newGeometry;
  133. }
  134. function lociApply(loci: Loci, apply: (interval: Interval) => boolean) {
  135. if (isEveryLoci(loci)) {
  136. return apply(Interval.ofBounds(0, locationIt.groupCount * locationIt.instanceCount));
  137. } else {
  138. return eachLocation(loci, currentVolume, currentProps, apply);
  139. }
  140. }
  141. return {
  142. get groupCount() { return locationIt ? locationIt.count : 0; },
  143. get renderObject () { return renderObject; },
  144. async createOrUpdate(ctx: VisualContext, theme: Theme, props: Partial<PD.Values<P>> = {}, volume?: Volume) {
  145. prepareUpdate(theme, props, volume || currentVolume);
  146. if (updateState.createGeometry) {
  147. const newGeometry = createGeometry(ctx, newVolume, newTheme, newProps, geometry);
  148. return newGeometry instanceof Promise ? newGeometry.then(update) : update(newGeometry);
  149. } else {
  150. update();
  151. }
  152. },
  153. getLoci(pickingId: PickingId) {
  154. return renderObject ? getLoci(pickingId, currentVolume, currentProps, renderObject.id) : EmptyLoci;
  155. },
  156. mark(loci: Loci, action: MarkerAction) {
  157. return Visual.mark(renderObject, loci, action, lociApply);
  158. },
  159. setVisibility(visible: boolean) {
  160. Visual.setVisibility(renderObject, visible);
  161. },
  162. setAlphaFactor(alphaFactor: number) {
  163. Visual.setAlphaFactor(renderObject, alphaFactor);
  164. },
  165. setPickable(pickable: boolean) {
  166. Visual.setPickable(renderObject, pickable);
  167. },
  168. setColorOnly(colorOnly: boolean) {
  169. Visual.setColorOnly(renderObject, colorOnly);
  170. },
  171. setTransform(matrix?: Mat4, instanceMatrices?: Float32Array | null) {
  172. Visual.setTransform(renderObject, matrix, instanceMatrices);
  173. },
  174. setOverpaint(overpaint: Overpaint) {
  175. return Visual.setOverpaint(renderObject, overpaint, lociApply, true);
  176. },
  177. setTransparency(transparency: Transparency) {
  178. return Visual.setTransparency(renderObject, transparency, lociApply, true);
  179. },
  180. setClipping(clipping: Clipping) {
  181. return Visual.setClipping(renderObject, clipping, lociApply, true);
  182. },
  183. destroy() {
  184. dispose?.(geometry);
  185. renderObject = undefined;
  186. },
  187. mustRecreate
  188. };
  189. }
  190. export interface VolumeRepresentation<P extends VolumeParams> extends Representation<Volume, P> { }
  191. export type VolumeRepresentationProvider<P extends VolumeParams, Id extends string = string> = RepresentationProvider<Volume, P, Representation.State, Id>
  192. export function VolumeRepresentationProvider<P extends VolumeParams, Id extends string>(p: VolumeRepresentationProvider<P, Id>): VolumeRepresentationProvider<P, Id> { return p; }
  193. //
  194. export const VolumeParams = {
  195. ...BaseGeometry.Params,
  196. };
  197. export type VolumeParams = typeof VolumeParams
  198. export function VolumeRepresentation<P extends VolumeParams>(label: string, ctx: RepresentationContext, getParams: RepresentationParamsGetter<Volume, P>, visualCtor: (materialId: number, props?: PD.Values<P>, webgl?: WebGLContext) => VolumeVisual<P>, getLoci: (volume: Volume, props: PD.Values<P>) => Loci): VolumeRepresentation<P> {
  199. let version = 0;
  200. const { webgl } = ctx;
  201. const updated = new Subject<number>();
  202. const materialId = getNextMaterialId();
  203. const renderObjects: GraphicsRenderObject[] = [];
  204. const _state = Representation.createState();
  205. let visual: VolumeVisual<P> | undefined;
  206. let _volume: Volume;
  207. let _params: P;
  208. let _props: PD.Values<P>;
  209. let _theme = Theme.createEmpty();
  210. function createOrUpdate(props: Partial<PD.Values<P>> = {}, volume?: Volume) {
  211. if (volume && volume !== _volume) {
  212. _params = getParams(ctx, volume);
  213. _volume = volume;
  214. if (!_props) _props = PD.getDefaultValues(_params);
  215. }
  216. const qualityProps = getQualityProps(Object.assign({}, _props, props), _volume);
  217. Object.assign(_props, props, qualityProps);
  218. return Task.create('Creating or updating VolumeRepresentation', async runtime => {
  219. if (!visual) {
  220. visual = visualCtor(materialId, _props, webgl);
  221. } else if (visual.mustRecreate?.(_props, webgl)) {
  222. visual.destroy();
  223. visual = visualCtor(materialId, _props, webgl);
  224. }
  225. const promise = visual.createOrUpdate({ webgl, runtime }, _theme, _props, volume);
  226. if (promise) await promise;
  227. // update list of renderObjects
  228. renderObjects.length = 0;
  229. if (visual && visual.renderObject) renderObjects.push(visual.renderObject);
  230. // increment version
  231. updated.next(version++);
  232. });
  233. }
  234. function mark(loci: Loci, action: MarkerAction) {
  235. return visual ? visual.mark(loci, action) : false;
  236. }
  237. function setState(state: Partial<Representation.State>) {
  238. if (state.visible !== undefined && visual) visual.setVisibility(state.visible);
  239. if (state.alphaFactor !== undefined && visual) visual.setAlphaFactor(state.alphaFactor);
  240. if (state.pickable !== undefined && visual) visual.setPickable(state.pickable);
  241. if (state.overpaint !== undefined && visual) visual.setOverpaint(state.overpaint);
  242. if (state.transparency !== undefined && visual) visual.setTransparency(state.transparency);
  243. if (state.transform !== undefined && visual) visual.setTransform(state.transform);
  244. Representation.updateState(_state, state);
  245. }
  246. function setTheme(theme: Theme) {
  247. _theme = theme;
  248. }
  249. function destroy() {
  250. if (visual) visual.destroy();
  251. }
  252. return {
  253. label,
  254. get groupCount() {
  255. return visual ? visual.groupCount : 0;
  256. },
  257. get props () { return _props; },
  258. get params() { return _params; },
  259. get state() { return _state; },
  260. get theme() { return _theme; },
  261. renderObjects,
  262. updated,
  263. createOrUpdate,
  264. setState,
  265. setTheme,
  266. getLoci: (pickingId?: PickingId): Loci => {
  267. if (pickingId === undefined) return getLoci(_volume, _props);
  268. return visual ? visual.getLoci(pickingId) : EmptyLoci;
  269. },
  270. mark,
  271. destroy
  272. };
  273. }