@ccp-nc/crystvis-js 0.4.13

package/lib/primitives/atoms.js

@@ -0,0 +1,261 @@
+'use strict';
+
+/**
+ * @fileoverview Classes for Atom and Bond primitives
+ */
+
+import _ from 'lodash';
+import * as THREE from 'three';
+import {
+    unitSphere,
+    unitCylinder,
+    unitCircle
+} from './geometries.js';
+import * as Shaders from '../shaders/index.js';
+
+// Basic materials
+const _phong = new THREE.MeshPhongMaterial({});
+
+class AtomMesh extends THREE.Mesh {
+
+    /**
+     * Constructor for the AtomMesh object
+     * 
+     * @param {Array}  position     Position of the atom
+     * @param {Number} radius       Radius of the atom
+     * @param {Number} color        Color of the atom (hex number)
+     */
+    constructor(position, radius = 1, color = 0xffffff) {
+
+        var mat = _phong.clone();
+        mat.color = new THREE.Color(color);
+
+        super(unitSphere, mat);
+
+        this.scale.set(radius, radius, radius);
+        this.position.set(position[0], position[1], position[2]);
+        this.image = null;
+
+    }
+
+    get atom_radius() {
+        return this.geometry.parameters.radius * this.scale.x;
+    }
+
+    set atom_radius(r) {
+        var s = r / this.geometry.parameters.radius;
+        this.scale.set(s, s, s);
+    }
+
+    get atom_color() {
+        return this.material.color.getHex();
+    }
+
+    set atom_color(c) {
+        this.material.color = new THREE.Color(c);
+        this.needsUpdate = true;
+    }
+
+    get atom_opacity() {
+        return this.material.opacity;
+    }
+
+    set atom_opacity(o) {
+        this.material.transparent = (o < 1);
+        this.material.opacity = o;
+        this.needsUpdate = true;
+    }
+
+}
+
+class BondMesh extends THREE.Group {
+
+    /**
+     * Constructor for the BondMesh object
+     * 
+     * @param {Array} p0        Position of the first atom
+     * @param {Array} p1        Position of the second atom
+     * @param {Number} radius   Radius of the bond
+     * @param {Number} color0   Color of the first atom (hex number)
+     * @param {Number} color1   Color of the second atom (hex number)
+     */
+    constructor(p0, p1, radius = 1, color0 = 0xff0000, color1 = 0x00ff00) {
+
+        super();
+
+        p0 = new THREE.Vector3(p0[0], p0[1], p0[2]);
+        p1 = new THREE.Vector3(p1[0], p1[1], p1[2]);
+
+        var dp = p1.clone();
+        dp.sub(p0);
+        var l = dp.length();
+
+        // Halfpoint?
+        var hv = p0.clone();
+        hv.addScaledVector(dp, 0.5);
+
+        var rmat = new THREE.Matrix4();
+        rmat.lookAt(p0, p1, new THREE.Vector3(0, 0, 1));
+
+        var mat0 = _phong.clone();
+        mat0.color = new THREE.Color(color0);
+        var mat1 = _phong.clone();
+        mat1.color = new THREE.Color(color1);
+
+        var bond0 = new THREE.Mesh(unitCylinder, mat0);
+        bond0.scale.set(radius, radius, l / 2.0);
+        bond0.position.copy(p0.clone().addScaledVector(dp, 0.25));
+        bond0.setRotationFromMatrix(rmat);
+        var bond1 = new THREE.Mesh(unitCylinder, mat1);
+        bond1.scale.set(radius, radius, l / 2.0);
+        bond1.position.copy(p1.clone().addScaledVector(dp, -0.25));
+        bond1.setRotationFromMatrix(rmat);
+
+        this.add(bond0);
+        this.add(bond1);
+    }
+
+    get bond_radius() {
+        return this.children[0].geometry.parameters.radiusTop * this.children[0].scale.x;
+    }
+
+    set bond_radius(r) {
+        var r0 = this.children[0].geometry.parameters.radiusTop;
+        var s = r / r0;
+        var z = this.children[0].scale.z;
+        this.children[0].scale.set(s, s, z);
+        this.children[1].scale.set(s, s, z);
+    }
+
+    get bond_color_1() {
+        return this.children[0].material.color.getHex();
+    }
+
+    set bond_color_1(c) {
+        this.children[0].material.color = new THREE.Color(c);
+    }
+
+    get bond_color_2() {
+        return this.children[1].material.color.getHex();
+    }
+
+    set bond_color_2(c) {
+        this.children[1].material.color = new THREE.Color(c);
+    }
+
+    get bond_opacity_1() {
+        return this.children[0].material.opacity;
+    }
+
+    set bond_opacity_1(o) {
+        this.children[0].material.transparent = (o < 1);
+        this.children[0].material.opacity = o;
+        this.children[0].material.needsUpdate = true;
+    }
+
+    get bond_opacity_2() {
+        return this.children[1].material.opacity;
+    }
+
+    set bond_opacity_2(o) {
+        this.children[1].material.transparent = (o < 1);
+        this.children[1].material.opacity = o;
+        this.children[1].material.needsUpdate = true;
+    }
+
+}
+
+class AuraMesh extends THREE.Mesh {
+
+    constructor(parameters = {}) {
+
+        var defaults = {
+            scale: 1,
+            radius: 1,
+            fill: 0xaaaa00,
+            border: 0xffff00,
+            opacity: 0.5,
+            borderFraction: 0.08
+        };
+
+        parameters = _.merge(defaults, parameters);
+
+        var mat = new THREE.RawShaderMaterial({
+            uniforms: {
+                targScale: new THREE.Uniform(parameters.scale),
+                targRadius: new THREE.Uniform(parameters.radius),
+                fill: new THREE.Uniform(new THREE.Color(parameters.fill)),
+                border: new THREE.Uniform(new THREE.Color(parameters.border)),
+                border_f: new THREE.Uniform(parameters.borderFraction),
+                opacity: new THREE.Uniform(parameters.opacity)
+            },
+            side: THREE.DoubleSide,
+            transparent: true,
+            vertexShader: Shaders.auraVertShader,
+            fragmentShader: Shaders.auraFragShader
+        });
+
+        super(unitCircle, mat);
+
+    }
+
+    get scale() {
+        return this.material.uniforms.targScale.value;
+    }
+
+    set scale(s) {
+        this.material.uniforms.targScale.value = s;
+        this.material.uniformsNeedUpdate = true;
+    }
+
+    get radius() {
+        return this.material.uniforms.targRadius.value;
+    }
+
+    set radius(r) {
+        this.material.uniforms.targRadius.value = r;
+        this.material.uniformsNeedUpdate = true;
+    }
+
+    get fill() {
+        return this.material.uniforms.fill.value.getHex();
+    }
+
+    set fill(c) {
+        this.material.uniforms.fill.value = new THREE.Color(c);
+        this.material.uniformsNeedUpdate = true;
+    }
+
+    get border() {
+        return this.material.uniforms.border.value.getHex();
+    }
+
+    set border(c) {
+        this.material.uniforms.border.value = new THREE.Color(c);
+        this.material.uniformsNeedUpdate = true;
+    }
+
+    get borderFraction() {
+        return this.material.uniforms.border_f.value;
+    }
+
+    set borderFraction(f) {
+        this.material.uniforms.border_f.value = f;
+        this.material.uniformsNeedUpdate = true;
+    }
+
+    get opacity() {
+        return this.material.uniforms.opacity.value;
+    }
+
+    set opacity(o) {
+        this.material.uniforms.opacity.value = o;
+        this.material.uniformsNeedUpdate = true;
+    }
+}
+
+export {
+    AtomMesh,
+    BondMesh,
+    AuraMesh
+};

