@ccp-nc/crystvis-js 0.4.13

package/lib/selbox.js

@@ -0,0 +1,361 @@
+'use strict';
+
+/** 
+ * @fileoverview Selection box handling for the renderer. Taken from the THREE
+ * example files in
+ *
+ * 'three/examples/jsm/interactive/SelectionBox.js'
+ * 'three/examples/jsm/interactive/SelectionHelper.js'
+ *
+ * but slightly customised for the specific needs of this app.
+ * 
+ * @module
+ */
+
+import {
+    Frustum,
+    Vector3,
+    Vector2
+} from 'three';
+import $ from 'jquery';
+
+import {
+    AtomMesh
+} from './primitives/index.js';
+
+/**
+ * This is a class to check whether objects are in a selection area in 3D space
+ */
+
+var SelectionBox = (function() {
+
+    var frustum = new Frustum();
+    var center = new Vector3();
+
+    var tmpPoint = new Vector3();
+
+    var vecNear = new Vector3();
+    var vecTopLeft = new Vector3();
+    var vecTopRight = new Vector3();
+    var vecDownRight = new Vector3();
+    var vecDownLeft = new Vector3();
+
+    var vecFarTopLeft = new Vector3();
+    var vecFarTopRight = new Vector3();
+    var vecFarDownRight = new Vector3();
+    var vecFarDownLeft = new Vector3();
+
+    var vectemp1 = new Vector3();
+    var vectemp2 = new Vector3();
+    var vectemp3 = new Vector3();
+
+    function SelectionBox(camera, scene, deep) {
+
+        this.camera = camera;
+        this.scene = scene;
+        this.startPoint = new Vector3();
+        this.endPoint = new Vector3();
+        this.collection = [];
+        this.deep = deep || Number.MAX_VALUE;
+
+    }
+
+    SelectionBox.prototype.select = function(startPoint, endPoint, target = null) {
+
+        this.startPoint = startPoint || this.startPoint;
+        this.endPoint = endPoint || this.endPoint;
+        this.collection = [];
+
+        target = target || this.scene;
+
+        this.updateFrustum(this.startPoint, this.endPoint);
+        this.searchChildInFrustum(frustum, target);
+
+        return this.collection;
+
+    };
+
+    SelectionBox.prototype.updateFrustum = function(startPoint, endPoint) {
+
+        startPoint = startPoint || this.startPoint;
+        endPoint = endPoint || this.endPoint;
+
+        // Avoid invalid frustum
+
+        if (startPoint.x === endPoint.x) {
+
+            endPoint.x += Number.EPSILON;
+
+        }
+
+        if (startPoint.y === endPoint.y) {
+
+            endPoint.y += Number.EPSILON;
+
+        }
+
+        this.camera.updateProjectionMatrix();
+        this.camera.updateMatrixWorld();
+
+        if (this.camera.isPerspectiveCamera) {
+
+            tmpPoint.copy(startPoint);
+            tmpPoint.x = Math.min(startPoint.x, endPoint.x);
+            tmpPoint.y = Math.max(startPoint.y, endPoint.y);
+            endPoint.x = Math.max(startPoint.x, endPoint.x);
+            endPoint.y = Math.min(startPoint.y, endPoint.y);
+
+            vecNear.setFromMatrixPosition(this.camera.matrixWorld);
+            vecTopLeft.copy(tmpPoint);
+            vecTopRight.set(endPoint.x, tmpPoint.y, 0);
+            vecDownRight.copy(endPoint);
+            vecDownLeft.set(tmpPoint.x, endPoint.y, 0);
+
+            vecTopLeft.unproject(this.camera);
+            vecTopRight.unproject(this.camera);
+            vecDownRight.unproject(this.camera);
+            vecDownLeft.unproject(this.camera);
+
+            vectemp1.copy(vecTopLeft).sub(vecNear);
+            vectemp2.copy(vecTopRight).sub(vecNear);
+            vectemp3.copy(vecDownRight).sub(vecNear);
+            vectemp1.normalize();
+            vectemp2.normalize();
+            vectemp3.normalize();
+
+            vectemp1.multiplyScalar(this.deep);
+            vectemp2.multiplyScalar(this.deep);
+            vectemp3.multiplyScalar(this.deep);
+            vectemp1.add(vecNear);
+            vectemp2.add(vecNear);
+            vectemp3.add(vecNear);
+
+            let planes = frustum.planes;
+
+            planes[0].setFromCoplanarPoints(vecNear, vecTopLeft, vecTopRight);
+            planes[1].setFromCoplanarPoints(vecNear, vecTopRight, vecDownRight);
+            planes[2].setFromCoplanarPoints(vecDownRight, vecDownLeft, vecNear);
+            planes[3].setFromCoplanarPoints(vecDownLeft, vecTopLeft, vecNear);
+            planes[4].setFromCoplanarPoints(vecTopRight, vecDownRight, vecDownLeft);
+            planes[5].setFromCoplanarPoints(vectemp3, vectemp2, vectemp1);
+            planes[5].normal.multiplyScalar(-1);
+
+        } else if (this.camera.isOrthographicCamera) {
+
+            var left = Math.min(startPoint.x, endPoint.x);
+            var top = Math.max(startPoint.y, endPoint.y);
+            var right = Math.max(startPoint.x, endPoint.x);
+            var down = Math.min(startPoint.y, endPoint.y);
+
+            vecTopLeft.set(left, top, -1);
+            vecTopRight.set(right, top, -1);
+            vecDownRight.set(right, down, -1);
+            vecDownLeft.set(left, down, -1);
+
+            vecFarTopLeft.set(left, top, 1);
+            vecFarTopRight.set(right, top, 1);
+            vecFarDownRight.set(right, down, 1);
+            vecFarDownLeft.set(left, down, 1);
+
+            vecTopLeft.unproject(this.camera);
+            vecTopRight.unproject(this.camera);
+            vecDownRight.unproject(this.camera);
+            vecDownLeft.unproject(this.camera);
+
+            vecFarTopLeft.unproject(this.camera);
+            vecFarTopRight.unproject(this.camera);
+            vecFarDownRight.unproject(this.camera);
+            vecFarDownLeft.unproject(this.camera);
+
+            let planes = frustum.planes;
+
+            planes[0].setFromCoplanarPoints(vecTopLeft, vecFarTopLeft, vecFarTopRight);
+            planes[1].setFromCoplanarPoints(vecTopRight, vecFarTopRight, vecFarDownRight);
+            planes[2].setFromCoplanarPoints(vecFarDownRight, vecFarDownLeft, vecDownLeft);
+            planes[3].setFromCoplanarPoints(vecFarDownLeft, vecFarTopLeft, vecTopLeft);
+            planes[4].setFromCoplanarPoints(vecTopRight, vecDownRight, vecDownLeft);
+            planes[5].setFromCoplanarPoints(vecFarDownRight, vecFarTopRight, vecFarTopLeft);
+            planes[5].normal.multiplyScalar(-1);
+
+        } else {
+
+            console.error('THREE.SelectionBox: Unsupported camera type.');
+
+        }
+
+    };
+
+    SelectionBox.prototype.searchChildInFrustum = function(frustum, object) {
+
+        if (object instanceof AtomMesh) {
+
+            if (object.material !== undefined) {
+
+                if (object.geometry.boundingSphere === null) object.geometry.computeBoundingSphere();
+
+                center.copy(object.geometry.boundingSphere.center);
+
+                center.applyMatrix4(object.matrixWorld);
+
+                if (frustum.containsPoint(center)) {
+
+                    this.collection.push(object);
+
+                }
+
+            }
+
+        }
+
+        if (object.children.length > 0) {
+
+            for (var x = 0; x < object.children.length; x++) {
+
+                this.searchChildInFrustum(frustum, object.children[x]);
+
+            }
+
+        }
+
+    };
+
+    return SelectionBox;
+
+})();
+
+
+var SelectionHelper = (function() {
+
+    function SelectionHelper(selectionBox, renderer, cssClassName) {
+
+        this.element = $('<div>');
+        this.element.addClass(cssClassName);
+
+        this.element.css({
+            'position': 'fixed',
+            'pointerEvents': 'none',
+            'display': 'none',
+            'border-width': '1px',
+            'border-style': 'solid',
+            'background-color': 'rgb(255, 0, 0)', // Default style
+            'opacity': 0.5
+        });
+
+        this.minBoxSize = 10.0;
+
+        this.renderer = renderer;
+        this.domElement = this.renderer._r.domElement;
+        this.domElement.parentElement.appendChild(this.element.get(0));
+
+        this.selBox = selectionBox;
+
+        this.startPoint = new Vector2();
+        this.pointTopLeft = new Vector2();
+        this.pointBottomRight = new Vector2();
+
+        this.isDown = false;
+        this.selectOverCallback = null;
+
+        this.domElement.addEventListener('pointerdown', function(event) {
+
+            if (event.shiftKey) {
+                this.isDown = true;
+                this.onSelectStart(event);
+            }
+
+        }.bind(this), false);
+
+        this.domElement.addEventListener('pointermove', function(event) {
+
+            if (this.isDown && event.shiftKey) {
+
+                this.onSelectMove(event);
+
+            }
+
+        }.bind(this), false);
+
+        this.domElement.addEventListener('pointerup', function(event) {
+
+            if (this.isDown && event.shiftKey) {
+                this.isDown = false;
+                this.onSelectOver(event);
+            }
+
+        }.bind(this), false);
+
+        this.domElement.addEventListener('keyup', function(event) {
+
+            if (event.key == 'Shift' && this.isDown) {
+                this.isDown = false;
+                this.onSelectOver(event);
+            }
+
+        }.bind(this), false);
+
+    }
+
+    SelectionHelper.prototype.onSelectStart = function(event) {
+
+        this.element.css({
+            'display': 'block',
+            'left': event.clientX + 'px',
+            'top': event.clientY + 'px',
+            'width': '0px',
+            'height': '0px'
+        });
+
+        this.startPoint.x = event.clientX;
+        this.startPoint.y = event.clientY;
+
+        this.pointBottomRight.x = this.startPoint.x;
+        this.pointBottomRight.y = this.startPoint.y;
+        this.pointTopLeft.x = this.startPoint.x;
+        this.pointTopLeft.y = this.startPoint.y;
+
+    };
+
+    SelectionHelper.prototype.onSelectMove = function(event) {
+
+        this.pointBottomRight.x = Math.max(this.startPoint.x, event.clientX);
+        this.pointBottomRight.y = Math.max(this.startPoint.y, event.clientY);
+        this.pointTopLeft.x = Math.min(this.startPoint.x, event.clientX);
+        this.pointTopLeft.y = Math.min(this.startPoint.y, event.clientY);
+
+        this.element.css({
+            'left': this.pointTopLeft.x + 'px',
+            'top': this.pointTopLeft.y + 'px',
+            'width': (this.pointBottomRight.x - this.pointTopLeft.x) + 'px',
+            'height': (this.pointBottomRight.y - this.pointTopLeft.y) + 'px'
+        });
+
+    };
+
+    SelectionHelper.prototype.onSelectOver = function() {
+
+        this.element.css('display', 'none');
+
+        if (this.selectOverCallback) {
+
+            var p1 = this.renderer.documentToWorld(this.pointBottomRight.x, this.pointBottomRight.y);
+            var p2 = this.renderer.documentToWorld(this.pointTopLeft.x, this.pointTopLeft.y);
+
+            // Skip if they're too close
+            var boxSize = Math.abs(this.pointBottomRight.x - this.pointTopLeft.x) +
+                Math.abs(this.pointBottomRight.y - this.pointTopLeft.y);
+
+            if (boxSize > this.minBoxSize)
+                this.selectOverCallback(p1, p2);
+        }
+
+    };
+
+    return SelectionHelper;
+
+})();
+
+
+export {
+    SelectionBox,
+    SelectionHelper
+};

