units-visual.ts 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  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 { Structure, Unit, StructureElement } from '../../mol-model/structure';
  8. import { RepresentationProps } from '../representation';
  9. import { Visual, VisualContext } from '../visual';
  10. import { Geometry, GeometryUtils } from '../../mol-geo/geometry/geometry';
  11. import { LocationIterator } from '../../mol-geo/util/location-iterator';
  12. import { Theme } from '../../mol-theme/theme';
  13. import { createUnitsTransform, includesUnitKind } from './visual/util/common';
  14. import { createRenderObject, RenderObjectValues, GraphicsRenderObject } from '../../mol-gl/render-object';
  15. import { PickingId } from '../../mol-geo/geometry/picking';
  16. import { Loci, isEveryLoci, EmptyLoci } from '../../mol-model/loci';
  17. import { Interval } from '../../mol-data/int';
  18. import { VisualUpdateState } from '../util';
  19. import { ColorTheme } from '../../mol-theme/color';
  20. import { createMarkers } from '../../mol-geo/geometry/marker-data';
  21. import { MarkerAction } from '../../mol-util/marker-action';
  22. import { ValueCell, deepEqual } from '../../mol-util';
  23. import { createSizes } from '../../mol-geo/geometry/size-data';
  24. import { createColors } from '../../mol-geo/geometry/color-data';
  25. import { Mat4 } from '../../mol-math/linear-algebra';
  26. import { Overpaint } from '../../mol-theme/overpaint';
  27. import { Transparency } from '../../mol-theme/transparency';
  28. import { StructureMeshParams, StructureSpheresParams, StructurePointsParams, StructureLinesParams, StructureDirectVolumeParams, StructureTextureMeshParams, StructureTextParams, StructureParams } from './representation';
  29. import { Mesh } from '../../mol-geo/geometry/mesh/mesh';
  30. import { SizeTheme } from '../../mol-theme/size';
  31. import { Spheres } from '../../mol-geo/geometry/spheres/spheres';
  32. import { Points } from '../../mol-geo/geometry/points/points';
  33. import { Lines } from '../../mol-geo/geometry/lines/lines';
  34. import { Text } from '../../mol-geo/geometry/text/text';
  35. import { DirectVolume } from '../../mol-geo/geometry/direct-volume/direct-volume';
  36. import { TextureMesh } from '../../mol-geo/geometry/texture-mesh/texture-mesh';
  37. import { SizeValues } from '../../mol-gl/renderable/schema';
  38. export type StructureGroup = { structure: Structure, group: Unit.SymmetryGroup }
  39. export interface UnitsVisual<P extends RepresentationProps = {}> extends Visual<StructureGroup, P> { }
  40. function createUnitsRenderObject<G extends Geometry>(group: Unit.SymmetryGroup, geometry: G, locationIt: LocationIterator, theme: Theme, props: PD.Values<Geometry.Params<G>>, materialId: number) {
  41. const { createValues, createRenderableState } = Geometry.getUtils(geometry)
  42. const transform = createUnitsTransform(group)
  43. const values = createValues(geometry, transform, locationIt, theme, props)
  44. const state = createRenderableState(props)
  45. return createRenderObject(geometry.kind, values, state, materialId)
  46. }
  47. interface UnitsVisualBuilder<P extends StructureParams, G extends Geometry> {
  48. defaultProps: PD.Values<P>
  49. createGeometry(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: PD.Values<P>, geometry?: G): Promise<G> | G
  50. createLocationIterator(structureGroup: StructureGroup): LocationIterator
  51. getLoci(pickingId: PickingId, structureGroup: StructureGroup, id: number): Loci
  52. eachLocation(loci: Loci, structureGroup: StructureGroup, apply: (interval: Interval) => boolean): boolean
  53. setUpdateState(state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme, newStructureGroup: StructureGroup, currentStructureGroup: StructureGroup): void
  54. }
  55. interface UnitsVisualGeometryBuilder<P extends StructureParams, G extends Geometry> extends UnitsVisualBuilder<P, G> {
  56. geometryUtils: GeometryUtils<G>
  57. }
  58. export function UnitsVisual<G extends Geometry, P extends StructureParams & Geometry.Params<G>>(builder: UnitsVisualGeometryBuilder<P, G>, materialId: number): UnitsVisual<P> {
  59. const { defaultProps, createGeometry, createLocationIterator, getLoci, eachLocation, setUpdateState } = builder
  60. const { createEmpty: createEmptyGeometry, updateValues, updateBoundingSphere, updateRenderableState } = builder.geometryUtils
  61. const updateState = VisualUpdateState.create()
  62. let renderObject: GraphicsRenderObject<G['kind']> | undefined
  63. let newProps: PD.Values<P> = Object.assign({}, defaultProps)
  64. let newTheme: Theme = Theme.createEmpty()
  65. let newStructureGroup: StructureGroup
  66. let currentProps: PD.Values<P>
  67. let currentTheme: Theme
  68. let currentStructureGroup: StructureGroup
  69. let geometry: G
  70. let locationIt: LocationIterator
  71. function prepareUpdate(theme: Theme, props: Partial<PD.Values<P>> = {}, structureGroup: StructureGroup) {
  72. if (!structureGroup && !currentStructureGroup) {
  73. throw new Error('missing structureGroup')
  74. }
  75. newProps = Object.assign({}, currentProps, props)
  76. newTheme = theme
  77. newStructureGroup = structureGroup
  78. VisualUpdateState.reset(updateState)
  79. if (!renderObject) {
  80. updateState.createNew = true
  81. } else if (!currentStructureGroup || !Unit.SymmetryGroup.areInvariantElementsEqual(newStructureGroup.group, currentStructureGroup.group)) {
  82. updateState.createNew = true
  83. }
  84. if (updateState.createNew) {
  85. updateState.createGeometry = true
  86. return
  87. }
  88. setUpdateState(updateState, newProps, currentProps, newTheme, currentTheme, newStructureGroup, currentStructureGroup)
  89. if (!ColorTheme.areEqual(newTheme.color, currentTheme.color)) {
  90. // console.log('new colorTheme')
  91. updateState.updateColor = true
  92. }
  93. if (!deepEqual(newProps.unitKinds, currentProps.unitKinds)) {
  94. // console.log('new unitKinds')
  95. updateState.createGeometry = true
  96. }
  97. if (newStructureGroup.group.transformHash !== currentStructureGroup.group.transformHash) {
  98. // console.log('new transformHash')
  99. if (newStructureGroup.group.units.length !== currentStructureGroup.group.units.length || updateState.updateColor) {
  100. updateState.updateTransform = true
  101. } else {
  102. updateState.updateMatrix = true
  103. }
  104. }
  105. // check if the conformation of unit.model has changed
  106. const newUnit = newStructureGroup.group.units[0]
  107. const currentUnit = currentStructureGroup.group.units[0]
  108. // if (Unit.conformationId(newUnit) !== Unit.conformationId(currentUnit)) {
  109. if (Unit.conformationId(newUnit) !== Unit.conformationId(currentUnit)
  110. // TODO: this needs more attention
  111. || newUnit.conformation !== currentUnit.conformation) {
  112. // console.log('new conformation')
  113. updateState.updateTransform = true;
  114. updateState.createGeometry = true
  115. }
  116. if (updateState.updateTransform) {
  117. updateState.updateColor = true
  118. updateState.updateSize = true
  119. updateState.updateMatrix = true
  120. }
  121. if (updateState.createGeometry) {
  122. updateState.updateColor = true
  123. updateState.updateSize = true
  124. }
  125. }
  126. function update(newGeometry?: G) {
  127. if (updateState.createNew) {
  128. locationIt = createLocationIterator(newStructureGroup)
  129. if (newGeometry) {
  130. renderObject = createUnitsRenderObject(newStructureGroup.group, newGeometry, locationIt, newTheme, newProps, materialId)
  131. } else {
  132. throw new Error('expected geometry to be given')
  133. }
  134. } else {
  135. if (!renderObject) {
  136. throw new Error('expected renderObject to be available')
  137. }
  138. if (updateState.updateTransform) {
  139. // console.log('update transform')
  140. locationIt = createLocationIterator(newStructureGroup)
  141. const { instanceCount, groupCount } = locationIt
  142. createMarkers(instanceCount * groupCount, renderObject.values)
  143. }
  144. if (updateState.updateMatrix) {
  145. // console.log('update matrix')
  146. createUnitsTransform(newStructureGroup.group, renderObject.values)
  147. }
  148. if (updateState.createGeometry) {
  149. // console.log('update geometry')
  150. if (newGeometry) {
  151. ValueCell.update(renderObject.values.drawCount, Geometry.getDrawCount(newGeometry))
  152. } else {
  153. throw new Error('expected geometry to be given')
  154. }
  155. }
  156. if (updateState.updateTransform || updateState.createGeometry) {
  157. // console.log('UnitsVisual.updateBoundingSphere')
  158. updateBoundingSphere(renderObject.values as RenderObjectValues<G['kind']>, newGeometry || geometry)
  159. }
  160. if (updateState.updateSize) {
  161. // not all geometries have size data, so check here
  162. if ('uSize' in renderObject.values) {
  163. // console.log('update size')
  164. createSizes(locationIt, newTheme.size, renderObject.values as SizeValues)
  165. }
  166. }
  167. if (updateState.updateColor) {
  168. // console.log('update color')
  169. createColors(locationIt, newTheme.color, renderObject.values)
  170. }
  171. updateValues(renderObject.values as RenderObjectValues<G['kind']>, newProps)
  172. updateRenderableState(renderObject.state, newProps)
  173. }
  174. currentProps = newProps
  175. currentTheme = newTheme
  176. currentStructureGroup = newStructureGroup
  177. if (newGeometry) geometry = newGeometry
  178. }
  179. function _createGeometry(ctx: VisualContext, unit: Unit, structure: Structure, theme: Theme, props: PD.Values<P>, geometry?: G) {
  180. return includesUnitKind(props.unitKinds, unit)
  181. ? createGeometry(ctx, unit, structure, theme, props, geometry)
  182. : createEmptyGeometry(geometry)
  183. }
  184. function lociIsSuperset(loci: Loci) {
  185. if (isEveryLoci(loci)) return true
  186. if (Structure.isLoci(loci) && Structure.areRootsEquivalent(loci.structure, currentStructureGroup.structure)) return true
  187. if (StructureElement.Loci.is(loci) && Structure.areRootsEquivalent(loci.structure, currentStructureGroup.structure)) {
  188. if (StructureElement.Loci.isWholeStructure(loci)) return true
  189. }
  190. return false
  191. }
  192. function lociApply(loci: Loci, apply: (interval: Interval) => boolean) {
  193. if (lociIsSuperset(loci)) {
  194. return apply(Interval.ofBounds(0, locationIt.groupCount * locationIt.instanceCount))
  195. } else {
  196. return eachLocation(loci, currentStructureGroup, apply)
  197. }
  198. }
  199. return {
  200. get groupCount() { return locationIt ? locationIt.count : 0 },
  201. get renderObject () { return locationIt && locationIt.count ? renderObject : undefined },
  202. createOrUpdate(ctx: VisualContext, theme: Theme, props: Partial<PD.Values<P>> = {}, structureGroup?: StructureGroup) {
  203. prepareUpdate(theme, props, structureGroup || currentStructureGroup)
  204. if (updateState.createGeometry) {
  205. const newGeometry = _createGeometry(ctx, newStructureGroup.group.units[0], newStructureGroup.structure, newTheme, newProps, geometry)
  206. return newGeometry instanceof Promise ? newGeometry.then(update) : update(newGeometry as G)
  207. } else {
  208. update()
  209. }
  210. },
  211. getLoci(pickingId: PickingId) {
  212. return renderObject ? getLoci(pickingId, currentStructureGroup, renderObject.id) : EmptyLoci
  213. },
  214. mark(loci: Loci, action: MarkerAction) {
  215. return Visual.mark(renderObject, loci, action, lociApply)
  216. },
  217. setVisibility(visible: boolean) {
  218. Visual.setVisibility(renderObject, visible)
  219. },
  220. setAlphaFactor(alphaFactor: number) {
  221. Visual.setAlphaFactor(renderObject, alphaFactor)
  222. },
  223. setPickable(pickable: boolean) {
  224. Visual.setPickable(renderObject, pickable)
  225. },
  226. setTransform(matrix?: Mat4, instanceMatrices?: Float32Array | null) {
  227. Visual.setTransform(renderObject, matrix, instanceMatrices)
  228. },
  229. setOverpaint(overpaint: Overpaint) {
  230. Visual.setOverpaint(renderObject, overpaint, lociApply, true)
  231. },
  232. setTransparency(transparency: Transparency) {
  233. Visual.setTransparency(renderObject, transparency, lociApply, true)
  234. },
  235. destroy() {
  236. // TODO
  237. renderObject = undefined
  238. }
  239. }
  240. }
  241. // mesh
  242. export const UnitsMeshParams = { ...StructureMeshParams, ...StructureParams }
  243. export type UnitsMeshParams = typeof UnitsMeshParams
  244. export interface UnitsMeshVisualBuilder<P extends UnitsMeshParams> extends UnitsVisualBuilder<P, Mesh> { }
  245. export function UnitsMeshVisual<P extends UnitsMeshParams>(builder: UnitsMeshVisualBuilder<P>, materialId: number): UnitsVisual<P> {
  246. return UnitsVisual<Mesh, P>({
  247. ...builder,
  248. setUpdateState: (state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme, newStructureGroup: StructureGroup, currentStructureGroup: StructureGroup) => {
  249. builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme, newStructureGroup, currentStructureGroup)
  250. if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.createGeometry = true
  251. },
  252. geometryUtils: Mesh.Utils
  253. }, materialId)
  254. }
  255. // spheres
  256. export const UnitsSpheresParams = { ...StructureSpheresParams, ...StructureParams }
  257. export type UnitsSpheresParams = typeof UnitsSpheresParams
  258. export interface UnitsSpheresVisualBuilder<P extends UnitsSpheresParams> extends UnitsVisualBuilder<P, Spheres> { }
  259. export function UnitsSpheresVisual<P extends UnitsSpheresParams>(builder: UnitsSpheresVisualBuilder<P>, materialId: number): UnitsVisual<P> {
  260. return UnitsVisual<Spheres, P>({
  261. ...builder,
  262. setUpdateState: (state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme, newStructureGroup: StructureGroup, currentStructureGroup: StructureGroup) => {
  263. builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme, newStructureGroup, currentStructureGroup)
  264. if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.updateSize = true
  265. },
  266. geometryUtils: Spheres.Utils
  267. }, materialId)
  268. }
  269. // points
  270. export const UnitsPointsParams = { ...StructurePointsParams, ...StructureParams }
  271. export type UnitsPointsParams = typeof UnitsPointsParams
  272. export interface UnitsPointVisualBuilder<P extends UnitsPointsParams> extends UnitsVisualBuilder<P, Points> { }
  273. export function UnitsPointsVisual<P extends UnitsPointsParams>(builder: UnitsPointVisualBuilder<P>, materialId: number): UnitsVisual<P> {
  274. return UnitsVisual<Points, P>({
  275. ...builder,
  276. setUpdateState: (state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme, newStructureGroup: StructureGroup, currentStructureGroup: StructureGroup) => {
  277. builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme, newStructureGroup, currentStructureGroup)
  278. if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.updateSize = true
  279. },
  280. geometryUtils: Points.Utils
  281. }, materialId)
  282. }
  283. // lines
  284. export const UnitsLinesParams = { ...StructureLinesParams, ...StructureParams }
  285. export type UnitsLinesParams = typeof UnitsLinesParams
  286. export interface UnitsLinesVisualBuilder<P extends UnitsLinesParams> extends UnitsVisualBuilder<P, Lines> { }
  287. export function UnitsLinesVisual<P extends UnitsLinesParams>(builder: UnitsLinesVisualBuilder<P>, materialId: number): UnitsVisual<P> {
  288. return UnitsVisual<Lines, P>({
  289. ...builder,
  290. setUpdateState: (state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme, newStructureGroup: StructureGroup, currentStructureGroup: StructureGroup) => {
  291. builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme, newStructureGroup, currentStructureGroup)
  292. if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.updateSize = true
  293. },
  294. geometryUtils: Lines.Utils
  295. }, materialId)
  296. }
  297. // text
  298. export const UnitsTextParams = { ...StructureTextParams, ...StructureParams }
  299. export type UnitsTextParams = typeof UnitsTextParams
  300. export interface UnitsTextVisualBuilder<P extends UnitsTextParams> extends UnitsVisualBuilder<P, Text> { }
  301. export function UnitsTextVisual<P extends UnitsTextParams>(builder: UnitsTextVisualBuilder<P>, materialId: number): UnitsVisual<P> {
  302. return UnitsVisual<Text, P>({
  303. ...builder,
  304. setUpdateState: (state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme, newStructureGroup: StructureGroup, currentStructureGroup: StructureGroup) => {
  305. builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme, newStructureGroup, currentStructureGroup)
  306. if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.updateSize = true
  307. if (newProps.background !== currentProps.background) state.createGeometry = true
  308. if (newProps.backgroundMargin !== currentProps.backgroundMargin) state.createGeometry = true
  309. if (newProps.tether !== currentProps.tether) state.createGeometry = true
  310. if (newProps.tetherLength !== currentProps.tetherLength) state.createGeometry = true
  311. if (newProps.tetherBaseWidth !== currentProps.tetherBaseWidth) state.createGeometry = true
  312. if (newProps.attachment !== currentProps.attachment) state.createGeometry = true
  313. },
  314. geometryUtils: Text.Utils
  315. }, materialId)
  316. }
  317. // direct-volume
  318. export const UnitsDirectVolumeParams = { ...StructureDirectVolumeParams, ...StructureParams }
  319. export type UnitsDirectVolumeParams = typeof UnitsDirectVolumeParams
  320. export interface UnitsDirectVolumeVisualBuilder<P extends UnitsDirectVolumeParams> extends UnitsVisualBuilder<P, DirectVolume> { }
  321. export function UnitsDirectVolumeVisual<P extends UnitsDirectVolumeParams>(builder: UnitsDirectVolumeVisualBuilder<P>, materialId: number): UnitsVisual<P> {
  322. return UnitsVisual<DirectVolume, P>({
  323. ...builder,
  324. setUpdateState: (state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme, newStructureGroup: StructureGroup, currentStructureGroup: StructureGroup) => {
  325. builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme, newStructureGroup, currentStructureGroup)
  326. if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.createGeometry = true
  327. },
  328. geometryUtils: DirectVolume.Utils
  329. }, materialId)
  330. }
  331. // texture-mesh
  332. export const UnitsTextureMeshParams = { ...StructureTextureMeshParams, ...StructureParams }
  333. export type UnitsTextureMeshParams = typeof UnitsTextureMeshParams
  334. export interface UnitsTextureMeshVisualBuilder<P extends UnitsTextureMeshParams> extends UnitsVisualBuilder<P, TextureMesh> { }
  335. export function UnitsTextureMeshVisual<P extends UnitsTextureMeshParams>(builder: UnitsTextureMeshVisualBuilder<P>, materialId: number): UnitsVisual<P> {
  336. return UnitsVisual<TextureMesh, P>({
  337. ...builder,
  338. setUpdateState: (state: VisualUpdateState, newProps: PD.Values<P>, currentProps: PD.Values<P>, newTheme: Theme, currentTheme: Theme, newStructureGroup: StructureGroup, currentStructureGroup: StructureGroup) => {
  339. builder.setUpdateState(state, newProps, currentProps, newTheme, currentTheme, newStructureGroup, currentStructureGroup)
  340. if (!SizeTheme.areEqual(newTheme.size, currentTheme.size)) state.createGeometry = true
  341. },
  342. geometryUtils: TextureMesh.Utils
  343. }, materialId)
  344. }