package/lib/primitives/cell.js

@@ -0,0 +1,160 @@
+'use strict';
+
+/**
+ * @fileoverview Classes for lattice box primitives
+ */
+
+import _ from 'lodash';
+import * as THREE from 'three';
+import { Vector3 } from 'three';
+import { cellMatrix3 } from '../utils.js';
+
+// Cell box
+class BoxMesh extends THREE.LineSegments {
+
+    /**
+     * Constructor for BoxMesh primitive
+     * 
+     * @param  {Array}  lattice     Lattice parameters for the unit cell
+     * @param  {Object} parameters  Options:
+     *                                  color
+     *                                  
+     */
+    constructor(lattice, parameters = {}) {
+
+        const defaults = {
+            color: 0xffffff,
+        }
+
+        parameters = _.merge(defaults, parameters);
+
+        if (lattice instanceof Array) {
+            lattice = cellMatrix3(lattice);
+        }
+
+        var boxGeom = new THREE.BoxGeometry(1, 1, 1);
+        boxGeom = new THREE.EdgesGeometry(boxGeom); // Convert to wireframe
+
+        var boxMat = new THREE.LineBasicMaterial({
+            color: parameters.color,
+        });
+
+        super(boxGeom, boxMat);
+
+        // Set the actual lattice basis
+        this.matrix.setFromMatrix3(lattice);
+        this.matrix.setPosition( (new Vector3(0.5, 0.5, 0.5)).applyMatrix3(lattice) );
+        this.matrixAutoUpdate = false;
+    }
+
+    get color() {
+        return this.material.color.getHex();
+    }
+
+    set color(c) {
+        this.material.color = new THREE.Color(c);
+        this.needsUpdate = true;
+    }
+
+
+}
+
+// Arrows for axes
+class AxesMesh extends THREE.Group {
+
+    /**
+     * Constructor for AxesMesh primitive
+     * 
+     * @param  {Array}  lattice     Lattice parameters for the unit cell
+     * @param  {Object} parameters  Options:
+     *                                  linewidth
+     *                                  xColor
+     *                                  yColor
+     *                                  zColor
+     * 
+     */
+    constructor(lattice, parameters = {}) {
+
+        var defaults = {
+            linewidth: 1.2,
+            xColor: 0xff0000,
+            yColor: 0x00ff00,
+            zColor: 0x0000ff
+        };
+
+        parameters = _.merge(defaults, parameters);
+
+        super();
+
+        if (lattice instanceof Array) {
+            var lc = lattice;
+            lattice = new THREE.Matrix3();
+            lattice.set(lc[0][0], lc[1][0], lc[2][0],
+                lc[0][1], lc[1][1], lc[2][1],
+                lc[0][2], lc[1][2], lc[2][2]);
+        }
+
+        var origin = new THREE.Vector3(0, 0, 0);
+        var elems = lattice.elements;
+
+        var colors = [
+            parameters.xColor,
+            parameters.yColor,
+            parameters.zColor
+        ];
+
+        for (var i = 0; i < 3; ++i) {
+            var dir = new THREE.Vector3(elems[3 * i],
+                elems[3 * i + 1],
+                elems[3 * i + 2]);
+            var l = dir.length() / 3.0;
+            dir.normalize();
+            var arr = new THREE.ArrowHelper(dir, origin, l, colors[i]);
+            arr.line.material.linewidth = parameters.linewidth;
+            this.add(arr);
+        }
+    }
+
+    get xColor() {
+        return this.children[0].line.material.color.getHex();
+    }
+
+    set xColor(c) {
+        this.children[0].line.material.color = new THREE.Color(c);
+        this.children[0].cone.material.color = new THREE.Color(c);
+    }
+
+    get yColor() {
+        return this.children[1].line.material.color.getHex();
+    }
+
+    set yColor(c) {
+        this.children[1].line.material.color = new THREE.Color(c);
+        this.children[1].cone.material.color = new THREE.Color(c);
+    }
+
+    get zColor() {
+        return this.children[2].line.material.color.getHex();
+    }
+
+    set zColor(c) {
+        this.children[2].line.material.color = new THREE.Color(c);
+        this.children[2].cone.material.color = new THREE.Color(c);
+    }
+
+    get linewidth() {
+        return this.children[0].line.material.linewidth;
+    }
+
+    set linewidth(lw) {
+        for (var i = 0; i < 3; ++i) {
+            this.children[i].line.material.linewidth = lw;
+        }
+    }
+
+}
+
+export {
+    BoxMesh,
+    AxesMesh
+};

