2.16.0

examples/marchingcubes_with_attribute.ipynb

@@ -0,0 +1,104 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "scrolled": false
+   },
+   "outputs": [],
+   "source": [
+    "import k3d\n",
+    "import numpy as np\n",
+    "from numpy import sin,cos,pi\n",
+    "from ipywidgets import interact, interactive, fixed\n",
+    "import ipywidgets as widgets\n",
+    "import time\n",
+    "import math\n",
+    "\n",
+    "plot = k3d.plot()\n",
+    "\n",
+    "T = 1.618033988749895\n",
+    "r = 4.77\n",
+    "zmin,zmax = -r,r\n",
+    "xmin,xmax = -r,r\n",
+    "ymin,ymax = -r,r\n",
+    "Nx,Ny,Nz = 77,77,77\n",
+    "\n",
+    "x = np.linspace(xmin,xmax,Nx)\n",
+    "y = np.linspace(ymin,ymax,Ny)\n",
+    "z = np.linspace(zmin,zmax,Nz)\n",
+    "x,y,z = np.meshgrid(x,y,z,indexing='ij')\n",
+    "p = 2 - (cos(x + T*y) + cos(x - T*y) + cos(y + T*z) + cos(y - T*z) + cos(z - T*x) + cos(z + T*x)).astype(np.float32)\n",
+    "a = (sin(x + T*y) + sin(x - T*y) + sin(y + T*z) + cos(y - T*z) + sin(z - T*x) + cos(z + T*x)).astype(np.float32)\n",
+    "iso = k3d.marching_cubes(p, attribute=a, level=0.0)\n",
+    "plot += iso\n",
+    "plot.display()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "iso.attribute = []"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "iso.attribute = a"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "iso.flat_shading = False"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "iso.level = 1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.9.12"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

js/development.html

@@ -51,14 +51,21 @@
     //   return reject(e);
     // }
 
-    fileLoader('binary_snapshot.k3d', function (data) {
+    fileLoader('dump.k3d', function (data) {
       K3DInstance = lib.CreateK3DAndLoadBinarySnapshot(
         data,
         document.getElementById('canvasTarget')
       ).then(function (ret) {
         K3DInstance = ret;
 
-        K3DInstance.resetCamera(0.7);
+        // setTimeout(function () {
+        //   K3DInstance.resetCamera(1.5);
+        // }, 500);
+
+        // K3DInstance.on(K3DInstance.events.OBJECT_HOVERED, (params) => {
+        //   console.log(params);
+        // });
+
         // setTimeout(function () {
         //   let jsons = ret.getWorld().ObjectsListJson;
         //

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "k3d",
-  "version": "2.15.3",
+  "version": "2.16.0",
   "description": "3D visualization library",
   "author": "k3d team",
   "main": "src/index.js",

js/src/core/Core.js

@@ -1221,7 +1221,7 @@ function K3D(provider, targetDOMNode, parameters) {
         }
 
         listeners = {};
-        currentWindow.removeEventListener('resize', this.resizeHelper);
+        this.resizeObserver.disconnect();
         world.renderer.removeContextLossListener();
         world.renderer.forceContextLoss();
     };
@@ -1235,7 +1235,10 @@ function K3D(provider, targetDOMNode, parameters) {
     this.Provider.Initializers.Scene.call(world, this);
     this.Provider.Initializers.Manipulate.call(world, this);
 
-    currentWindow.addEventListener('resize', this.resizeHelper, false);
+    this.resizeObserver = new ResizeObserver(entries => {
+        this.resizeHelper();
+    });
+    this.resizeObserver.observe(targetDOMNode);
 
     // load toolbars
     guiContainer = currentWindow.document.createElement('div');
@@ -1262,6 +1265,7 @@ function K3D(provider, targetDOMNode, parameters) {
     self.setTime(self.parameters.time);
     self.setGridAutoFit(self.parameters.gridAutoFit);
     self.setGridVisible(self.parameters.gridVisible);
+    self.setGrid(self.parameters.grid);
     self.setCameraAutoFit(self.parameters.cameraAutoFit);
     self.setCameraDampingFactor(self.parameters.cameraDampingFactor);
     self.setClippingPlanes(self.parameters.clippingPlanes);

js/src/providers/threejs/objects/MarchingCubes.js

@@ -3,8 +3,16 @@ const BufferGeometryUtils = require('three/examples/jsm/utils/BufferGeometryUtil
 const interactionsHelper = require('../helpers/Interactions');
 const marchingCubesPolygonise = require('../../../core/lib/helpers/marchingCubesPolygonise');
 const yieldingLoop = require('../../../core/lib/helpers/yieldingLoop');
-const {areAllChangesResolve} = require('../helpers/Fn');
-const {commonUpdate} = require('../helpers/Fn');
+const { areAllChangesResolve, getSide, typedArrayToThree } = require('../helpers/Fn');
+const { commonUpdate } = require('../helpers/Fn');
+const colorMapHelper = require('../../../core/lib/helpers/colorMap');
+const _ = require('../../../lodash');
+
+function isAttribute(config) {
+    return config.attribute && config.attribute.data && config.attribute.data.length > 0
+        && config.color_range && config.color_range.length > 0
+        && config.color_map && config.color_map.data && config.color_map.data.length > 0;
+}
 
 /**
  * Loader strategy to handle Marching Cubes object
@@ -30,10 +38,13 @@ module.exports = {
             const spacingsY = config.spacings_y;
             const spacingsZ = config.spacings_z;
             let isSpacings = false;
-            const {level} = config;
+            const { level } = config;
             const modelMatrix = new THREE.Matrix4();
             const MaterialConstructor = config.wireframe ? THREE.MeshBasicMaterial : THREE.MeshPhongMaterial;
-            const material = new MaterialConstructor({
+            const colorRange = config.color_range;
+            const colorMap = (config.color_map && config.color_map.data) || null;
+            let opacityFunction = null;
+            let material = new MaterialConstructor({
                 color: config.color,
                 emissive: 0,
                 shininess: 50,
@@ -55,6 +66,68 @@ module.exports = {
             let k;
             const polygonise = marchingCubesPolygonise;
 
+            if (isAttribute(config)) {
+                if (config.opacity_function && config.opacity_function.data && config.opacity_function.data.length > 0) {
+                    opacityFunction = config.opacity_function.data;
+                }
+
+                const canvas = colorMapHelper.createCanvasGradient(colorMap, 1024, opacityFunction);
+                const colormap = new THREE.CanvasTexture(
+                    canvas,
+                    THREE.UVMapping,
+                    THREE.ClampToEdgeWrapping,
+                    THREE.ClampToEdgeWrapping,
+                    THREE.NearestFilter,
+                    THREE.NearestFilter,
+                );
+                colormap.needsUpdate = true;
+
+                const texture = new THREE.Data3DTexture(
+                    config.attribute.data,
+                    config.attribute.shape[2],
+                    config.attribute.shape[1],
+                    config.attribute.shape[0],
+                );
+                texture.format = THREE.RedFormat;
+                texture.type = typedArrayToThree(config.attribute.data.constructor);
+
+                texture.generateMipmaps = false;
+                texture.minFilter = THREE.LinearFilter;
+                texture.magFilter = THREE.LinearFilter;
+                texture.wrapT = THREE.ClampToEdgeWrapping;
+                texture.wrapS = THREE.ClampToEdgeWrapping;
+                texture.needsUpdate = true;
+
+                material = new THREE.ShaderMaterial({
+                    uniforms: _.merge(
+                        {
+                            opacity: { value: config.opacity },
+                            low: { value: colorRange[0] },
+                            high: { value: colorRange[1] },
+                            volumeTexture: { type: 't', value: texture },
+                            colormap: { type: 't', value: colormap },
+                            emissive: { type: 'v3', value: new THREE.Vector3(0, 0, 0) },
+                            specular: { type: 'v3', value: new THREE.Vector3(0.04, 0.04, 0.04) },
+                            shininess: { value: 50 },
+
+                        },
+                        THREE.UniformsLib.lights,
+                    ),
+                    defines: {
+                        FLAT_SHADED: config.flat_shading
+                    },
+                    side: getSide(config),
+                    vertexShader: require('./shaders/MarchingCubesVolume.vertex.glsl'),
+                    fragmentShader: require('./shaders/MarchingCubesVolume.fragment.glsl'),
+                    depthWrite: (config.opacity === 1.0 && opacityFunction === null),
+                    transparent: (config.opacity !== 1.0 || opacityFunction !== null),
+                    wireframe: config.wireframe,
+                    flatShading: config.flat_shading,
+                    lights: true,
+                    clipping: true
+                });
+            }
+
             if (spacingsX && spacingsY && spacingsZ) {
                 isSpacings = spacingsX.shape[0] === width - 1 && spacingsY.shape[0] === height - 1
                     && spacingsZ.shape[0] === length - 1;
@@ -156,10 +229,49 @@ module.exports = {
 
         interactionsHelper.update(config, changes, resolvedChanges, obj);
 
+        if (typeof (changes.attribute) !== 'undefined' && !changes.attribute.timeSeries) {
+            if (obj.material.uniforms &&
+                obj.material.uniforms.volumeTexture.value.image.data.constructor === changes.attribute.data.constructor
+                && obj.material.uniforms.volumeTexture.value.image.width === changes.attribute.shape[2]
+                && obj.material.uniforms.volumeTexture.value.image.height === changes.attribute.shape[1]
+                && obj.material.uniforms.volumeTexture.value.image.depth === changes.attribute.shape[0]) {
+                obj.material.uniforms.volumeTexture.value.image.data = changes.attribute.data;
+                obj.material.uniforms.volumeTexture.value.needsUpdate = true;
+
+                resolvedChanges.volume = null;
+            }
+        }
+
+        if (obj.material.uniforms &&
+            typeof (changes.color_range) !== 'undefined' && !changes.color_range.timeSeries) {
+            obj.material.uniforms.low.value = changes.color_range[0];
+            obj.material.uniforms.high.value = changes.color_range[1];
+
+            resolvedChanges.color_range = null;
+        }
+
+        if (obj.material.uniforms &&
+            (typeof (changes.color_map) !== 'undefined' && !changes.color_map.timeSeries)
+            || (typeof (changes.opacity_function) !== 'undefined' && !changes.opacity_function.timeSeries)) {
+            if (!(changes.opacity_function && obj.material.transparent === false)) {
+                const canvas = colorMapHelper.createCanvasGradient(
+                    (changes.color_map && changes.color_map.data) || config.color_map.data,
+                    1024,
+                    (changes.opacity_function && changes.opacity_function.data) || config.opacity_function.data,
+                );
+
+                obj.material.uniforms.colormap.value.image = canvas;
+                obj.material.uniforms.colormap.value.needsUpdate = true;
+
+                resolvedChanges.color_map = null;
+                resolvedChanges.opacity_function = null;
+            }
+        }
+
         commonUpdate(config, changes, resolvedChanges, obj, K3D);
 
         if (areAllChangesResolve(changes, resolvedChanges)) {
-            return Promise.resolve({json: config, obj});
+            return Promise.resolve({ json: config, obj });
         }
         return false;
     },

js/src/providers/threejs/objects/Surface.js

@@ -17,6 +17,7 @@ module.exports = {
         config.color = typeof (config.color) !== 'undefined' ? config.color : 255;
         config.wireframe = typeof (config.wireframe) !== 'undefined' ? config.wireframe : false;
         config.flat_shading = typeof (config.flat_shading) !== 'undefined' ? config.flat_shading : true;
+        config.opacity = typeof (config.opacity) !== 'undefined' ? config.opacity : 1.0;
 
         const heights = config.heights.data;
         const width = config.heights.shape[1];
@@ -28,6 +29,9 @@ module.exports = {
         const attribute = (config.attribute && config.attribute.data) || null;
         const material = new MaterialConstructor({
             color: config.color,
+            opacity: config.opacity,
+            depthWrite: config.opacity === 1.0,
+            transparent: config.opacity !== 1.0,
             emissive: 0,
             shininess: 50,
             specular: 0x111111,