package/lib/shaders/aura.frag

@@ -0,0 +1,26 @@
+#version 300 es
+
+precision highp float;
+
+uniform float opacity;
+uniform vec3 fill;
+uniform vec3 border;
+uniform float border_f;
+in vec2 vUv;
+out vec4 myOutputColor;
+
+void main() {
+  
+  vec2 r = vUv-vec2(0.5, 0.5);
+  float rnorm = sqrt(r.x*r.x+r.y*r.y)*2.0;
+
+  if (rnorm > 1.0-border_f) {
+    myOutputColor.rgb = border;
+    myOutputColor.a = 1.0;
+  }
+  else {
+    myOutputColor.rgb = fill;
+    myOutputColor.a = opacity;
+  }
+
+}

package/lib/shaders/aura.vert

@@ -0,0 +1,37 @@
+#version 300 es
+
+in vec2 uv;
+in vec4 position;
+uniform mat4 projectionMatrix;
+uniform mat4 modelViewMatrix;
+uniform float targScale;
+uniform float targRadius;
+out vec2 vUv;
+
+float smax( float a, float b, float k )
+{
+    float h = clamp( 0.5+0.5*(a-b)/k, 0.0, 1.0 );
+    return k*h*(1.0-h)+mix( b, a, h );
+}
+
+void main() {
+  vUv = uv;
+
+  mat4 mView = modelViewMatrix;
+  float s = targScale;
+  float h = 2.0/projectionMatrix[1][1];
+  // We use a smooth maximum to make it so that the aura is as big as
+  // targScale times the height of the screen in the zoom out limit, but also
+  // always slightly bigger than the size of the atom itself.
+  s = smax(s*h, 1.1*targRadius, targRadius);
+
+  for (int i = 0; i < 3; ++i) {
+      for (int j = 0; j < 3; ++j) {
+
+          mView[i][j] = (i == j)? s : 0.0;
+
+      }
+  }
+
+  gl_Position = projectionMatrix * mView * position;
+}

