@abi-software/scaffoldvuer 0.1.57 → 0.1.58

package/package-lock.json

@@ -11976,9 +11976,9 @@
       "dev": true
     },
     "promise-polyfill": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.2.3.tgz",
-      "integrity": "sha512-Og0+jCRQetV84U8wVjMNccfGCnMQ9mGs9Hv78QFe+pSDD3gWTpz0y+1QCuxy5d/vBFuZ3iwP2eycAkvqIMPmWg=="
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.3.0.tgz",
+      "integrity": "sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg=="
     },
     "prompts": {
       "version": "2.4.2",
@@ -15380,9 +15380,9 @@
       "integrity": "sha512-OSPPKcGvFSiGkG3jFrwwC76PBV/ZSrGxpBbg28bW8s9GU8r/y2spNGtEXHEb/CVqo0Ctf5Lx2rVaxQZB6OasaA=="
     },
     "three-spritetext": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/three-spritetext/-/three-spritetext-1.6.5.tgz",
-      "integrity": "sha512-ttA1ce3tJz6OFojLGY3VjtqF9johetq50TztYcPFWqdEUrwPmej5XXcHahVyQGd88FHRDzJmW2rW3zSifUsdYA=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/three-spritetext/-/three-spritetext-1.8.0.tgz",
+      "integrity": "sha512-ehiATMfR1guCk+knjCxDWp2zikxRbxQaKXJyjXwuZKqjIbKtsCh7BQ00JHaESjzaXXhG5LJV7rXTJ78M/EYWyQ=="
     },
     "throttle-debounce": {
       "version": "1.1.0",
@@ -17813,9 +17813,9 @@
       }
     },
     "zincjs": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.0.11.tgz",