package/lib/primitives/dither.js

@@ -0,0 +1,156 @@
+'use strict';
+
+/** 
+ * @fileoverview Functions for a dithering-based transparent material
+ * @module
+ */
+
+import _ from 'lodash';
+import * as THREE from 'three';
+import * as Shaders from '../shaders/index.js';
+
+/**
+ * Recursive function to generate a power-of-two ordered dithering matrix
+ * 
+ * @param {int} n          Power of two index. The returned matrix will have a 2^n side.
+ */
+function makeDitherMatrix(n) {
+    var dM2 = [0., 0.5, 0.75, 0.25];
+    if (n <= 1) {
+        return dM2;
+    } else {
+        var M1 = [];
+        var M0 = makeDitherMatrix(n - 1);
+        var N0 = Math.pow(2, n - 1);
+        var N1 = Math.pow(2, n);
+        var N02 = Math.pow(2, 2 * n - 2);
+        var N12 = Math.pow(2, 2 * n);
+        for (var i = 0; i < N12; ++i) {
+            var x1 = i % N1;
+            var y1 = Math.floor(i / N1);
+            var x2 = Math.floor(x1 / N0);
+            var y2 = Math.floor(y1 / N0);
+            var v = M0[x1 % N0 + (y1 % N0) * N0] + dM2[x2 + 2 * y2] / N02;
+            M1.push(v);
+        }
+        return M1;
+    }
+}
+
+/**
+ * Generate an ordered dithering matrix in the form of a THREE.js DataTexture
+ * 
+ * @param {int} n           Power of two index. The returned matrix will have a 2^n side.
+ */
+function makeDitherTexture(n) {
+    // n is the power of two exponent
+    var N = Math.pow(2, n);
+    var dM = makeDitherMatrix(n);
+    dM = dM.map(function(x) {
+        return Math.floor((x + 0.5 / (N * N)) * 256);
+    });
+    dM = new Uint8Array(dM);
+
+    var tx = new THREE.DataTexture(dM, N, N, THREE.RedFormat);
+    tx.needsUpdate = true;
+
+    return tx;
+}
+
+/**
+ * Generate a pseudorandom shift for the dither texture. Designed to ensure
+ * reproducibility given a float seed
+ *
+ * @param  {int}    N       Size of texture
+ * @param  {float}  seed    Seed number used to generate the shift
+ */
+function rndShift(N, seed) {
+    var a = 349588123;
+    var b = 123958341;
+    var sx = Math.pow(Math.sin(a*seed+b), 2)*N;
+    var sy = Math.pow(Math.cos(b*seed+a), 2)*N;
+    return new THREE.Vector2(sx, sy);
+}
+
+class DitherMaterial extends THREE.ShaderMaterial {
+
+    /**
+     * Initialise a DitherMaterial, a material that offers transparency with a
+     * dithering method (and thus meshes better when multiple transparent
+     * surfaces are overlapping).
+     *  
+     * @param  {Object} parameters  Options:
+     *                                  - color
+     *                                  - opacity
+     *                                  - illumination 
+     *                                  - n (controls the size of the dither texture, mostly can be left alone)
+     *                                  - netting (if true, uses a different dithering system, applying object instead of screen
+     *                                             coordinates)
+     *                                  - netScale (scaling factor for the object coordinates; only used if netting = true)
+     */
+    constructor(parameters = {}) {
+
+        var defaults = {
+            color: 0xffffff,
+            opacity: 0.5,
+            illumination: 0.5,
+            n: 5,
+            netting: false,
+            netScale: 5.0,
+            shiftSeed: null
+        };
+
+
+        parameters = _.merge(defaults, parameters);
+
+        // Safety check to avoid completely bricking the user's memory
+        var n = Math.min(parameters.n, 10); // This way ditherTex will never be bigger than 1024x1024
+        var N = Math.pow(2, n);
+        var shift = rndShift(N, (parameters.shiftSeed == null? Math.random() : parameters.shiftSeed));
+        var ditherTex = makeDitherTexture(n);
+
+        super({
+            uniforms: {
+                color: new THREE.Uniform(new THREE.Color(parameters.color)),
+                opacity: new THREE.Uniform(parameters.opacity),
+                illum: new THREE.Uniform(parameters.illumination),
+                shift: new THREE.Uniform(shift),
+                ditherN: new THREE.Uniform(N),
+                ditherTex: new THREE.Uniform(ditherTex),
+                netting: new THREE.Uniform(parameters.netting),
+                netScale: new THREE.Uniform(parameters.netScale),
+            },
+            fragmentShader: Shaders.ditherFragShader,
+            vertexShader: Shaders.ditherVertShader,
+            depthTest: true,
+        });
+
+        this.side = THREE.DoubleSide;
+    }
+
+    get color() {
+        return this.uniforms.color.value.getHex();
+    }
+
+    set color(c) {
+        this.uniforms.color.value = new THREE.Color(c);
+        this.uniformsNeedUpdate = true;
+    }
+
+    get opacity() {
+        return this.uniforms.opacity.value;
+    }
+
+    set opacity(o) {
+        if (this.uniforms) {
+            // This check is necessary since we're overriding the original 
+            // property, otherwise we get an error when calling super()
+            this.uniforms.opacity.value = o;
+            this.uniformsNeedUpdate = true;
+        }
+    }
+}
+
+export {
+    DitherMaterial
+};