Select Git revision
render-shape.ts
render-shape.ts 4.71 KiB
/**
* Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
import './index.html'
import { resizeCanvas } from '../../mol-canvas3d/util';
import { Representation } from '../../mol-repr/representation';
import { Canvas3D } from '../../mol-canvas3d/canvas3d';
import { lociLabel } from '../../mol-theme/label';
import { MarkerAction } from '../../mol-util/marker-action';
import { EveryLoci } from '../../mol-model/loci';
import { RuntimeContext, Progress } from '../../mol-task';
import { Mesh } from '../../mol-geo/geometry/mesh/mesh';
import { MeshBuilder } from '../../mol-geo/geometry/mesh/mesh-builder';
import { Mat4, Vec3 } from '../../mol-math/linear-algebra';
import { Sphere } from '../../mol-geo/primitive/sphere';
import { ColorNames } from '../../mol-util/color/names';
import { Shape } from '../../mol-model/shape';
import { ShapeRepresentation } from '../../mol-repr/shape/representation';
const parent = document.getElementById('app')!
parent.style.width = '100%'
parent.style.height = '100%'
const canvas = document.createElement('canvas')
parent.appendChild(canvas)
resizeCanvas(canvas, parent)
const info = document.createElement('div')
info.style.position = 'absolute'
info.style.fontFamily = 'sans-serif'
info.style.fontSize = '24pt'
info.style.bottom = '20px'
info.style.right = '20px'
info.style.color = 'white'
parent.appendChild(info)
let prevReprLoci = Representation.Loci.Empty
const canvas3d = Canvas3D.fromCanvas(canvas)
canvas3d.animate()
canvas3d.input.move.subscribe(({x, y}) => {
const pickingId = canvas3d.identify(x, y)
let label = ''
if (pickingId) {
const reprLoci = canvas3d.getLoci(pickingId)
label = lociLabel(reprLoci.loci)
if (!Representation.Loci.areEqual(prevReprLoci, reprLoci)) {
canvas3d.mark(prevReprLoci, MarkerAction.RemoveHighlight)
canvas3d.mark(reprLoci, MarkerAction.Highlight)
prevReprLoci = reprLoci
}
} else {
canvas3d.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight)
prevReprLoci = Representation.Loci.Empty
}
info.innerText = label
})
/**
* Create a mesh of spheres at given centers
* - asynchronous (using async/await)
* - progress tracking (via `ctx.update`)
* - re-use storage from an existing mesh if given
*/
async function getSphereMesh(ctx: RuntimeContext, centers: number[], mesh?: Mesh) {
const builderState = MeshBuilder.createState(centers.length * 128, centers.length * 128 / 2, mesh)
const t = Mat4.identity()
const v = Vec3.zero()