package/lib/shaders/dither.frag

@@ -0,0 +1,42 @@
+uniform vec3 color;
+uniform float opacity;
+uniform float illum;
+uniform vec2 shift;
+uniform float ditherN;
+uniform bool netting;
+uniform float netScale;
+uniform sampler2D ditherTex;
+
+varying vec3 vNormal;
+varying highp vec2 vUv;
+
+void main() {
+
+
+// This shader simply checks the coordinates on screen of the pixel to be drawn
+// and discards it based on the dithering matrix and alpha value if it has to be transparent.
+// In this way we go round all the complexities of intersecting transparent solids with much greater efficiency.
+// Check Wikipedias article on ordered dithering for further reference.
+   vec2 ditherCoords;
+   if (netting) {
+       ditherCoords = vUv*ditherN*netScale;
+   }
+   else {
+       ditherCoords = gl_FragCoord.xy;
+   }
+   float iN = mod(ditherCoords.x+shift.x, ditherN)/ditherN;
+   float jN = mod(ditherCoords.y+shift.y, ditherN)/ditherN;
+   vec4 ditherCol = texture2D(ditherTex, vec2(iN, jN));
+
+   if (ditherCol.r > opacity)
+       discard;
+// Lighting is also handled very simply, just a fraction of front illumination + ambient light.
+// This mostly because for some reason I cant get it to work with proper lighting (possibly a bug in THREE.js).
+   vec3 light = cameraPosition;
+   light = normalize(light);
+   float dProd = max(0., dot(light, vNormal));
+// We combine everything in the final color
+
+   gl_FragColor = vec4(color*((dProd-1.)*illum+1.), 1.);
+
+}