-      "integrity": "sha512-SknkseprKt2kxnsniohhkPQ56WT+9b7Ju1kxynhs83yNE2lcuakphedTRIBHGUUNcRAzw8TCgtfjN52uKFtKzQ==",
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/zincjs/-/zincjs-1.0.15.tgz",
+      "integrity": "sha512-Csnbvrgin7Ebo9kfFr071KzKDFcoDX03MoBz41h1hq6lG8MHJXjTHLP/EhF5kwbNhThH21rgz718D8rBvwTALA==",
       "requires": {
         "css-element-queries": "^1.2.2",
         "lodash": "^4.17.19",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "0.1.57",
+  "version": "0.1.58",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
     "vue-custom-element": "^3.3.0",
     "vue-drag-resize": "^1.3.2",
     "vue-router": "^3.5.1",
-    "zincjs": "^1.0.11"
+    "zincjs": "^1.0.15"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",

package/src/App.vue

@@ -26,6 +26,7 @@
         @scaffold-selected="onSelected"
         @scaffold-navigated="onNavigated"
         @timeChanged="updateCurrentTime"
+        @zinc-object-added="objectAdded"
       />
     </drop-zone>
     <el-popover
@@ -103,6 +104,18 @@
           >
             Capture
           </el-button>
+          <el-button
+            size="mini"
+            @click="featureTesting()"
+          >
+            Test 1
+          </el-button>
+          <el-button
+            size="mini"
+            @click="featureTesting2()"
+          >
+            Test 2
+          </el-button>
         </el-row>
         <el-row :gutter="10">
           <el-button
@@ -253,6 +266,9 @@ import Vue from "vue";
 import { Button, Col, Icon, Input, InputNumber, Popover, Row, Switch } from "element-ui";
 import lang from "element-ui/lib/locale/lang/en";
 import locale from "element-ui/lib/locale";
+import taShader from "zincjs/src/shaders/textureArray.js"
+import volumeRender from "zincjs/src/shaders/volumeRender.js"
+import volumeTexture from "zincjs/src/shaders/volumeTexture.js"
 
 locale.use(lang);
 Vue.use(Button);
@@ -264,6 +280,111 @@ Vue.use(Popover);
 Vue.use(Row);
 Vue.use(Switch);
 
+let texture_prefix = undefined;
+
+const getVolumeRender = (texture) => {
+  const myUniforms = volumeRender.getUniforms();
+  console.log(myUniforms)
+  myUniforms.u_size.value.set(texture.size.width, texture.size.height, texture.size.depth);
+  myUniforms.u_data.value = texture.impl;
+  const options = {
+    fs: volumeRender.fs,
+    vs: volumeRender.vs,
+    uniforms: myUniforms,
+    glslVersion: volumeRender.glslVersion
+  };
+  return options;
+}
+
+const getVolumeTexture = (texture) => {
+  const myUniforms = volumeTexture.getUniforms();
+  console.log(myUniforms)
+  myUniforms.volume_scale.value.set(texture.size.width / texture.size.depth, texture.size.height / texture.size.depth, 1);
+  myUniforms.diffuse.value = texture.impl;
+  myUniforms.depth.value = texture.size.depth;
+  myUniforms.volume_dims.value = [200, 200, 200];
+  const options = {
+    fs: volumeTexture.fs,
+    vs: volumeTexture.vs,
+    uniforms: myUniforms,
+    glslVersion: volumeTexture.glslVersion
+  };
+  return options;
+}
+
+const getTestShader = (texture) => {
+  const myUniforms = taShader.getUniforms();
+  myUniforms.depth.value = texture.size.depth;
+  myUniforms.diffuse.value = texture.impl;
+  const options = {
+    fs: taShader.fs,
+    vs: taShader.vs,
+    uniforms: myUniforms,
+    glslVersion: taShader.glslVersion
+  };
+  console.log(options)
+  return options;
+}
+
+const getTexture = async (scaffoldModule) => {
+  const imgArray = [];
+  const texture = new scaffoldModule.Zinc.TextureArray();
+  for (let i = 1733; i < 1860; i++) {
+    imgArray.push(`${texture_prefix}/foot${i}.jpg`);
+    //imgArray.push(`${process.env.VUE_APP_TEXTURE_FOOT_PREFIX}/foot${i}.jpg`);
+  }
+  await texture.loadFromImages(imgArray);
+  return texture;
+}
+
+const testVolume = async (scaffoldModule, objects) => {
+  if (objects) {
+    const texture = await getTexture(scaffoldModule);
+    //const options = getTestShader(texture);
+    const options = getVolumeTexture(texture);
+    const material = texture.getMaterial(options);
+    console.log(material, texture, objects);
+    objects[0].morph.material = material;
+  }
+}
+
+const testSlides = async (scaffoldModule) => {
+  const texture = await getTexture(scaffoldModule);
+  const textureSlides = new scaffoldModule.Zinc.TextureSlides(texture);
+  textureSlides.createSlides([
+    {
+      direction: "y",
+      value: 0.1
+    },
+    {
+      direction: "y",
+      value: 0.3
+    },
+    {
+      direction: "y",
+      value: 0.5
+    },
+    {
+      direction: "y",
+      value: 0.7
+    },
+    {
+      direction: "y",
+      value: 0.9
+    },
+    {
+      direction: "x",
+      value: 0.5
+    },
+    {
+      direction: "z",
+      value: 0.5
+    },
+  ]);
+  scaffoldModule.scene.addZincObject(textureSlides);
+}
+
+
 export default {
   name: "App",
   components: {
@@ -271,6 +392,9 @@ export default {
     ScaffoldVuer,
     ModelsTable
   },
+  created: function() {
+    texture_prefix = process.env.VUE_APP_TEXTURE_FOOT_PREFIX;
+  },
   data: function() {
     return {
       url: undefined,
@@ -300,6 +424,7 @@ export default {
       pos: [0, 0],
       format: "metadata",
       sceneSettings: [],
+      
     };
   },
   watch: {
@@ -319,6 +444,7 @@ export default {
     }
   },
   mounted: function() {
+    this._objects = [];
     this.selectedCoordinates = this.$refs.scaffold.getDynamicSelectedCoordinates();
     this.rendererInfo = this.$refs.scaffold.getRendererInfo();
   },
@@ -348,6 +474,21 @@ export default {
           hrefElement.remove();
         })
     },
+    objectAdded: function(zincObject) {
+      console.log(zincObject)
+      this._objects.push(zincObject);
+    },
+    featureTesting: async function() {
+      //Test texture
+      testVolume(this.$refs.scaffold.$module, this._objects);
+
+      
+    },
+    featureTesting2: async function() {
+      //Test texture
+      //testVolume(this.$refs.scaffold.$module, this._objects);
+      testSlides(this.$refs.scaffold.$module);
+    },
     saveSettings: function() {
       this.sceneSettings.push(this.$refs.scaffold.getState());
     },
@@ -411,6 +552,9 @@ export default {
       this.currentTime = val;
     },
     parseQuery: function(query) {
+      if (query.url != this.url) {
+        this._objects = [];
+      }
       if (query.url) {
         this.url = query.url;
       } else {

package/src/components/ScaffoldVuer.vue

@@ -564,7 +564,7 @@ export default {
     let eventNotifier = new EventNotifier();
     eventNotifier.subscribe(this, this.eventNotifierCallback);
     this.$module.addNotifier(eventNotifier);
-    this.$module.addOrganPartAddedCallback(this.organsAdded);
+    this.$module.addOrganPartAddedCallback(this.zincObjectAdded);
     this.$module.initialiseRenderer(this.$refs.display);
     this.toggleRendering(this.render);
     this.ro = new ResizeObserver(this.adjustLayout).observe(
@@ -579,10 +579,11 @@ export default {
   },
   methods: {
     /**
-     * This is called when a new organ is read into the scene.
+     * This is called when a new zinc object is read into the scene.
      */
-    organsAdded: function() {
+    zincObjectAdded: function(zincObject) {
       this.loading = false;
+      this.$emit("zinc-object-added", zincObject);
     },
     /**
      * This is called when Change backgspeedround colour button

package/src/scripts/RendererModule.js

@@ -10,8 +10,8 @@ const createRenderer = function () {
   const localContainer = document.createElement( 'div' );
   let localRenderer = undefined;;
   localContainer.style.height = "100%";
+  const Zinc = require('zincjs');
   if (WEBGL.isWebGLAvailable()) {
-    const Zinc = require('zincjs');
     localRenderer = new Zinc.Renderer(localContainer, window);
     Zinc.defaultMaterialColor = 0xFFFF9C;
     localRenderer.initialiseVisualisation();
@@ -20,7 +20,7 @@ const createRenderer = function () {
     const warning = WEBGL.getWebGLErrorMessage();
     localContainer.appendChild(warning);
   }
-  return {"renderer":localRenderer, "container":localContainer};
+  return {Zinc, "renderer":localRenderer, "container":localContainer};
 }
 
 const RendererModule = function()  {
@@ -264,6 +264,7 @@ RendererModule.prototype.getPlayRate = function(value) {
 RendererModule.prototype.initialiseRenderer = function(displayAreaIn) {
   if (this.zincRenderer === undefined || this.rendererContainer === undefined) {
     let returnedValue = createRenderer();
+    this.Zinc = returnedValue["Zinc"];
     this.zincRenderer = returnedValue["renderer"];
     this.rendererContainer = returnedValue["container"];
   }