package/lib/shaders/dither.vert

@@ -0,0 +1,8 @@
+varying vec3 vNormal;
+varying highp vec2 vUv;
+
+void main() {
+   vNormal = normal;
+   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
+   vUv = uv;
+}

package/lib/shaders/index.in.js

@@ -0,0 +1,17 @@
+'use strict';
+
+import ditherFragShader from './dither.frag';
+import ditherVertShader from './dither.vert';
+import msdfFragShader from './msdf300.frag';
+import msdfVertShader from './msdf300.vert';
+import auraFragShader from './aura.frag';
+import auraVertShader from './aura.vert';
+
+export {
+    ditherFragShader,
+    ditherVertShader,
+    msdfFragShader,
+    msdfVertShader,
+    auraFragShader,
+    auraVertShader
+}

package/lib/shaders/index.js

@@ -0,0 +1,25 @@
+// lib/shaders/dither.frag
+var dither_default = "uniform vec3 color;\nuniform float opacity;\nuniform float illum;\nuniform vec2 shift;\nuniform float ditherN;\nuniform bool netting;\nuniform float netScale;\nuniform sampler2D ditherTex;\n\nvarying vec3 vNormal;\nvarying highp vec2 vUv;\n\nvoid main() {\n\n\n// This shader simply checks the coordinates on screen of the pixel to be drawn\n// and discards it based on the dithering matrix and alpha value if it has to be transparent.\n// In this way we go round all the complexities of intersecting transparent solids with much greater efficiency.\n// Check Wikipedias article on ordered dithering for further reference.\n   vec2 ditherCoords;\n   if (netting) {\n       ditherCoords = vUv*ditherN*netScale;\n   }\n   else {\n       ditherCoords = gl_FragCoord.xy;\n   }\n   float iN = mod(ditherCoords.x+shift.x, ditherN)/ditherN;\n   float jN = mod(ditherCoords.y+shift.y, ditherN)/ditherN;\n   vec4 ditherCol = texture2D(ditherTex, vec2(iN, jN));\n\n   if (ditherCol.r > opacity)\n       discard;\n// Lighting is also handled very simply, just a fraction of front illumination + ambient light.\n// This mostly because for some reason I cant get it to work with proper lighting (possibly a bug in THREE.js).\n   vec3 light = cameraPosition;\n   light = normalize(light);\n   float dProd = max(0., dot(light, vNormal));\n// We combine everything in the final color\n\n   gl_FragColor = vec4(color*((dProd-1.)*illum+1.), 1.);\n\n}";
+
+// lib/shaders/dither.vert
+var dither_default2 = "varying vec3 vNormal;\nvarying highp vec2 vUv;\n\nvoid main() {\n   vNormal = normal;\n   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);\n   vUv = uv;\n}";
+
+// lib/shaders/msdf300.frag
+var msdf300_default = "#version 300 es\n\n// GLSL 3.0 compliant version of the MSDF shader from three-bmfont-text\n// Taken from https://github.com/Jam3/three-bmfont-text/issues/38\n\nprecision highp float;\n\nuniform float opacity;\nuniform vec3 color;\nuniform sampler2D map;\nin vec2 vUv;\nout vec4 myOutputColor;\n\nfloat median(float r, float g, float b) {\n  return max(min(r, g), min(max(r, g), b));\n}\n\nvoid main() {\n  vec3 s = texture(map, vUv).rgb;\n  float sigDist = median(s.r, s.g, s.b) - 0.5;\n  float alpha = clamp(sigDist/fwidth(sigDist) + 0.5, 0.0, 1.0);\n  \n  myOutputColor = vec4(color.xyz, alpha * opacity);\n  if (myOutputColor.a < 0.0001) discard;\n}";
+
+// lib/shaders/msdf300.vert
+var msdf300_default2 = "#version 300 es\n\n// GLSL 3.0 compliant version of the MSDF shader from three-bmfont-text\n// Taken from https://github.com/Jam3/three-bmfont-text/issues/38\n\nin vec2 uv;\nin vec4 position;\nuniform mat4 projectionMatrix;\nuniform mat4 modelViewMatrix;\nuniform float targScale;\nuniform bool fixRotation;\nuniform bool fixScale;\nuniform vec3 shift;\nout vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n\n  mat4 mView = modelViewMatrix;\n  float s = targScale;\n\n  // When the scale is fixed, we make sure s and projection matrix cancel each other out\n  s = fixScale? s*2.0/projectionMatrix[1][1] : s;\n\n  // If rotation is fixed, the modelView matrix is made to contain scaling only\n  if (fixRotation) {\n    for (int i = 0; i < 3; ++i) {\n        for (int j = 0; j < 3; ++j) {\n\n            mView[i][j] = (i == j)? s : 0.0;\n\n            if (i == 1) {\n                mView[i][j] = -mView[i][j];\n            }\n        }\n    }\n  }\n\n  vec4 shift4 = vec4(0.,0.,0.,0.);\n  // The shift is scaled so that it follows the camera's zoom\n  vec4 pMshift = vec4(projectionMatrix[0][0], projectionMatrix[1][1], projectionMatrix[2][2], 1);\n  shift4.xyz = shift;\n\n  gl_Position = projectionMatrix * mView * position + shift4 * pMshift;\n}";
+
+// lib/shaders/aura.frag
+var aura_default = "#version 300 es\n\nprecision highp float;\n\nuniform float opacity;\nuniform vec3 fill;\nuniform vec3 border;\nuniform float border_f;\nin vec2 vUv;\nout vec4 myOutputColor;\n\nvoid main() {\n  \n  vec2 r = vUv-vec2(0.5, 0.5);\n  float rnorm = sqrt(r.x*r.x+r.y*r.y)*2.0;\n\n  if (rnorm > 1.0-border_f) {\n    myOutputColor.rgb = border;\n    myOutputColor.a = 1.0;\n  }\n  else {\n    myOutputColor.rgb = fill;\n    myOutputColor.a = opacity;\n  }\n\n}";
+
+// lib/shaders/aura.vert
+var aura_default2 = "#version 300 es\n\nin vec2 uv;\nin vec4 position;\nuniform mat4 projectionMatrix;\nuniform mat4 modelViewMatrix;\nuniform float targScale;\nuniform float targRadius;\nout vec2 vUv;\n\nfloat smax( float a, float b, float k )\n{\n    float h = clamp( 0.5+0.5*(a-b)/k, 0.0, 1.0 );\n    return k*h*(1.0-h)+mix( b, a, h );\n}\n\nvoid main() {\n  vUv = uv;\n\n  mat4 mView = modelViewMatrix;\n  float s = targScale;\n  float h = 2.0/projectionMatrix[1][1];\n  // We use a smooth maximum to make it so that the aura is as big as\n  // targScale times the height of the screen in the zoom out limit, but also\n  // always slightly bigger than the size of the atom itself.\n  s = smax(s*h, 1.1*targRadius, targRadius);\n\n  for (int i = 0; i < 3; ++i) {\n      for (int j = 0; j < 3; ++j) {\n\n          mView[i][j] = (i == j)? s : 0.0;\n\n      }\n  }\n\n  gl_Position = projectionMatrix * mView * position;\n}";
+export {
+  aura_default as auraFragShader,
+  aura_default2 as auraVertShader,
+  dither_default as ditherFragShader,
+  dither_default2 as ditherVertShader,
+  msdf300_default as msdfFragShader,
+  msdf300_default2 as msdfVertShader
+};

package/lib/shaders/msdf300.frag

@@ -0,0 +1,25 @@
+#version 300 es
+
+// GLSL 3.0 compliant version of the MSDF shader from three-bmfont-text
+// Taken from https://github.com/Jam3/three-bmfont-text/issues/38
+
+precision highp float;
+
+uniform float opacity;
+uniform vec3 color;
+uniform sampler2D map;
+in vec2 vUv;
+out vec4 myOutputColor;
+
+float median(float r, float g, float b) {
+  return max(min(r, g), min(max(r, g), b));
+}
+
+void main() {
+  vec3 s = texture(map, vUv).rgb;
+  float sigDist = median(s.r, s.g, s.b) - 0.5;
+  float alpha = clamp(sigDist/fwidth(sigDist) + 0.5, 0.0, 1.0);
+  
+  myOutputColor = vec4(color.xyz, alpha * opacity);
+  if (myOutputColor.a < 0.0001) discard;
+}

package/lib/shaders/msdf300.vert

@@ -0,0 +1,45 @@
+#version 300 es
+
+// GLSL 3.0 compliant version of the MSDF shader from three-bmfont-text
+// Taken from https://github.com/Jam3/three-bmfont-text/issues/38
+
+in vec2 uv;
+in vec4 position;
+uniform mat4 projectionMatrix;
+uniform mat4 modelViewMatrix;
+uniform float targScale;
+uniform bool fixRotation;
+uniform bool fixScale;
+uniform vec3 shift;
+out vec2 vUv;
+
+void main() {
+  vUv = uv;
+
+  mat4 mView = modelViewMatrix;
+  float s = targScale;
+
+  // When the scale is fixed, we make sure s and projection matrix cancel each other out
+  s = fixScale? s*2.0/projectionMatrix[1][1] : s;
+
+  // If rotation is fixed, the modelView matrix is made to contain scaling only
+  if (fixRotation) {
+    for (int i = 0; i < 3; ++i) {
+        for (int j = 0; j < 3; ++j) {
+
+            mView[i][j] = (i == j)? s : 0.0;
+
+            if (i == 1) {
+                mView[i][j] = -mView[i][j];
+            }
+        }
+    }
+  }
+
+  vec4 shift4 = vec4(0.,0.,0.,0.);
+  // The shift is scaled so that it follows the camera's zoom
+  vec4 pMshift = vec4(projectionMatrix[0][0], projectionMatrix[1][1], projectionMatrix[2][2], 1);
+  shift4.xyz = shift;
+
+  gl_Position = projectionMatrix * mView * position + shift4 * pMshift;
+}