diff --git a/.github/workflows/gradle.yml b/.github/workflows/gradle.yml
new file mode 100644
index 00000000..adc74adf
--- /dev/null
+++ b/.github/workflows/gradle.yml
@@ -0,0 +1,17 @@
+name: Gradle build
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Set up JDK 11
+      uses: actions/setup-java@v1
+      with:
+        java-version: 11
+    - name: Build with Gradle
+      run: ./gradlew build
diff --git a/README.md b/README.md
index 783d9995..ff2820f1 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,73 @@
-# DataForge plugins for visualisation
+[![JetBrains Research](https://jb.gg/badges/research.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
 
-## Common visualisation objects
+# DataForge Visualisation Platform
 
-## JavaFX utilities for meta manipulations
+This repository contains [DataForge](http://npm.mipt.ru/dataforge/) 
+(also [here](https://github.com/mipt-npm/dataforge-core)) components useful for visualization in
+various scientific applications. Currently, the main application is 3D visualization for particle
+physics experiments.
 
-## 3D visualisation
+The project is developed as a Kotlin multiplatform application, currently 
+targeting browser JavaScript and JVM.
 
-Includes common discription and serializers, JavaFX and Three.js implementations.
+Main features:
+- 3D visualization of complex experimental set-ups
+- Event display such as particle tracks, etc.
+- Scales up to few hundred thousands of elements
+- Camera move, rotate, zoom-in and zoom-out
+- Object tree with property editor
+- Settings export and import
+- Multiple platform support
+ 
 
-## GDML bindings for 3D visualisation (to be moved to gdml project) 
+## Modules contained in this repository:
+
+
+### dataforge-vis-common 
+
+Common visualisation objects such as VisualObject and VisualGroup.
+
+
+### dataforge-vis-spatial
+
+Includes common description and serializers for 3D visualisation, JavaFX and Three.js implementations.
+
+
+### dataforge-vis-spatial-gdml
+
+GDML bindings for 3D visualisation (to be moved to gdml project).
+
+
+### dataforge-vis-jsroot
+
+Some JSROOT bindings. 
+
+Note: Currently, this part is experimental and put here for completeness. This module may not build.
+
+
+### demo
+
+Several demonstrations of using the dataforge-vis framework:
+
+##### spatial-showcase
+
+Contains a simple demonstration (grid with a few shapes that you can rotate, move camera, etc.).
+ 
+To see the demo: run `demo/spatial-showcase/distribution/installJsDist` Gradle task, then open
+`build/distribuions/spatial-showcase-js-0.1.0-dev/index.html` file in your browser.
+
+Other demos can be built similarly.  
+
+##### muon-monitor
+
+A full-stack application example, showing the 
+[Muon Monitor](http://npm.mipt.ru/projects/physics.html#mounMonitor) experiment set-up.
+
+Includes server back-end generating events, as well as visualization front-end. 
+
+To run full-stack app (both server and browser front-end), run 
+`demo/muon-monitor/application/run` task.
+
+##### gdml
+
+Visualization example for geometry defined as GDML file.
diff --git a/build.gradle.kts b/build.gradle.kts
index ada9bd4c..0378807d 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -1,34 +1,38 @@
-val dataforgeVersion by extra("0.1.3")
+import scientifik.useSerialization
 
-plugins{
-    val kotlinVersion = "1.3.50-eap-5"
+val dataforgeVersion by extra("0.1.5-dev-6")
+
+plugins {
+    val kotlinVersion = "1.3.61"
+    val toolsVersion = "0.3.2"
 
     kotlin("jvm") version kotlinVersion apply false
-    id("kotlin2js") version kotlinVersion apply false
     id("kotlin-dce-js") version kotlinVersion apply false
-    id("org.jetbrains.kotlin.frontend") version "0.0.45" apply false
-    id("scientifik.mpp") version "0.1.4" apply false
-    id("scientifik.jvm") version "0.1.4" apply false
-    id("scientifik.js") version "0.1.4" apply false
-    id("scientifik.publish") version "0.1.4" apply false
-    id("org.openjfx.javafxplugin") version "0.0.7" apply false
+    id("scientifik.mpp") version toolsVersion apply false
+    id("scientifik.jvm") version toolsVersion apply false
+    id("scientifik.js") version toolsVersion apply false
+    id("scientifik.publish") version toolsVersion apply false
+    id("org.openjfx.javafxplugin") version "0.0.8" apply false
 }
 
 allprojects {
     repositories {
         mavenLocal()
-        jcenter()
-        maven("https://kotlin.bintray.com/kotlinx")
-        maven("http://npm.mipt.ru:8081/artifactory/gradle-dev-local")
-        maven("https://kotlin.bintray.com/js-externals")
         maven("https://dl.bintray.com/pdvrieze/maven")
-        maven("https://dl.bintray.com/kotlin/kotlin-eap")
+        maven("http://maven.jzy3d.org/releases")
+        maven("https://kotlin.bintray.com/js-externals")
+//        maven("https://dl.bintray.com/gbaldeck/kotlin")
+//        maven("https://dl.bintray.com/rjaros/kotlin")
     }
 
     group = "hep.dataforge"
     version = "0.1.0-dev"
 }
 
+subprojects{
+    this.useSerialization()
+}
+
 val githubProject by extra("dataforge-vis")
 val bintrayRepo by extra("dataforge")
 
diff --git a/dataforge-vis-common/build.gradle.kts b/dataforge-vis-common/build.gradle.kts
index e57c78bb..548c1be5 100644
--- a/dataforge-vis-common/build.gradle.kts
+++ b/dataforge-vis-common/build.gradle.kts
@@ -1,25 +1,50 @@
+import org.openjfx.gradle.JavaFXOptions
+import scientifik.useSerialization
+
 plugins {
     id("scientifik.mpp")
-}
-
-scientifik{
-    serialization = true
+    id("org.openjfx.javafxplugin")
 }
 
 val dataforgeVersion: String by rootProject.extra
+//val kvisionVersion: String by rootProject.extra("2.0.0-M1")
+
+useSerialization()
 
 kotlin {
+    jvm{
+        withJava()
+    }
+
     sourceSets {
-        val commonMain by getting {
+        commonMain{
             dependencies {
                 api("hep.dataforge:dataforge-output:$dataforgeVersion")
             }
         }
-        val jsMain by getting {
+        jvmMain{
+            dependencies {
+                api("no.tornado:tornadofx:1.7.19")
+                //api("no.tornado:tornadofx-controlsfx:0.1.1")
+                api("de.jensd:fontawesomefx-fontawesome:4.7.0-11"){
+                    exclude(group = "org.openjfx")
+                }
+                api("de.jensd:fontawesomefx-commons:11.0"){
+                    exclude(group = "org.openjfx")
+                }
+            }
+        }
+        jsMain{
             dependencies {
                 api("hep.dataforge:dataforge-output-html:$dataforgeVersion")
-                api(npm("text-encoding"))
+                api(npm("bootstrap","4.4.1"))
+                implementation(npm("jsoneditor"))
+                implementation(npm("file-saver"))
             }
         }
     }
-}
\ No newline at end of file
+}
+
+configure<JavaFXOptions> {
+    modules("javafx.controls")
+}
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/AbstractVisualGroup.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/AbstractVisualGroup.kt
new file mode 100644
index 00000000..889cb0dc
--- /dev/null
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/AbstractVisualGroup.kt
@@ -0,0 +1,112 @@
+package hep.dataforge.vis.common
+
+import hep.dataforge.meta.MetaItem
+import hep.dataforge.names.*
+import kotlinx.serialization.Transient
+
+
+/**
+ * Abstract implementation of mutable group of [VisualObject]
+ */
+abstract class AbstractVisualGroup : AbstractVisualObject(), MutableVisualGroup {
+
+    //protected abstract val _children: MutableMap<NameToken, T>
+
+    /**
+     * A map of top level named children
+     */
+    abstract override val children: Map<NameToken, VisualObject>
+
+    override fun propertyChanged(name: Name, before: MetaItem<*>?, after: MetaItem<*>?) {
+        super.propertyChanged(name, before, after)
+        forEach {
+            it.propertyChanged(name, before, after)
+        }
+    }
+
+    // TODO Consider renaming to `StructureChangeListener` (singular)
+    private data class StructureChangeListeners(val owner: Any?, val callback: (Name, VisualObject?) -> Unit)
+
+    @Transient
+    private val structureChangeListeners = HashSet<StructureChangeListeners>()
+
+    /**
+     * Add listener for children change
+     */
+    override fun onChildrenChange(owner: Any?, action: (Name, VisualObject?) -> Unit) {
+        structureChangeListeners.add(StructureChangeListeners(owner, action))
+    }
+
+    /**
+     * Remove children change listener
+     */
+    override fun removeChildrenChangeListener(owner: Any?) {
+        structureChangeListeners.removeAll { it.owner === owner }
+    }
+
+    /**
+     * Propagate children change event upwards
+     */
+    protected fun childrenChanged(name: Name, child: VisualObject?) {
+        structureChangeListeners.forEach { it.callback(name, child) }
+    }
+
+    /**
+     * Remove a child with given name token
+     */
+    protected abstract fun removeChild(token: NameToken)
+
+    /**
+     * Add, remove or replace child with given name
+     */
+    protected abstract fun setChild(token: NameToken, child: VisualObject)
+
+    /**
+     * Add a static child. Statics could not be found by name, removed or replaced
+     */
+    protected open fun addStatic(child: VisualObject) =
+        setChild(NameToken("@static(${child.hashCode()})"), child)
+
+    /**
+     * Recursively create a child group
+     */
+    protected abstract fun createGroup(name: Name): MutableVisualGroup
+
+    /**
+     * Add named or unnamed child to the group. If key is null the child is considered unnamed. Both key and value are not
+     * allowed to be null in the same time. If name is present and [child] is null, the appropriate element is removed.
+     */
+    override fun set(name: Name, child: VisualObject?) {
+        when {
+            name.isEmpty() -> {
+                if (child != null) {
+                    addStatic(child)
+                }
+            }
+            name.length == 1 -> {
+                val token = name.first()!!
+                if (child == null) {
+                    removeChild(token)
+                } else {
+                    setChild(token, child)
+                }
+            }
+            else -> {
+                //TODO add safety check
+                val parent = (get(name.cutLast()) as? MutableVisualGroup) ?: createGroup(name.cutLast())
+                parent[name.last()!!.asName()] = child
+            }
+        }
+        structureChangeListeners.forEach { it.callback(name, child) }
+    }
+
+    operator fun set(key: String, child: VisualObject?): Unit {
+        if (key.isBlank()) {
+            if(child!= null) {
+                addStatic(child)
+            }
+        } else {
+            set(key.toName(), child)
+        }
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/AbstractVisualObject.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/AbstractVisualObject.kt
new file mode 100644
index 00000000..7701eb1c
--- /dev/null
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/AbstractVisualObject.kt
@@ -0,0 +1,93 @@
+package hep.dataforge.vis.common
+
+import hep.dataforge.meta.*
+import hep.dataforge.names.Name
+import hep.dataforge.names.asName
+import hep.dataforge.vis.common.VisualObject.Companion.STYLE_KEY
+import kotlinx.serialization.Transient
+
+internal data class PropertyListener(
+    val owner: Any? = null,
+    val action: (name: Name, oldItem: MetaItem<*>?, newItem: MetaItem<*>?) -> Unit
+)
+
+abstract class AbstractVisualObject : VisualObject {
+
+    @Transient
+    override var parent: VisualObject? = null
+
+    protected abstract var properties: Config?
+
+    override var styles: List<String>
+        get() = properties?.get(STYLE_KEY).stringList
+        set(value) {
+            //val allStyles = (field + value).distinct()
+            setProperty(STYLE_KEY, value)
+            updateStyles(value)
+        }
+
+    protected fun updateStyles(names: List<String>) {
+        names.mapNotNull { findStyle(it) }.asSequence()
+            .flatMap { it.items.asSequence() }
+            .distinctBy { it.key }
+            .forEach {
+                propertyChanged(it.key.asName(), null, it.value)
+            }
+    }
+
+    /**
+     * The config is initialized and assigned on-demand.
+     * To avoid unnecessary allocations, one should access [properties] via [getProperty] instead.
+     */
+    override val config: Config
+        get() = properties ?: Config().also { config ->
+            properties = config.apply { onChange(this, ::propertyChanged) }
+        }
+
+    @Transient
+    private val listeners = HashSet<PropertyListener>()
+
+    override fun propertyChanged(name: Name, before: MetaItem<*>?, after: MetaItem<*>?) {
+        if (before != after) {
+            for (l in listeners) {
+                l.action(name, before, after)
+            }
+        }
+    }
+
+    override fun onPropertyChange(owner: Any?, action: (Name, before: MetaItem<*>?, after: MetaItem<*>?) -> Unit) {
+        listeners.add(PropertyListener(owner, action))
+    }
+
+    override fun removeChangeListener(owner: Any?) {
+        listeners.removeAll { it.owner == owner }
+    }
+
+    private var styleCache: Meta? = null
+
+    /**
+     * Collect all styles for this object in a laminate
+     */
+    protected val mergedStyles: Meta
+        get() = styleCache ?: findAllStyles().merge().also {
+            styleCache = it
+        }
+
+    override fun allProperties(): Laminate = Laminate(properties, mergedStyles)
+
+    override fun getProperty(name: Name, inherit: Boolean): MetaItem<*>? {
+        return if (inherit) {
+            properties?.get(name) ?: mergedStyles[name] ?: parent?.getProperty(name, inherit)
+        } else {
+            properties?.get(name) ?: mergedStyles[name]
+        }
+    }
+}
+
+//fun VisualObject.findStyle(styleName: Name): Meta? {
+//    if (this is VisualGroup) {
+//        val style = resolveStyle(styleName)
+//        if (style != null) return style
+//    }
+//    return parent?.findStyle(styleName)
+//}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/Colors.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/Colors.kt
index 0365e300..3335c086 100644
--- a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/Colors.kt
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/Colors.kt
@@ -1,7 +1,13 @@
 package hep.dataforge.vis.common
 
+import hep.dataforge.meta.*
+import hep.dataforge.values.ValueType
+import hep.dataforge.values.int
+import kotlin.math.max
+
 /**
- * Taken from https://github.com/markaren/three.kt/blob/master/threejs-wrapper/src/main/kotlin/info/laht/threekt/math/ColorConstants.kt
+ * Definitions of common colors. Taken from
+ * https://github.com/markaren/three.kt/blob/master/threejs-wrapper/src/main/kotlin/info/laht/threekt/math/ColorConstants.kt
  */
 object Colors {
     const val aliceblue = 0xF0F8FF
@@ -174,4 +180,63 @@ object Colors {
     const val whitesmoke = 0xF5F5F5
     const val yellow = 0xFFFF00
     const val yellowgreen = 0x9ACD32
+
+    const val RED_KEY = "red"
+    const val GREEN_KEY = "green"
+    const val BLUE_KEY = "blue"
+
+    /**
+     * Convert color represented as Meta to string of format #rrggbb
+     */
+    fun fromMeta(item: MetaItem<*>): String {
+        return when (item) {
+            is MetaItem.NodeItem<*> -> {
+                val node = item.node
+                rgbToString(
+                    node[RED_KEY].number?.toByte()?.toUByte() ?: 0u,
+                    node[GREEN_KEY].number?.toByte()?.toUByte() ?: 0u,
+                    node[BLUE_KEY].number?.toByte()?.toUByte() ?: 0u
+                )
+            }
+            is MetaItem.ValueItem -> {
+                if (item.value.type == ValueType.NUMBER) {
+                    rgbToString(item.value.int)
+                } else {
+                    item.value.string
+                }
+            }
+        }
+    }
+
+    /**
+     * Convert Int color to string of format #rrggbb
+     */
+    fun rgbToString(rgb: Int): String {
+        val string = rgb.toString(16).padStart(6, '0')
+        return "#" + string.substring(max(0, string.length - 6))
+    }
+
+    /**
+     * Convert three bytes representing color to string of format #rrggbb
+     */
+    fun rgbToString(red: UByte, green: UByte, blue: UByte): String {
+        fun colorToString(color: UByte): String {
+            return color.toString(16).padStart(2, '0')
+        }
+        return buildString {
+            append("#")
+            append(colorToString(red))
+            append(colorToString(green))
+            append(colorToString(blue))
+        }
+    }
+
+    /**
+     * Convert three bytes representing color to Meta
+     */
+    fun rgbToMeta(r: UByte, g: UByte, b: UByte): Meta = buildMeta {
+        RED_KEY put r.toInt()
+        GREEN_KEY put g.toInt()
+        BLUE_KEY put b.toInt()
+    }
 }
\ No newline at end of file
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/StyleSheet.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/StyleSheet.kt
new file mode 100644
index 00000000..fce0b422
--- /dev/null
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/StyleSheet.kt
@@ -0,0 +1,63 @@
+@file:UseSerializers(MetaSerializer::class)
+
+package hep.dataforge.vis.common
+
+import hep.dataforge.io.serialization.MetaSerializer
+import hep.dataforge.meta.*
+import hep.dataforge.names.Name
+import hep.dataforge.names.asName
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.Transient
+import kotlinx.serialization.UseSerializers
+
+@Serializable
+class StyleSheet() {
+    @Transient
+    internal var owner: VisualObject? = null
+
+    constructor(owner: VisualObject) : this() {
+        this.owner = owner
+    }
+
+    private val styleMap = HashMap<String, Meta>()
+
+    val items: Map<String, Meta> get() = styleMap
+
+    operator fun get(key: String): Meta? {
+        return styleMap[key] ?: (owner?.parent as? VisualGroup)?.styleSheet?.get(key)
+    }
+
+    /**
+     * Define a style without notifying
+     */
+    fun define(key: String, style: Meta?) {
+        if (style == null) {
+            styleMap.remove(key)
+        } else {
+            styleMap[key] = style
+        }
+    }
+
+    operator fun set(key: String, style: Meta?) {
+        val oldStyle = styleMap[key]
+        define(key, style)
+        owner?.styleChanged(key, oldStyle, style)
+    }
+
+    operator fun set(key: String, builder: MetaBuilder.() -> Unit) {
+        val newStyle = get(key)?.let { buildMeta(it, builder) } ?: buildMeta(builder)
+        set(key, newStyle.seal())
+    }
+}
+
+private fun VisualObject.styleChanged(key: String, oldStyle: Meta?, newStyle: Meta?) {
+    if (styles.contains(key)) {
+        //TODO optimize set concatenation
+        val tokens: Collection<Name> = ((oldStyle?.items?.keys ?: emptySet()) + (newStyle?.items?.keys ?: emptySet()))
+            .map { it.asName() }
+        tokens.forEach { parent?.propertyChanged(it, oldStyle?.get(it), newStyle?.get(it)) }
+    }
+    if (this is VisualGroup) {
+        this.forEach { it.styleChanged(key, oldStyle, newStyle) }
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualGroup.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualGroup.kt
index 144f26e6..467616c3 100644
--- a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualGroup.kt
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualGroup.kt
@@ -1,131 +1,89 @@
 package hep.dataforge.vis.common
 
-import hep.dataforge.meta.Config
-import hep.dataforge.meta.MetaBuilder
-import hep.dataforge.meta.MetaItem
-import hep.dataforge.names.Name
-import hep.dataforge.names.toName
+import hep.dataforge.names.*
 import hep.dataforge.provider.Provider
-import kotlinx.serialization.Transient
-import kotlin.collections.set
 
-open class VisualGroup<T : VisualObject> : AbstractVisualObject(), Iterable<T>, Provider {
-
-    protected open val namedChildren: MutableMap<Name, T> = HashMap()
-    protected open val unnamedChildren: MutableList<T> = ArrayList()
-
-    override var properties: Config? = null
+/**
+ * Represents a group of [VisualObject] instances
+ */
+interface VisualGroup : Provider, Iterable<VisualObject>, VisualObject {
+    /**
+     * A map of top level named children
+     */
+    val children: Map<NameToken, VisualObject>
 
     override val defaultTarget: String get() = VisualObject.TYPE
 
-    override fun iterator(): Iterator<T> = (namedChildren.values + unnamedChildren).iterator()
+    val styleSheet: StyleSheet?
 
-    override fun provideTop(target: String): Map<Name, Any> {
-        return when (target) {
-            VisualObject.TYPE -> namedChildren
+    override fun provideTop(target: String): Map<Name, Any> =
+        when (target) {
+            VisualObject.TYPE -> children.flatMap { (key, value) ->
+                val res: Map<Name, Any> = if (value is VisualGroup) {
+                    value.provideTop(target).mapKeys { key + it.key }
+                } else {
+                    mapOf(key.asName() to value)
+                }
+                res.entries
+            }.associate { it.toPair() }
+            STYLE_TARGET -> styleSheet?.items?.mapKeys { it.key.toName() } ?: emptyMap()
             else -> emptyMap()
         }
-    }
 
-    override fun propertyChanged(name: Name, before: MetaItem<*>?, after: MetaItem<*>?) {
-        super.propertyChanged(name, before, after)
-        forEach {
-            it.propertyChanged(name, before, after)
+
+    /**
+     * Iterate over children of this group
+     */
+    override fun iterator(): Iterator<VisualObject> = children.values.iterator()
+
+    operator fun get(name: Name): VisualObject? {
+        return when {
+            name.isEmpty() -> this
+            name.length == 1 -> children[name.first()!!]
+            else -> (children[name.first()!!] as? VisualGroup)?.get(name.cutFirst())
         }
     }
 
-    private data class Listener<T : VisualObject>(val owner: Any?, val callback: (Name?, T?) -> Unit)
-
-    @Transient
-    private val listeners = HashSet<Listener<T>>()
-
     /**
-     * Add listener for children change
+     * A fix for serialization bug that writes all proper parents inside the tree after deserialization
      */
-    fun onChildrenChange(owner: Any?, action: (Name?, T?) -> Unit) {
-        listeners.add(Listener(owner, action))
+    fun attachChildren() {
+        styleSheet?.owner = this
+        this.children.values.forEach {
+            it.parent = this
+            (it as? VisualGroup)?.attachChildren()
+        }
     }
 
+    companion object {
+        const val STYLE_TARGET = "style"
+    }
+}
+
+data class StyleRef(val group: VisualGroup, val styleName: Name)
+
+val VisualGroup.isEmpty: Boolean get() = this.children.isEmpty()
+
+/**
+ * Mutable version of [VisualGroup]
+ */
+interface MutableVisualGroup : VisualGroup {
+
+    /**
+     * Add listener for children structure change.
+     * @param owner the handler to properly remove listeners
+     * @param action First argument of the action is the name of changed child. Second argument is the new value of the object.
+     */
+    fun onChildrenChange(owner: Any?, action: (Name, VisualObject?) -> Unit)
 
     /**
      * Remove children change listener
      */
-    fun removeChildrenChangeListener(owner: Any?) {
-        listeners.removeAll { it.owner === owner }
-    }
+    fun removeChildrenChangeListener(owner: Any?)
 
-    /**
-     * Add named or unnamed child to the group. If key is [null] the child is considered unnamed. Both key and value are not
-     * allowed to be null in the same time. If name is present and [child] is null, the appropriate element is removed.
-     */
-    operator fun set(name: Name?, child: T?) {
-        when {
-            name != null -> {
-                if (child == null) {
-                    namedChildren.remove(name)
-                } else {
-                    if (child.parent == null) {
-                        child.parent = this
-                    } else {
-                        error("Can't reassign existing parent for $child")
-                    }
-                    namedChildren[name] = child
-                }
-                listeners.forEach { it.callback(name, child) }
-            }
-            child != null -> add(child)
-            else -> error("Both key and child element are empty")
-        }
-    }
+    operator fun set(name: Name, child: VisualObject?)
+}
 
-    operator fun set(key: String?, child: T?) = set(key?.asName(), child)
+operator fun VisualGroup.get(str: String?) = get(str?.toName() ?: Name.EMPTY)
 
-    /**
-     * Get named child by name
-     */
-    operator fun get(name: Name): T? = namedChildren[name]
-
-    /**
-     * Get named child by string
-     */
-    operator fun get(key: String): T? = namedChildren[key.toName()]
-
-    /**
-     * Get an unnamed child
-     */
-    operator fun get(index: Int): T? = unnamedChildren[index]
-
-    /**
-     * Append unnamed child
-     */
-    fun add(child: T) {
-        if (child.parent == null) {
-            child.parent = this
-        } else {
-            error("Can't reassign existing parent for $child")
-        }
-        unnamedChildren.add(child)
-        listeners.forEach { it.callback(null, child) }
-    }
-
-    /**
-     * remove unnamed child
-     */
-    fun remove(child: VisualObject) {
-        unnamedChildren.remove(child)
-        listeners.forEach { it.callback(null, null) }
-    }
-
-    protected fun MetaBuilder.updateChildren() {
-        //adding unnamed children
-        "unnamedChildren" to unnamedChildren.map { it.toMeta() }
-        //adding named children
-        namedChildren.forEach {
-            "children[${it.key}]" to it.value.toMeta()
-        }
-    }
-
-    override fun MetaBuilder.updateMeta() {
-        updateChildren()
-    }
-}
\ No newline at end of file
+fun MutableVisualGroup.removeAll() = children.keys.map { it.asName() }.forEach { this[it] = null }
\ No newline at end of file
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualObject.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualObject.kt
index 6f131fe2..6aad894a 100644
--- a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualObject.kt
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualObject.kt
@@ -2,18 +2,20 @@ package hep.dataforge.vis.common
 
 import hep.dataforge.meta.*
 import hep.dataforge.names.Name
+import hep.dataforge.names.asName
+import hep.dataforge.names.toName
 import hep.dataforge.provider.Type
 import hep.dataforge.vis.common.VisualObject.Companion.TYPE
 import kotlinx.serialization.Transient
 
-private fun Laminate.withTop(meta: Meta): Laminate = Laminate(listOf(meta) + layers)
-private fun Laminate.withBottom(meta: Meta): Laminate = Laminate(layers + meta)
+//private fun Laminate.withTop(meta: Meta): Laminate = Laminate(listOf(meta) + layers)
+//private fun Laminate.withBottom(meta: Meta): Laminate = Laminate(layers + meta)
 
 /**
  * A root type for display hierarchy
  */
 @Type(TYPE)
-interface VisualObject : MetaRepr, Configurable {
+interface VisualObject : Configurable {
 
     /**
      * The parent object of this one. If null, this one is a root.
@@ -21,10 +23,17 @@ interface VisualObject : MetaRepr, Configurable {
     @Transient
     var parent: VisualObject?
 
+    /**
+     * All properties including styles and prototypes if present, but without inheritance
+     */
+    fun allProperties(): Laminate
+
     /**
      * Set property for this object
      */
-    fun setProperty(name: Name, value: Any?)
+    fun setProperty(name: Name, value: Any?) {
+        config[name] = value
+    }
 
     /**
      * Get property including or excluding parent properties
@@ -32,9 +41,11 @@ interface VisualObject : MetaRepr, Configurable {
     fun getProperty(name: Name, inherit: Boolean = true): MetaItem<*>?
 
     /**
-     * Manually trigger property changed event. If [name] is empty, notify that the whole object is changed
+     * Trigger property invalidation event. If [name] is empty, notify that the whole object is changed
      */
-    fun propertyChanged(name: Name, before: MetaItem<*>? = null, after: MetaItem<*>? = null): Unit
+    fun propertyChanged(name: Name, before: MetaItem<*>?, after: MetaItem<*>?): Unit
+
+    fun propertyInvalidated(name: Name) = propertyChanged(name, null, null)
 
     /**
      * Add listener triggering on property change
@@ -46,65 +57,67 @@ interface VisualObject : MetaRepr, Configurable {
      */
     fun removeChangeListener(owner: Any?)
 
+    /**
+     * List of names of styles applied to this object. Order matters. Not inherited
+     */
+    var styles: List<String>
+
     companion object {
         const val TYPE = "visual"
+        val STYLE_KEY = "@style".asName()
 
         //const val META_KEY = "@meta"
         //const val TAGS_KEY = "@tags"
+
     }
 }
 
-internal data class MetaListener(
-    val owner: Any? = null,
-    val action: (name: Name, oldItem: MetaItem<*>?, newItem: MetaItem<*>?) -> Unit
-)
+/**
+ * Get [VisualObject] property using key as a String
+ */
+fun VisualObject.getProperty(key: String, inherit: Boolean = true): MetaItem<*>? = getProperty(key.toName(), inherit)
 
-abstract class AbstractVisualObject: VisualObject {
+/**
+ * Set [VisualObject] property using key as a String
+ */
+fun VisualObject.setProperty(key: String, value: Any?) = setProperty(key.toName(), value)
 
-    @Transient
-    override var parent: VisualObject? = null
+/**
+ * Add style name to the list of styles to be resolved later. The style with given name does not necessary exist at the moment.
+ */
+fun VisualObject.useStyle(name: String) {
+    styles = styles + name
+}
 
-    @Transient
-    private val listeners = HashSet<MetaListener>()
+//private tailrec fun VisualObject.topGroup(): VisualGroup? {
+//    val parent = this.parent
+//    return if (parent == null) {
+//        this as? VisualGroup
+//    }
+//    else {
+//        parent.topGroup()
+//    }
+//}
+//
+///**
+// * Add or update given style on a top-most reachable parent group and apply it to this object
+// */
+//fun VisualObject.useStyle(name: String, builder: MetaBuilder.() -> Unit) {
+//    val styleName = name.toName()
+//    topGroup()?.updateStyle(styleName, builder) ?: error("Can't find parent group for $this")
+//    useStyle(styleName)
+//}
 
-    override fun propertyChanged(name: Name, before: MetaItem<*>?, after: MetaItem<*>?) {
-        for (l in listeners) {
-            l.action(name, before, after)
-        }
-    }
+tailrec fun VisualObject.findStyle(name: String): Meta? =
+    (this as? VisualGroup)?.styleSheet?.get(name) ?: parent?.findStyle(name)
 
-    override fun onPropertyChange(owner: Any?, action: (Name, before: MetaItem<*>?, after: MetaItem<*>?) -> Unit) {
-        listeners.add(MetaListener(owner, action))
-    }
+fun VisualObject.findAllStyles(): Laminate = Laminate(styles.mapNotNull(::findStyle))
 
-    override fun removeChangeListener(owner: Any?) {
-        listeners.removeAll { it.owner == owner }
-    }
+//operator fun VisualObject.get(name: Name): VisualObject?{
+//    return when {
+//        name.isEmpty() -> this
+//        this is VisualGroup -> this[name]
+//        else -> null
+//    }
+//}
 
-    abstract var properties: Config?
-    override val config: Config
-        get() = properties ?: Config().also { config ->
-            properties = config
-            config.onChange(this, ::propertyChanged)
-        }
-
-    override fun setProperty(name: Name, value: Any?) {
-        config[name] = value
-    }
-
-    override fun getProperty(name: Name, inherit: Boolean): MetaItem<*>? {
-        return if (inherit) {
-            properties?.get(name) ?: parent?.getProperty(name, inherit)
-        } else {
-            properties?.get(name)
-        }
-    }
-
-    protected open fun MetaBuilder.updateMeta() {}
-
-    override fun toMeta(): Meta = buildMeta {
-        "type" to this::class.simpleName
-        "properties" to properties
-        updateMeta()
-    }
-}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualObjectDelegates.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualObjectDelegate.kt
similarity index 63%
rename from dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualObjectDelegates.kt
rename to dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualObjectDelegate.kt
index 748e537b..1dba2c7f 100644
--- a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualObjectDelegates.kt
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualObjectDelegate.kt
@@ -4,18 +4,18 @@ import hep.dataforge.meta.*
 import hep.dataforge.names.Name
 import hep.dataforge.names.NameToken
 import hep.dataforge.names.asName
+import hep.dataforge.names.toName
 import hep.dataforge.values.Value
 import kotlin.jvm.JvmName
 import kotlin.properties.ReadOnlyProperty
 import kotlin.properties.ReadWriteProperty
 import kotlin.reflect.KProperty
 
-fun String.asName() = NameToken(this).asName()
 
 /**
  * A delegate for display object properties
  */
-class DisplayObjectDelegate(
+class VisualObjectDelegate(
     val key: Name?,
     val default: MetaItem<*>?,
     val inherited: Boolean
@@ -35,82 +35,84 @@ class DisplayObjectDelegate(
     }
 }
 
-class DisplayObjectDelegateWrapper<T>(
+class VisualObjectDelegateWrapper<T>(
+    val obj: VisualObject,
     val key: Name?,
     val default: T,
     val inherited: Boolean,
     val write: Config.(name: Name, value: T) -> Unit = { name, value -> set(name, value) },
     val read: (MetaItem<*>?) -> T?
-) : ReadWriteProperty<VisualObject, T> {
+) : ReadWriteProperty<Any?, T> {
 
     //private var cachedName: Name? = null
 
-    override fun getValue(thisRef: VisualObject, property: KProperty<*>): T {
+    override fun getValue(thisRef: Any?, property: KProperty<*>): T {
         val name = key ?: property.name.asName()
-        return if (inherited) {
-            read(thisRef.getProperty(name))
-        } else {
-            read(thisRef.config[name])
-        } ?: default
+        return read(obj.getProperty(name,inherited))?:default
     }
 
-    override fun setValue(thisRef: VisualObject, property: KProperty<*>, value: T) {
+    override fun setValue(thisRef: Any?, property: KProperty<*>, value: T) {
         val name = key ?: property.name.asName()
-        thisRef.config[name] = value
+        obj.config[name] = value
     }
 }
 
 
 fun VisualObject.value(default: Value? = null, key: String? = null, inherited: Boolean = false) =
-    DisplayObjectDelegateWrapper(key?.asName(), default, inherited) { it.value }
+    VisualObjectDelegateWrapper(this, key?.toName(), default, inherited) { it.value }
 
 fun VisualObject.string(default: String? = null, key: String? = null, inherited: Boolean = false) =
-    DisplayObjectDelegateWrapper(key?.asName(), default, inherited) { it.string }
+    VisualObjectDelegateWrapper(this, key?.toName(), default, inherited) { it.string }
 
 fun VisualObject.boolean(default: Boolean? = null, key: String? = null, inherited: Boolean = false) =
-    DisplayObjectDelegateWrapper(key?.asName(), default, inherited) { it.boolean }
+    VisualObjectDelegateWrapper(this, key?.toName(), default, inherited) { it.boolean }
 
 fun VisualObject.number(default: Number? = null, key: String? = null, inherited: Boolean = false) =
-    DisplayObjectDelegateWrapper(key?.asName(), default, inherited) { it.number }
+    VisualObjectDelegateWrapper(this, key?.toName(), default, inherited) { it.number }
 
 fun VisualObject.double(default: Double? = null, key: String? = null, inherited: Boolean = false) =
-    DisplayObjectDelegateWrapper(key?.asName(), default, inherited) { it.double }
+    VisualObjectDelegateWrapper(this, key?.toName(), default, inherited) { it.double }
 
 fun VisualObject.int(default: Int? = null, key: String? = null, inherited: Boolean = false) =
-    DisplayObjectDelegateWrapper(key?.asName(), default, inherited) { it.int }
+    VisualObjectDelegateWrapper(this, key?.toName(), default, inherited) { it.int }
 
 
 fun VisualObject.node(key: String? = null, inherited: Boolean = true) =
-    DisplayObjectDelegateWrapper(key?.asName(), null, inherited) { it.node }
+    VisualObjectDelegateWrapper(this, key?.toName(), null, inherited) { it.node }
 
 fun VisualObject.item(key: String? = null, inherited: Boolean = true) =
-    DisplayObjectDelegateWrapper(key?.asName(), null, inherited) { it }
+    VisualObjectDelegateWrapper(this, key?.toName(), null, inherited) { it }
 
 //fun <T : Configurable> Configurable.spec(spec: Specification<T>, key: String? = null) = ChildConfigDelegate<T>(key) { spec.wrap(this) }
 
 @JvmName("safeString")
 fun VisualObject.string(default: String, key: String? = null, inherited: Boolean = false) =
-    DisplayObjectDelegateWrapper(key?.asName(), default, inherited) { it.string }
+    VisualObjectDelegateWrapper(this, key?.toName(), default, inherited) { it.string }
 
 @JvmName("safeBoolean")
 fun VisualObject.boolean(default: Boolean, key: String? = null, inherited: Boolean = false) =
-    DisplayObjectDelegateWrapper(key?.asName(), default, inherited) { it.boolean }
+    VisualObjectDelegateWrapper(this, key?.toName(), default, inherited) { it.boolean }
 
 @JvmName("safeNumber")
 fun VisualObject.number(default: Number, key: String? = null, inherited: Boolean = false) =
-    DisplayObjectDelegateWrapper(key?.asName(), default, inherited) { it.number }
+    VisualObjectDelegateWrapper(this, key?.toName(), default, inherited) { it.number }
 
 @JvmName("safeDouble")
 fun VisualObject.double(default: Double, key: String? = null, inherited: Boolean = false) =
-    DisplayObjectDelegateWrapper(key?.asName(), default, inherited) { it.double }
+    VisualObjectDelegateWrapper(this, key?.toName(), default, inherited) { it.double }
 
 @JvmName("safeInt")
 fun VisualObject.int(default: Int, key: String? = null, inherited: Boolean = false) =
-    DisplayObjectDelegateWrapper(key?.asName(), default, inherited) { it.int }
+    VisualObjectDelegateWrapper(this, key?.toName(), default, inherited) { it.int }
 
 
 inline fun <reified E : Enum<E>> VisualObject.enum(default: E, key: String? = null, inherited: Boolean = false) =
-    DisplayObjectDelegateWrapper(key?.let{ NameToken(it).asName()}, default, inherited) { item -> item.string?.let { enumValueOf<E>(it) } }
+    VisualObjectDelegateWrapper(
+        this,
+        key?.let { NameToken(it).asName() },
+        default,
+        inherited
+    ) { item -> item.string?.let { enumValueOf<E>(it) } }
 
 //merge properties
 
@@ -118,11 +120,11 @@ fun <T> VisualObject.merge(
     key: String? = null,
     transformer: (Sequence<MetaItem<*>>) -> T
 ): ReadOnlyProperty<VisualObject, T> {
-    return object : ReadOnlyProperty<VisualObject, T> {
-        override fun getValue(thisRef: VisualObject, property: KProperty<*>): T {
-            val name = key?.asName() ?: property.name.asName()
+    return object : ReadOnlyProperty<Any?, T> {
+        override fun getValue(thisRef: Any?, property: KProperty<*>): T {
+            val name = key?.toName() ?: property.name.asName()
             val sequence = sequence<MetaItem<*>> {
-                var thisObj: VisualObject? = thisRef
+                var thisObj: VisualObject? = this@merge
                 while (thisObj != null) {
                     thisObj.config[name]?.let { yield(it) }
                     thisObj = thisObj.parent
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualPlugin.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualPlugin.kt
index 933e4736..39a1abc0 100644
--- a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualPlugin.kt
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/VisualPlugin.kt
@@ -30,7 +30,8 @@ class VisualPlugin(meta: Meta) : AbstractPlugin(meta) {
     companion object : PluginFactory<VisualPlugin> {
         override val tag: PluginTag = PluginTag(name = "visual", group = PluginTag.DATAFORGE_GROUP)
         override val type: KClass<out VisualPlugin> = VisualPlugin::class
-        override fun invoke(meta: Meta): VisualPlugin = VisualPlugin(meta)
+
+        override fun invoke(meta: Meta, context: Context): VisualPlugin = VisualPlugin(meta)
 
         const val VISUAL_FACTORY_TYPE = "visual.factory"
     }
diff --git a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/valueWidget.kt b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/valueWidget.kt
index fb4d5f32..8c45686f 100644
--- a/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/valueWidget.kt
+++ b/dataforge-vis-common/src/commonMain/kotlin/hep/dataforge/vis/common/valueWidget.kt
@@ -3,12 +3,18 @@ package hep.dataforge.vis.common
 import hep.dataforge.descriptors.ValueDescriptor
 import hep.dataforge.meta.*
 
+/**
+ * Extension property to access the "widget" key of [ValueDescriptor]
+ */
 var ValueDescriptor.widget: Meta
     get() = this.config["widget"].node?: EmptyMeta
     set(value) {
         this.config["widget"] = value
     }
 
+/**
+ * Extension property to access the "widget.type" key of [ValueDescriptor]
+ */
 var ValueDescriptor.widgetType: String?
     get() = this["widget.type"].string
     set(value) {
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep.dataforge.vis.hmr/HMR.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/Application.kt
similarity index 63%
rename from dataforge-vis-common/src/jsMain/kotlin/hep.dataforge.vis.hmr/HMR.kt
rename to dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/Application.kt
index 37b4c4c1..53734c31 100644
--- a/dataforge-vis-common/src/jsMain/kotlin/hep.dataforge.vis.hmr/HMR.kt
+++ b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/Application.kt
@@ -1,14 +1,10 @@
-package hep.dataforge.vis.hmr
+package hep.dataforge.js
 
 import kotlin.browser.document
 import kotlin.dom.hasClass
 
 external val module: Module
 
-external interface Module {
-    val hot: Hot?
-}
-
 external interface Hot {
     val data: dynamic
 
@@ -19,17 +15,31 @@ external interface Hot {
     fun dispose(callback: (data: dynamic) -> Unit)
 }
 
-external fun require(name: String): dynamic
-
-abstract class ApplicationBase {
-    open val stateKeys: List<String> get() = emptyList()
-
-    abstract fun start(state: Map<String, Any>)
-    open fun dispose(): Map<String, Any> = emptyMap()
+external interface Module {
+    val hot: Hot?
 }
 
-fun startApplication(builder: () -> ApplicationBase) {
-    fun start(state: dynamic): ApplicationBase? {
+/**
+ * Base interface for applications.
+ *
+ * Base interface for applications supporting Hot Module Replacement (HMR).
+ */
+interface Application {
+    /**
+     * Starting point for an application.
+     * @param state Initial state between Hot Module Replacement (HMR).
+     */
+    fun start(state: Map<String, Any>)
+
+    /**
+     * Ending point for an application.
+     * @return final state for Hot Module Replacement (HMR).
+     */
+    fun dispose(): Map<String, Any> = emptyMap()
+}
+
+fun startApplication(builder: () -> Application) {
+    fun start(state: dynamic): Application? {
         return if (document.body?.hasClass("testApp") == true) {
             val application = builder()
 
@@ -42,7 +52,7 @@ fun startApplication(builder: () -> ApplicationBase) {
         }
     }
 
-    var application: ApplicationBase? = null
+    var application: Application? = null
 
     val state: dynamic = module.hot?.let { hot ->
         hot.accept()
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/jsExtra.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/jsExtra.kt
new file mode 100644
index 00000000..6354a61c
--- /dev/null
+++ b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/js/jsExtra.kt
@@ -0,0 +1,24 @@
+package hep.dataforge.js
+
+@JsName("require")
+external fun requireJS(name: String): dynamic
+
+inline fun <T : Any> jsObject(builder: T.() -> Unit): T {
+    val obj: T = js("({})") as T
+    return obj.apply {
+        builder()
+    }
+}
+
+inline fun js(builder: dynamic.() -> Unit): dynamic = jsObject(builder)
+
+//fun <T : Any> clone(obj: T) = objectAssign(jsObject<T> {}, obj)
+
+//inline fun <T : Any> assign(obj: T, builder: T.() -> Unit) = clone(obj).apply(builder)
+
+fun toPlainObjectStripNull(obj: Any) = js {
+    for (key in Object.keys(obj)) {
+        val value = obj.asDynamic()[key]
+        if (value != null) this[key] = value
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/bootstrap.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/bootstrap.kt
new file mode 100644
index 00000000..2f1e4595
--- /dev/null
+++ b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/bootstrap.kt
@@ -0,0 +1,15 @@
+package hep.dataforge.vis.js.editor
+
+import kotlinx.html.TagConsumer
+import kotlinx.html.js.div
+import kotlinx.html.js.h3
+import org.w3c.dom.HTMLElement
+
+inline fun TagConsumer<HTMLElement>.card(title: String, crossinline block: TagConsumer<HTMLElement>.() -> Unit) {
+    div("card w-100") {
+        div("card-body") {
+            h3(classes = "card-title") { +title }
+            block()
+        }
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/jsTree.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/jsTree.kt
new file mode 100644
index 00000000..3cf4a985
--- /dev/null
+++ b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/jsTree.kt
@@ -0,0 +1,78 @@
+package hep.dataforge.vis.js.editor
+
+import hep.dataforge.names.Name
+import hep.dataforge.names.plus
+import hep.dataforge.vis.common.VisualGroup
+import hep.dataforge.vis.common.VisualObject
+import hep.dataforge.vis.common.isEmpty
+import kotlinx.html.TagConsumer
+import kotlinx.html.dom.append
+import kotlinx.html.js.*
+import org.w3c.dom.Element
+import org.w3c.dom.HTMLElement
+import org.w3c.dom.HTMLSpanElement
+import kotlin.dom.clear
+
+fun Element.displayObjectTree(
+    obj: VisualObject,
+    clickCallback: (Name) -> Unit = {}
+) {
+    clear()
+    append {
+        card("Object tree") {
+            subTree(Name.EMPTY, obj, clickCallback)
+        }
+    }
+}
+
+private fun TagConsumer<HTMLElement>.subTree(
+    fullName: Name,
+    obj: VisualObject,
+    clickCallback: (Name) -> Unit
+) {
+//    val fullName = parentName + token
+    val token = fullName.last()?.toString()?:"World"
+
+    //display as node if any child is visible
+    if (obj is VisualGroup && obj.children.keys.any { !it.body.startsWith("@") }) {
+        lateinit var toggle: HTMLSpanElement
+        div("d-inline-block text-truncate") {
+            toggle = span("objTree-caret")
+            label("objTree-label") {
+                +token
+                onClickFunction = { clickCallback(fullName) }
+            }
+        }
+        val subtree = ul("objTree-subtree")
+        toggle.onclick = {
+            toggle.classList.toggle("objTree-caret-down")
+            subtree.apply {
+                //If expanded, add children dynamically
+                if (toggle.classList.contains("objTree-caret-down")) {
+                    obj.children.entries
+                        .filter { !it.key.toString().startsWith("@") } // ignore statics and other hidden children
+                        .sortedBy { (it.value as? VisualGroup)?.isEmpty ?: true }
+                        .forEach { (childToken, child) ->
+                            append {
+                                li().apply {
+                                    subTree(fullName + childToken, child, clickCallback)
+                                }
+                            }
+                        }
+                } else {
+                    // if not, clear them to conserve memory on very long lists
+                    this.clear()
+                }
+            }
+        }
+    } else {
+        div("d-inline-block text-truncate") {
+            span("objTree-leaf")
+            label("objTree-label") {
+                +token
+                onClickFunction = { clickCallback(fullName) }
+            }
+        }
+    }
+}
+
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/jsoneditor.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/jsoneditor.kt
new file mode 100644
index 00000000..8bfaf93a
--- /dev/null
+++ b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/jsoneditor.kt
@@ -0,0 +1,185 @@
+@file:Suppress(
+    "INTERFACE_WITH_SUPERCLASS",
+    "OVERRIDING_FINAL_MEMBER",
+    "RETURN_TYPE_MISMATCH_ON_OVERRIDE",
+    "CONFLICTING_OVERLOADS",
+    "EXTERNAL_DELEGATION"
+)
+
+package hep.dataforge.vis.js.editor
+
+import org.w3c.dom.HTMLElement
+
+external interface Node {
+    var field: String
+    var value: String? get() = definedExternally; set(value) = definedExternally
+    var path: dynamic
+}
+
+external interface NodeName {
+    var path: Array<String>
+    var type: dynamic /* 'object' | 'array' */
+    var size: Number
+}
+
+external interface ValidationError {
+    var path: dynamic
+    var message: String
+}
+
+external interface Template {
+    var text: String
+    var title: String
+    var className: String? get() = definedExternally; set(value) = definedExternally
+    var field: String
+    var value: Any
+}
+
+external interface `T$6` {
+    var startFrom: Number
+    var options: Array<String>
+}
+
+external interface AutoCompleteOptions {
+    var confirmKeys: Array<Number>? get() = definedExternally; set(value) = definedExternally
+    var caseSensitive: Boolean? get() = definedExternally; set(value) = definedExternally
+//    var getOptions: AutoCompleteOptionsGetter? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface SelectionPosition {
+    var row: Number
+    var column: Number
+}
+
+external interface SerializableNode {
+    var value: Any
+    var path: dynamic
+}
+
+external interface Color {
+    var rgba: Array<Number>
+    var hsla: Array<Number>
+    var rgbString: String
+    var rgbaString: String
+    var hslString: String
+    var hslaString: String
+    var hex: String
+}
+
+//external interface `T$0` {
+//    var field: Boolean
+//    var value: Boolean
+//}
+//
+//external interface `T$1` {
+//    @nativeGetter
+//    operator fun get(key: String): String?
+//
+//    @nativeSetter
+//    operator fun set(key: String, value: String)
+//}
+
+//external interface Languages {
+//    @nativeGetter
+//    operator fun get(lang: String): `T$1`?
+//
+//    @nativeSetter
+//    operator fun set(lang: String, value: `T$1`)
+//}
+
+external interface JSONEditorOptions {
+//    var ace: AceAjax.Ace? get() = definedExternally; set(value) = definedExternally
+//    var ajv: Ajv? get() = definedExternally; set(value) = definedExternally
+    var onChange: (() -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onChangeJSON: ((json: Any) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onChangeText: ((jsonString: String) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onEditable: ((node: Node) -> dynamic)? get() = definedExternally; set(value) = definedExternally
+    var onError: ((error: Error) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onModeChange: ((newMode: dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */, oldMode: dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onNodeName: ((nodeName: NodeName) -> String?)? get() = definedExternally; set(value) = definedExternally
+    var onValidate: ((json: Any) -> dynamic)? get() = definedExternally; set(value) = definedExternally
+    var escapeUnicode: Boolean? get() = definedExternally; set(value) = definedExternally
+    var sortObjectKeys: Boolean? get() = definedExternally; set(value) = definedExternally
+    var history: Boolean? get() = definedExternally; set(value) = definedExternally
+    var mode: dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */
+    var modes: Array<dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */>? get() = definedExternally; set(value) = definedExternally
+    var name: String? get() = definedExternally; set(value) = definedExternally
+    var schema: Any? get() = definedExternally; set(value) = definedExternally
+    var schemaRefs: Any? get() = definedExternally; set(value) = definedExternally
+    var search: Boolean? get() = definedExternally; set(value) = definedExternally
+    var indentation: Number? get() = definedExternally; set(value) = definedExternally
+    var theme: String? get() = definedExternally; set(value) = definedExternally
+    var templates: Array<Template>? get() = definedExternally; set(value) = definedExternally
+    var autocomplete: AutoCompleteOptions? get() = definedExternally; set(value) = definedExternally
+    var mainMenuBar: Boolean? get() = definedExternally; set(value) = definedExternally
+    var navigationBar: Boolean? get() = definedExternally; set(value) = definedExternally
+    var statusBar: Boolean? get() = definedExternally; set(value) = definedExternally
+    var onTextSelectionChange: ((start: SelectionPosition, end: SelectionPosition, text: String) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onSelectionChange: ((start: SerializableNode, end: SerializableNode) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onEvent: ((node: Node, event: String) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var colorPicker: Boolean? get() = definedExternally; set(value) = definedExternally
+    var onColorPicker: ((parent: HTMLElement, color: String, onChange: (color: Color) -> Unit) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var timestampTag: Boolean? get() = definedExternally; set(value) = definedExternally
+    var language: String? get() = definedExternally; set(value) = definedExternally
+    //var languages: Languages? get() = definedExternally; set(value) = definedExternally
+    var modalAnchor: HTMLElement? get() = definedExternally; set(value) = definedExternally
+    var enableSort: Boolean? get() = definedExternally; set(value) = definedExternally
+    var enableTransform: Boolean? get() = definedExternally; set(value) = definedExternally
+    var maxVisibleChilds: Number? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface JsonPath {
+    var path: dynamic
+}
+
+external interface EditorSelection {
+    var start: SerializableNode
+    var end: SerializableNode
+}
+
+external interface TextSelection {
+    var start: SelectionPosition
+    var end: SelectionPosition
+    var text: String
+}
+
+@JsModule("jsoneditor")
+@JsNonModule
+external open class JSONEditor(
+    container: HTMLElement,
+    options: JSONEditorOptions? = definedExternally /* null */,
+    json: dynamic = definedExternally /* null */
+) {
+    open fun collapseAll()
+    open fun destroy()
+    open fun expandAll()
+    open fun focus()
+    open fun get(): Any
+    open fun getMode(): dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */
+    open fun getName(): String?
+    open fun getNodesByRange(start: JsonPath, end: JsonPath): Array<SerializableNode>
+    open fun getSelection(): EditorSelection
+    open fun getText(): String
+    open fun getTextSelection(): TextSelection
+    open fun refresh()
+    open fun set(json: Any)
+    open fun setMode(mode: String /* 'tree' */)
+    open fun setMode(mode: String /* 'view' */)
+    open fun setMode(mode: String /* 'form' */)
+    open fun setMode(mode: String /* 'code' */)
+    open fun setMode(mode: String /* 'text' */)
+    open fun setName(name: String? = definedExternally /* null */)
+    open fun setSchema(schema: Any?, schemaRefs: Any? = definedExternally /* null */)
+    open fun setSelection(start: JsonPath, end: JsonPath)
+    open fun setText(jsonString: String)
+    open fun setTextSelection(start: SelectionPosition, end: SelectionPosition)
+    open fun update(json: Any)
+    open fun updateText(jsonString: String)
+
+    companion object {
+        var VALID_OPTIONS: Array<String>
+//        var ace: AceAjax.Ace
+//        var Ajv: Ajv
+        var VanillaPicker: Any
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/propertyEditor.kt b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/propertyEditor.kt
new file mode 100644
index 00000000..590c208f
--- /dev/null
+++ b/dataforge-vis-common/src/jsMain/kotlin/hep/dataforge/vis/js/editor/propertyEditor.kt
@@ -0,0 +1,75 @@
+package hep.dataforge.vis.js.editor
+
+import hep.dataforge.io.toJson
+import hep.dataforge.js.jsObject
+import hep.dataforge.meta.DynamicMeta
+import hep.dataforge.meta.Meta
+import hep.dataforge.meta.update
+import hep.dataforge.names.Name
+import hep.dataforge.names.isEmpty
+import hep.dataforge.vis.common.VisualObject
+import hep.dataforge.vis.common.findStyle
+import kotlinx.html.dom.append
+import kotlinx.html.js.*
+import org.w3c.dom.Element
+import kotlin.collections.forEach
+import kotlin.collections.isNotEmpty
+import kotlin.collections.set
+import kotlin.dom.clear
+
+//FIXME something rotten in JS-Meta converter
+fun Meta.toDynamic() = JSON.parse<dynamic>(toJson().toString())
+
+//TODO add node descriptor instead of configuring property selector
+fun Element.displayPropertyEditor(
+    name: Name,
+    item: VisualObject,
+    propertySelector: (VisualObject) -> Meta = { it.config }
+) {
+    clear()
+
+    append {
+        card("Properties") {
+            if (!name.isEmpty()) {
+                nav {
+                    attributes["aria-label"] = "breadcrumb"
+                    ol("breadcrumb") {
+                        name.tokens.forEach { token ->
+                            li("breadcrumb-item") {
+                                +token.toString()
+                            }
+                        }
+                    }
+                }
+            }
+            val dMeta: dynamic = propertySelector(item).toDynamic()
+            val options: JSONEditorOptions = jsObject {
+                mode = "form"
+                onChangeJSON = { item.config.update(DynamicMeta(it.asDynamic())) }
+            }
+            JSONEditor(div(), options, dMeta)
+        }
+
+        val styles = item.styles
+        if (styles.isNotEmpty()) {
+            card("Styles") {
+                item.styles.forEach { style ->
+                    val styleMeta = item.findStyle(style)
+                    h4("container") { +style }
+                    if (styleMeta != null) {
+                        div("container").apply {
+                            val options: JSONEditorOptions = jsObject {
+                                mode = "view"
+                            }
+                            JSONEditor(
+                                this,
+                                options,
+                                styleMeta.toDynamic()
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/jsMain/resources/css/common.css b/dataforge-vis-common/src/jsMain/resources/css/common.css
new file mode 100644
index 00000000..c5efcd40
--- /dev/null
+++ b/dataforge-vis-common/src/jsMain/resources/css/common.css
@@ -0,0 +1,23 @@
+/* Remove default bullets */
+ul, .objTree-subtree {
+    list-style-type: none;
+}
+
+/* Style the caret/arrow */
+.objTree-caret {
+    cursor: pointer;
+    user-select: none; /* Prevent text selection */
+}
+
+/* Create the caret/arrow with a unicode, and style it */
+.objTree-caret::before {
+    content: "\25B6";
+    color: black;
+    display: inline-block;
+    margin-right: 6px;
+}
+
+/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+.objTree-caret-down::before {
+    transform: rotate(90deg);
+}
diff --git a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/FXPlugin.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/FXPlugin.kt
similarity index 97%
rename from dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/FXPlugin.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/FXPlugin.kt
index 12e9c4a3..ffe2ef64 100644
--- a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/FXPlugin.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/FXPlugin.kt
@@ -96,7 +96,7 @@ class FXPlugin(meta: Meta = EmptyMeta) : AbstractPlugin(meta) {
     companion object : PluginFactory<FXPlugin> {
         override val type: KClass<out FXPlugin> = FXPlugin::class
         override val tag: PluginTag = PluginTag("vis.fx", group = PluginTag.DATAFORGE_GROUP)
-        override fun invoke(meta: Meta): FXPlugin = FXPlugin(meta)
+        override fun invoke(meta: Meta, context: Context): FXPlugin = FXPlugin(meta)
     }
 
 }
diff --git a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ColorValueChooser.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ColorValueChooser.kt
similarity index 80%
rename from dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ColorValueChooser.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ColorValueChooser.kt
index e0e0f94a..0dac4f8d 100644
--- a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ColorValueChooser.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ColorValueChooser.kt
@@ -1,6 +1,8 @@
-package hep.dataforge.vis.fx.values
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.meta.Meta
+import hep.dataforge.names.Name
+import hep.dataforge.names.asName
 import hep.dataforge.values.Null
 import hep.dataforge.values.Value
 import hep.dataforge.values.asValue
@@ -39,9 +41,10 @@ class ColorValueChooser : ValueChooserBase<ColorPicker>() {
         return node
     }
 
-    companion object: ValueChooser.Factory{
-        override val name: String = "color"
+    companion object : ValueChooser.Factory {
+        override val name: Name = "color".asName()
 
-        override fun invoke(meta: Meta): ValueChooser = ColorValueChooser()
+        override fun invoke(meta: Meta): ValueChooser =
+            ColorValueChooser()
     }
 }
diff --git a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ComboBoxValueChooser.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ComboBoxValueChooser.kt
similarity index 86%
rename from dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ComboBoxValueChooser.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ComboBoxValueChooser.kt
index 0f6460e0..a3643099 100644
--- a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ComboBoxValueChooser.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ComboBoxValueChooser.kt
@@ -3,11 +3,13 @@
  * To change this template file, choose Tools | Templates
  * and open the template in the editor.
  */
-package hep.dataforge.vis.fx.values
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.meta.Meta
 import hep.dataforge.meta.get
 import hep.dataforge.meta.value
+import hep.dataforge.names.Name
+import hep.dataforge.names.asName
 import hep.dataforge.values.Value
 import hep.dataforge.values.parseValue
 import javafx.collections.FXCollections
@@ -50,9 +52,10 @@ class ComboBoxValueChooser(val values: Collection<Value>? = null) : ValueChooser
     }
 
     companion object : ValueChooser.Factory {
-        override val name: String = "combo"
+        override val name: Name = "combo".asName()
 
-        override fun invoke(meta: Meta): ValueChooser = ComboBoxValueChooser(meta["values"].value?.list)
+        override fun invoke(meta: Meta): ValueChooser =
+            ComboBoxValueChooser(meta["values"].value?.list)
     }
 
 }
diff --git a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/meta/ConfigEditor.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ConfigEditor.kt
similarity index 90%
rename from dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/meta/ConfigEditor.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ConfigEditor.kt
index da961fdb..93af2df4 100644
--- a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/meta/ConfigEditor.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ConfigEditor.kt
@@ -3,20 +3,22 @@
  * To change this template file, choose Tools | Templates
  * and open the template in the editor.
  */
-package hep.dataforge.vis.fx.meta
+package hep.dataforge.vis.fx.editor
 
+import de.jensd.fx.glyphs.fontawesome.FontAwesomeIcon
+import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView
 import hep.dataforge.context.Global
 import hep.dataforge.descriptors.NodeDescriptor
 import hep.dataforge.meta.Config
 import hep.dataforge.names.NameToken
 import hep.dataforge.vis.fx.dfIconView
-import hep.dataforge.vis.fx.values.ValueChooser
+import javafx.scene.Node
 import javafx.scene.control.*
 import javafx.scene.control.cell.TextFieldTreeTableCell
+import javafx.scene.layout.HBox
 import javafx.scene.layout.Priority
 import javafx.scene.paint.Color
 import javafx.scene.text.Text
-import org.controlsfx.glyphfont.Glyph
 import tornadofx.*
 
 /**
@@ -29,8 +31,9 @@ class ConfigEditor(
     val allowNew: Boolean = true,
     title: String = "Configuration editor"
 ) : Fragment(title = title, icon = dfIconView) {
+    //TODO replace parameters by properties
 
-    constructor(config: Config, descriptor: NodeDescriptor, title: String = "Configuration editor") :
+    constructor(config: Config, descriptor: NodeDescriptor?, title: String = "Configuration editor") :
             this(FXMeta.root(config, descriptor = descriptor), title = title)
 
     override val root = borderpane {
@@ -133,8 +136,9 @@ class ConfigEditor(
                         is FXMetaNode<Config> -> {
                             if (allowNew) {
                                 text = null
-                                graphic = hbox {
-                                    button("node", Glyph("FontAwesome", "PLUS_CIRCLE")) {
+                                graphic = HBox().apply {
+                                    val glyph: Node = FontAwesomeIconView(FontAwesomeIcon.PLUS_CIRCLE)
+                                    button("node", graphic = glyph) {
                                         hgrow = Priority.ALWAYS
                                         maxWidth = Double.POSITIVE_INFINITY
                                         action {
@@ -143,7 +147,7 @@ class ConfigEditor(
                                             }
                                         }
                                     }
-                                    button("value", Glyph("FontAwesome", "PLUS_SQUARE")) {
+                                    button("value", graphic = FontAwesomeIconView(FontAwesomeIcon.PLUS_SQUARE)) {
                                         hgrow = Priority.ALWAYS
                                         maxWidth = Double.POSITIVE_INFINITY
                                         action {
diff --git a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/meta/FXMeta.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/FXMeta.kt
similarity index 96%
rename from dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/meta/FXMeta.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/FXMeta.kt
index 82d48491..2eb14215 100644
--- a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/meta/FXMeta.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/FXMeta.kt
@@ -1,4 +1,4 @@
-package hep.dataforge.vis.fx.meta
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.descriptors.ItemDescriptor
 import hep.dataforge.descriptors.NodeDescriptor
@@ -84,7 +84,7 @@ class FXMetaNode<M : MetaNode<M>>(
     override val hasValue: ObservableBooleanValue = nodeProperty.booleanBinding { it != null }
 
     private val filter: (FXMeta<M>) -> Boolean = { cfg ->
-        !(cfg.descriptor?.tags?.contains(ConfigEditor.NO_CONFIGURATOR_TAG) ?: false)
+        !(cfg.descriptor?.attributes?.get(ConfigEditor.NO_CONFIGURATOR_TAG)?.boolean ?: false)
     }
 
     val children = object : ListBinding<FXMeta<M>>() {
@@ -172,7 +172,7 @@ fun <M : MutableMeta<M>> FXMetaNode<M>.remove(name: NameToken) {
 private fun <M : MutableMeta<M>> M.createEmptyNode(token: NameToken, append: Boolean): M {
     return if (append && token.index.isNotEmpty()) {
         val name = token.asName()
-        val index = (getAll(name).keys.mapNotNull { it.toIntOrNull() }.max() ?: -1) + 1
+        val index = (getIndexed(name).keys.mapNotNull { it.toIntOrNull() }.max() ?: -1) + 1
         val newName = name.withIndex(index.toString())
         set(newName, EmptyMeta)
         get(newName).node!!
diff --git a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/meta/MetaViewer.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/MetaViewer.kt
similarity index 98%
rename from dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/meta/MetaViewer.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/MetaViewer.kt
index 99026620..1120ebf4 100644
--- a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/meta/MetaViewer.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/MetaViewer.kt
@@ -14,7 +14,7 @@
  *  limitations under the License.
  */
 
-package hep.dataforge.vis.fx.meta
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.meta.Meta
 import hep.dataforge.vis.fx.dfIconView
diff --git a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/TextValueChooser.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/TextValueChooser.kt
similarity index 92%
rename from dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/TextValueChooser.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/TextValueChooser.kt
index b273b71f..92e59acf 100644
--- a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/TextValueChooser.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/TextValueChooser.kt
@@ -3,9 +3,11 @@
  * To change this template file, choose Tools | Templates
  * and open the template in the editor.
  */
-package hep.dataforge.vis.fx.values
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.meta.Meta
+import hep.dataforge.names.Name
+import hep.dataforge.names.asName
 import hep.dataforge.values.*
 import javafx.beans.value.ObservableValue
 import javafx.scene.control.TextField
@@ -100,7 +102,8 @@ class TextValueChooser : ValueChooserBase<TextField>() {
     }
 
     companion object : ValueChooser.Factory {
-        override val name: String = "text"
-        override fun invoke(meta: Meta): ValueChooser = TextValueChooser()
+        override val name: Name = "text".asName()
+        override fun invoke(meta: Meta): ValueChooser =
+            TextValueChooser()
     }
 }
diff --git a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ValueCallback.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueCallback.kt
similarity index 94%
rename from dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ValueCallback.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueCallback.kt
index c327ab22..bf7cdb7b 100644
--- a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ValueCallback.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueCallback.kt
@@ -3,7 +3,7 @@
  * To change this template file, choose Tools | Templates
  * and open the template in the editor.
  */
-package hep.dataforge.vis.fx.values
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.values.Value
 
diff --git a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ValueChooser.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueChooser.kt
similarity index 87%
rename from dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ValueChooser.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueChooser.kt
index 77ec9f28..f8946a4a 100644
--- a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ValueChooser.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueChooser.kt
@@ -3,13 +3,14 @@
  * To change this template file, choose Tools | Templates
  * and open the template in the editor.
  */
-package hep.dataforge.vis.fx.values
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.context.Context
 import hep.dataforge.context.Named
 import hep.dataforge.descriptors.ValueDescriptor
 import hep.dataforge.meta.EmptyMeta
 import hep.dataforge.meta.Meta
+import hep.dataforge.names.toName
 import hep.dataforge.provider.Type
 import hep.dataforge.provider.provideByType
 import hep.dataforge.values.Null
@@ -71,7 +72,7 @@ interface ValueChooser {
     companion object {
 
         private fun findWidgetByType(context: Context, type: String): Factory? {
-            return when (type) {
+            return when (type.toName()) {
                 TextValueChooser.name -> TextValueChooser
                 ColorValueChooser.name -> ColorValueChooser
                 ComboBoxValueChooser.name -> ComboBoxValueChooser
@@ -86,7 +87,10 @@ interface ValueChooser {
                 val widgetType = descriptor.widgetType
                 val chooser: ValueChooser = when {
                     widgetType != null -> {
-                        findWidgetByType(context, widgetType)?.invoke(
+                        findWidgetByType(
+                            context,
+                            widgetType
+                        )?.invoke(
                             descriptor.widget
                         ) ?: TextValueChooser()
                     }
@@ -104,7 +108,8 @@ interface ValueChooser {
             descriptor: ValueDescriptor? = null,
             setter: (Value) -> Unit
         ): ValueChooser {
-            val chooser = build(context, descriptor)
+            val chooser =
+                build(context, descriptor)
             chooser.setDisplayValue(value.value ?: Null)
             value.onChange {
                 chooser.setDisplayValue(it ?: Null)
@@ -114,7 +119,11 @@ interface ValueChooser {
                     setter(result)
                     ValueCallbackResponse(true, result, "OK")
                 } else {
-                    ValueCallbackResponse(false, value.value ?: Null, "Not allowed")
+                    ValueCallbackResponse(
+                        false,
+                        value.value ?: Null,
+                        "Not allowed"
+                    )
                 }
             }
             return chooser
diff --git a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ValueChooserBase.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueChooserBase.kt
similarity index 98%
rename from dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ValueChooserBase.kt
rename to dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueChooserBase.kt
index a9e2fc01..7cbbcc1f 100644
--- a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/values/ValueChooserBase.kt
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/ValueChooserBase.kt
@@ -3,7 +3,7 @@
  * To change this template file, choose Tools | Templates
  * and open the template in the editor.
  */
-package hep.dataforge.vis.fx.values
+package hep.dataforge.vis.fx.editor
 
 import hep.dataforge.descriptors.ValueDescriptor
 import hep.dataforge.values.Null
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectEditorFragment.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectEditorFragment.kt
new file mode 100644
index 00000000..fd52d64c
--- /dev/null
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectEditorFragment.kt
@@ -0,0 +1,74 @@
+package hep.dataforge.vis.fx.editor
+
+import hep.dataforge.descriptors.NodeDescriptor
+import hep.dataforge.meta.Config
+import hep.dataforge.meta.Meta
+import hep.dataforge.meta.update
+import hep.dataforge.vis.common.VisualObject
+import hep.dataforge.vis.common.findStyle
+import javafx.beans.binding.Binding
+import javafx.beans.property.SimpleObjectProperty
+import javafx.scene.Node
+import javafx.scene.Parent
+import javafx.scene.layout.VBox
+import tornadofx.*
+
+class VisualObjectEditorFragment(val selector: (VisualObject) -> Meta) : Fragment() {
+
+    val itemProperty = SimpleObjectProperty<VisualObject>()
+    var item: VisualObject? by itemProperty
+    val descriptorProperty = SimpleObjectProperty<NodeDescriptor>()
+
+    constructor(
+        item: VisualObject?,
+        descriptor: NodeDescriptor?,
+        selector: (VisualObject) -> Config = { it.config }
+    ) : this(selector) {
+        this.item = item
+        this.descriptorProperty.set(descriptor)
+    }
+
+    private var currentConfig: Config? = null
+
+    private val configProperty: Binding<Config?> = itemProperty.objectBinding { visualObject ->
+        if (visualObject == null) return@objectBinding null
+        val meta = selector(visualObject)
+        val config = Config().apply {
+            update(meta)
+            onChange(this@VisualObjectEditorFragment) { key, _, after ->
+                visualObject.setProperty(key, after)
+            }
+        }
+        //remember old config reference to cleanup listeners
+        currentConfig?.removeListener(this)
+        currentConfig = config
+        config
+    }
+
+    private val configEditorProperty: Binding<Node?> = configProperty.objectBinding(descriptorProperty) {
+        it?.let {
+            ConfigEditor(it, descriptorProperty.get()).root
+        }
+    }
+
+    private val styleBoxProperty: Binding<Node?> = configProperty.objectBinding() {
+        VBox().apply {
+            item?.styles?.forEach { styleName ->
+                val styleMeta = item?.findStyle(styleName)
+                if (styleMeta != null) {
+                    titledpane(styleName, node = MetaViewer(styleMeta).root)
+                }
+            }
+        }
+    }
+
+    override val root: Parent = vbox {
+        titledpane("Properties", collapsible = false) {
+            contentProperty().bind(configEditorProperty)
+        }
+        titledpane("Styles", collapsible = false) {
+            visibleWhen(itemProperty.booleanBinding { it?.styles?.isNotEmpty() ?: false })
+            contentProperty().bind(styleBoxProperty)
+        }
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectTreeFragment.kt b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectTreeFragment.kt
new file mode 100644
index 00000000..4f27ef87
--- /dev/null
+++ b/dataforge-vis-common/src/jvmMain/kotlin/hep/dataforge/vis/fx/editor/VisualObjectTreeFragment.kt
@@ -0,0 +1,55 @@
+package hep.dataforge.vis.fx.editor
+
+import hep.dataforge.vis.common.VisualGroup
+import hep.dataforge.vis.common.VisualObject
+import javafx.beans.property.SimpleObjectProperty
+import javafx.scene.control.SelectionMode
+import javafx.scene.control.TreeItem
+import tornadofx.*
+
+private fun toTreeItem(visualObject: VisualObject, title: String): TreeItem<Pair<String, VisualObject>> {
+    return object : TreeItem<Pair<String, VisualObject>>(title to visualObject) {
+        init {
+            if (visualObject is VisualGroup) {
+                //lazy populate the tree
+                expandedProperty().onChange { expanded ->
+                    if (expanded && children.isEmpty()) {
+                        children.setAll(visualObject.children.map {
+                            toTreeItem(it.value, it.key.toString())
+                        })
+                    }
+                }
+            }
+        }
+
+        override fun isLeaf(): Boolean {
+            return !(visualObject is VisualGroup && visualObject.children.isNotEmpty())
+        }
+    }
+}
+
+
+class VisualObjectTreeFragment : Fragment() {
+    val itemProperty = SimpleObjectProperty<VisualObject>()
+    var item: VisualObject? by itemProperty
+
+    val selectedProperty = SimpleObjectProperty<VisualObject>()
+
+    override val root = vbox {
+        titledpane("Object tree", collapsible = false) {
+            treeview<Pair<String, VisualObject>> {
+                cellFormat {
+                    text = item.first
+                }
+                itemProperty.onChange { rootObject ->
+                    if (rootObject != null) {
+                        root = toTreeItem(rootObject, "world")
+                    }
+                }
+                selectionModel.selectionMode = SelectionMode.SINGLE
+                val selectedValue = selectionModel.selectedItemProperty().objectBinding { it?.value?.second }
+                selectedProperty.bind(selectedValue)
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-fx/src/main/resources/img/df.png b/dataforge-vis-common/src/jvmMain/resources/img/df.png
similarity index 100%
rename from dataforge-vis-fx/src/main/resources/img/df.png
rename to dataforge-vis-common/src/jvmMain/resources/img/df.png
diff --git a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/demo/MetaEditorDemo.kt b/dataforge-vis-common/src/jvmTest/kotlin/hep/dataforge/vis/fx/demo/MetaEditorDemo.kt
similarity index 78%
rename from dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/demo/MetaEditorDemo.kt
rename to dataforge-vis-common/src/jvmTest/kotlin/hep/dataforge/vis/fx/demo/MetaEditorDemo.kt
index 6ced3e79..09ec35fc 100644
--- a/dataforge-vis-fx/src/main/kotlin/hep/dataforge/vis/fx/demo/MetaEditorDemo.kt
+++ b/dataforge-vis-common/src/jvmTest/kotlin/hep/dataforge/vis/fx/demo/MetaEditorDemo.kt
@@ -4,9 +4,9 @@ import hep.dataforge.descriptors.NodeDescriptor
 import hep.dataforge.meta.buildMeta
 import hep.dataforge.meta.toConfig
 import hep.dataforge.values.ValueType
-import hep.dataforge.vis.fx.meta.ConfigEditor
-import hep.dataforge.vis.fx.meta.FXMeta
-import hep.dataforge.vis.fx.meta.MetaViewer
+import hep.dataforge.vis.fx.editor.ConfigEditor
+import hep.dataforge.vis.fx.editor.FXMeta
+import hep.dataforge.vis.fx.editor.MetaViewer
 import javafx.geometry.Orientation
 import tornadofx.*
 
@@ -16,16 +16,16 @@ class MetaEditorDemoApp : App(MetaEditorDemo::class)
 class MetaEditorDemo : View("Meta editor demo") {
 
     val meta = buildMeta {
-        "aNode" to {
-            "innerNode" to {
-                "innerValue" to true
+        "aNode" put {
+            "innerNode" put {
+                "innerValue" put true
             }
-            "b" to 223
-            "c" to "StringValue"
+            "b" put 223
+            "c" put "StringValue"
         }
     }.toConfig()
 
-    val descriptor = NodeDescriptor.build {
+    val descriptor = NodeDescriptor {
         node("aNode") {
             info = "A root demo node"
             value("b") {
diff --git a/dataforge-vis-fx/build.gradle.kts b/dataforge-vis-fx/build.gradle.kts
deleted file mode 100644
index ffb923c1..00000000
--- a/dataforge-vis-fx/build.gradle.kts
+++ /dev/null
@@ -1,23 +0,0 @@
-import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
-import org.openjfx.gradle.JavaFXOptions
-
-plugins {
-    kotlin("jvm") 
-    id("org.openjfx.javafxplugin")
-}
-
-dependencies {
-    api(project(":dataforge-vis-common"))
-    api("no.tornado:tornadofx:1.7.19")
-    api("no.tornado:tornadofx-controlsfx:0.1")
-}
-
-configure<JavaFXOptions> {
-    modules("javafx.controls")
-}
-
-tasks.withType<KotlinCompile> {
-    kotlinOptions{
-        jvmTarget = "1.8"
-    }
-}
\ No newline at end of file
diff --git a/dataforge-vis-jsroot/src/main/kotlin/hep/dataforge/vis/jsroot/JSRootDemoApp.kt b/dataforge-vis-jsroot/src/main/kotlin/hep/dataforge/vis/jsroot/JSRootDemoApp.kt
index aa6eb542..9775dbb7 100644
--- a/dataforge-vis-jsroot/src/main/kotlin/hep/dataforge/vis/jsroot/JSRootDemoApp.kt
+++ b/dataforge-vis-jsroot/src/main/kotlin/hep/dataforge/vis/jsroot/JSRootDemoApp.kt
@@ -74,5 +74,5 @@ class JSRootDemoApp : ApplicationBase() {
         }
     }
 
-    override fun dispose() = emptyMap<String, Any>()//mapOf("lines" to presenter.dispose())
+    override fun dispose() = emptyMap<String, Any>()//mapOf("lines" put presenter.dispose())
 }
\ No newline at end of file
diff --git a/dataforge-vis-jsroot/src/main/kotlin/hep/dataforge/vis/jsroot/JSRootGeometry.kt b/dataforge-vis-jsroot/src/main/kotlin/hep/dataforge/vis/jsroot/JSRootGeometry.kt
index c23546a1..f4ee6c42 100644
--- a/dataforge-vis-jsroot/src/main/kotlin/hep/dataforge/vis/jsroot/JSRootGeometry.kt
+++ b/dataforge-vis-jsroot/src/main/kotlin/hep/dataforge/vis/jsroot/JSRootGeometry.kt
@@ -15,37 +15,37 @@ class JSRootGeometry(parent: VisualObject?, meta: Meta) : DisplayLeaf(parent, me
     var facesLimit by int(0)
 
     fun box(xSize: Number, ySize: Number, zSize: Number) = buildMeta {
-        "_typename" to "TGeoBBox"
-        "fDX" to xSize
-        "fDY" to ySize
-        "fDZ" to zSize
+        "_typename" put "TGeoBBox"
+        "fDX" put xSize
+        "fDY" put ySize
+        "fDZ" put zSize
     }
 
     /**
      * Create a GDML union
      */
     operator fun Meta.plus(other: Meta) = buildMeta {
-        "fNode.fLeft" to this
-        "fNode.fRight" to other
-        "fNode._typename" to "TGeoUnion"
+        "fNode.fLeft" put this
+        "fNode.fRight" put other
+        "fNode._typename" put "TGeoUnion"
     }
 
     /**
      * Create a GDML subtraction
      */
     operator fun Meta.minus(other: Meta)  = buildMeta {
-        "fNode.fLeft" to this
-        "fNode.fRight" to other
-        "fNode._typename" to "TGeoSubtraction"
+        "fNode.fLeft" put this
+        "fNode.fRight" put other
+        "fNode._typename" put "TGeoSubtraction"
     }
 
     /**
      * Intersect two GDML geometries
      */
     infix fun Meta.intersect(other: Meta) = buildMeta {
-        "fNode.fLeft" to this
-        "fNode.fRight" to other
-        "fNode._typename" to "TGeoIntersection"
+        "fNode.fLeft" put this
+        "fNode.fRight" put other
+        "fNode._typename" put "TGeoIntersection"
     }
 
     companion object {
diff --git a/dataforge-vis-spatial-gdml/build.gradle.kts b/dataforge-vis-spatial-gdml/build.gradle.kts
index e2c711c6..2d8a4200 100644
--- a/dataforge-vis-spatial-gdml/build.gradle.kts
+++ b/dataforge-vis-spatial-gdml/build.gradle.kts
@@ -7,13 +7,14 @@ kotlin {
         val commonMain by getting {
             dependencies {
                 api(project(":dataforge-vis-spatial"))
-                api("scientifik:gdml:0.1.4-dev-1")
-            }
-        }
-        val jsMain by getting {
-            dependencies {
-                api(project(":dataforge-vis-spatial"))
+                api("scientifik:gdml:0.1.4")
             }
         }
     }
-}
\ No newline at end of file
+}
+
+//tasks{
+//    val jsBrowserWebpack by getting(KotlinWebpack::class) {
+//        sourceMaps = false
+//    }
+//}
\ No newline at end of file
diff --git a/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/GDMLTransformer.kt b/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/GDMLTransformer.kt
index 12fc2aee..9d664aff 100644
--- a/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/GDMLTransformer.kt
+++ b/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/GDMLTransformer.kt
@@ -1,20 +1,21 @@
 package hep.dataforge.vis.spatial.gdml
 
 import hep.dataforge.meta.Meta
+import hep.dataforge.meta.MetaBuilder
 import hep.dataforge.meta.buildMeta
-import hep.dataforge.meta.builder
-import hep.dataforge.vis.spatial.VisualGroup3D
-import scientifik.gdml.GDML
-import scientifik.gdml.GDMLGroup
-import scientifik.gdml.GDMLMaterial
-import scientifik.gdml.GDMLSolid
+import hep.dataforge.names.Name
+import hep.dataforge.names.toName
+import hep.dataforge.vis.common.useStyle
+import hep.dataforge.vis.spatial.*
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_COLOR_KEY
+import scientifik.gdml.*
 import kotlin.random.Random
 
 class GDMLTransformer(val root: GDML) {
-    private val materialCache = HashMap<GDMLMaterial, Meta>()
-    private val random = Random(111)
+    //private val materialCache = HashMap<GDMLMaterial, Meta>()
+    private val random = Random(222)
 
-    enum class Action{
+    enum class Action {
         ACCEPT,
         REJECT,
         CACHE
@@ -23,45 +24,60 @@ class GDMLTransformer(val root: GDML) {
     /**
      * A special group for local templates
      */
-    val templates by lazy { VisualGroup3D() }
+    val proto by lazy { VisualGroup3D() }
+    private val styleCache = HashMap<Name, Meta>()
 
     var lUnit: LUnit = LUnit.MM
-    var resolveColor: ColorResolver = { material, _ ->
-        val materialColor = materialCache.getOrPut(material) {
-            buildMeta {
-                "color" to random.nextInt(0, Int.MAX_VALUE)
-            }
-        }
-
-        if (this?.physVolumes?.isEmpty() != false) {
-            materialColor
-        } else {
-            materialColor.builder().apply { "opacity" to 0.5 }
-        }
-    }
 
     var solidAction: (GDMLSolid) -> Action = { Action.CACHE }
-    var volumeAction: (GDMLGroup) -> Action = { Action.ACCEPT }
+    var volumeAction: (GDMLGroup) -> Action = { Action.CACHE }
 
-    fun printStatistics() {
-        println("Solids:")
-        solidCounter.entries.sortedByDescending { it.value }.forEach {
-            println("\t$it")
+
+    var solidConfiguration: VisualObject3D.(parent: GDMLVolume, solid: GDMLSolid) -> Unit = { parent, _ ->
+        lUnit = LUnit.CM
+        if (parent.physVolumes.isNotEmpty()) {
+            useStyle("opaque") {
+                Material3D.MATERIAL_OPACITY_KEY put 0.3
+            }
         }
-        println("Solids total: ${solidCounter.values.sum()}")
     }
 
-    private val solidCounter = HashMap<String, Int>()
-
-    internal fun solidAdded(solid: GDMLSolid) {
-        solidCounter[solid.name] = (solidCounter[solid.name] ?: 0) + 1
+    fun VisualObject3D.useStyle(name: String, builder: MetaBuilder.() -> Unit) {
+        styleCache.getOrPut(name.toName()) {
+            buildMeta(builder)
+        }
+        useStyle(name)
     }
 
+    internal fun configureSolid(obj: VisualObject3D, parent: GDMLVolume, solid: GDMLSolid) {
+        val material = parent.materialref.resolve(root) ?: GDMLElement(parent.materialref.ref)
+
+        val styleName = "material[${material.name}]"
+
+        obj.useStyle(styleName) {
+            MATERIAL_COLOR_KEY put random.nextInt(16777216)
+            "gdml.material" put material.name
+        }
+
+        obj.solidConfiguration(parent, solid)
+    }
+//
+//    internal fun solidAdded(solid: GDMLSolid) {
+//        solidCounter[solid.name] = (solidCounter[solid.name] ?: 0) + 1
+//    }
+
     var onFinish: GDMLTransformer.() -> Unit = {}
 
-    internal fun finished(final: VisualGroup3D) {
-        final.templates = templates
+    internal fun finalize(final: VisualGroup3D): VisualGroup3D {
+        final.prototypes = proto
+        styleCache.forEach {
+            final.styleSheet {
+                define(it.key.toString(), it.value)
+            }
+        }
+        final.rotationOrder = RotationOrder.ZXY
         onFinish(this@GDMLTransformer)
+        return final
     }
 
 }
\ No newline at end of file
diff --git a/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDML.kt b/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDML.kt
index db513ba7..8fc395e1 100644
--- a/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDML.kt
+++ b/dataforge-vis-spatial-gdml/src/commonMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDML.kt
@@ -1,9 +1,13 @@
 package hep.dataforge.vis.spatial.gdml
 
-import hep.dataforge.meta.Meta
+
+import hep.dataforge.names.Name
+import hep.dataforge.names.asName
 import hep.dataforge.names.plus
-import hep.dataforge.vis.common.asName
+import hep.dataforge.vis.common.get
 import hep.dataforge.vis.spatial.*
+import hep.dataforge.vis.spatial.World.ONE
+import hep.dataforge.vis.spatial.World.ZERO
 import scientifik.gdml.*
 import kotlin.math.cos
 import kotlin.math.sin
@@ -11,41 +15,45 @@ import kotlin.math.sin
 
 private fun VisualObject3D.withPosition(
     lUnit: LUnit,
-    pos: GDMLPosition? = null,
-    rotation: GDMLRotation? = null,
-    scale: GDMLScale? = null
+    newPos: GDMLPosition? = null,
+    newRotation: GDMLRotation? = null,
+    newScale: GDMLScale? = null
 ): VisualObject3D = apply {
-    pos?.let {
-        this@withPosition.x = pos.x(lUnit)
-        this@withPosition.y = pos.y(lUnit)
-        this@withPosition.z = pos.z(lUnit)
+    newPos?.let {
+        val point = Point3D(it.x(lUnit), it.y(lUnit), it.z(lUnit))
+        if (position != null || point != ZERO) {
+            position = point
+        }
     }
-    rotation?.let {
-        this@withPosition.rotationX = rotation.x()
-        this@withPosition.rotationY = rotation.y()
-        this@withPosition.rotationZ = rotation.z()
-        this@withPosition.rotationOrder=RotationOrder.ZXY
+    newRotation?.let {
+        val point = Point3D(it.x(), it.y(), it.z())
+        if (rotation != null || point != ZERO) {
+            rotation = point
+        }
+        //this@withPosition.rotationOrder = RotationOrder.ZXY
     }
-    scale?.let {
-        this@withPosition.scaleX = scale.x.toFloat()
-        this@withPosition.scaleY = scale.y.toFloat()
-        this@withPosition.scaleZ = scale.z.toFloat()
+    newScale?.let {
+        val point = Point3D(it.x, it.y, it.z)
+        if (scale != null || point != ONE) {
+            scale = point
+        }
     }
     //TODO convert units if needed
 }
 
 @Suppress("NOTHING_TO_INLINE")
 private inline operator fun Number.times(d: Double) = toDouble() * d
+
 @Suppress("NOTHING_TO_INLINE")
 private inline operator fun Number.times(f: Float) = toFloat() * f
 
 private fun VisualGroup3D.addSolid(
     context: GDMLTransformer,
     solid: GDMLSolid,
-    name: String? = null,
+    name: String = "",
     block: VisualObject3D.() -> Unit = {}
 ): VisualObject3D {
-    context.solidAdded(solid)
+    //context.solidAdded(solid)
     val lScale = solid.lscale(context.lUnit)
     val aScale = solid.ascale()
     return when (solid) {
@@ -78,7 +86,7 @@ private fun VisualGroup3D.addSolid(
             val innerSolid = solid.solidref.resolve(context.root)
                 ?: error("Solid with tag ${solid.solidref.ref} for scaled solid ${solid.name} not defined")
 
-            addSolid(context, innerSolid) {
+            addSolid(context, innerSolid, name) {
                 block()
                 scaleX *= solid.scale.x.toFloat()
                 scaleY *= solid.scale.y.toFloat()
@@ -147,7 +155,8 @@ private fun VisualGroup3D.addPhysicalVolume(
 
     when (context.volumeAction(volume)) {
         GDMLTransformer.Action.ACCEPT -> {
-            this[physVolume.name] = volume(context, volume).apply {
+            val group = volume(context, volume)
+            this[physVolume.name ?: ""] = group.apply {
                 withPosition(
                     context.lUnit,
                     physVolume.resolvePosition(context.root),
@@ -157,12 +166,12 @@ private fun VisualGroup3D.addPhysicalVolume(
             }
         }
         GDMLTransformer.Action.CACHE -> {
-            val name = volumesName + volume.name.asName()
-            if (context.templates[name] == null) {
-                context.templates[name] = volume(context, volume)
+            val fullName = volumesName + volume.name.asName()
+            if (context.proto[fullName] == null) {
+                context.proto[fullName] = volume(context, volume)
             }
 
-            this[physVolume.name] = Proxy(name).apply {
+            this[physVolume.name ?: ""] = Proxy(fullName).apply {
                 withPosition(
                     context.lUnit,
                     physVolume.resolvePosition(context.root),
@@ -185,7 +194,8 @@ private fun VisualGroup3D.addDivisionVolume(
         ?: error("Volume with ref ${divisionVolume.volumeref.ref} could not be resolved")
 
     //TODO add divisions
-    add(
+    set(
+        Name.EMPTY,
         volume(
             context,
             volume
@@ -193,12 +203,7 @@ private fun VisualGroup3D.addDivisionVolume(
     )
 }
 
-private fun VisualGroup3D.addVolume(
-    context: GDMLTransformer,
-    group: GDMLGroup
-) {
-    this[group.name] = volume(context, group)
-}
+private val solidsName = "solids".asName()
 
 private fun volume(
     context: GDMLTransformer,
@@ -208,18 +213,17 @@ private fun volume(
         if (group is GDMLVolume) {
             val solid = group.solidref.resolve(context.root)
                 ?: error("Solid with tag ${group.solidref.ref} for volume ${group.name} not defined")
-            val material = group.materialref.resolve(context.root) ?: GDMLElement(group.materialref.ref)
 
             when (context.solidAction(solid)) {
                 GDMLTransformer.Action.ACCEPT -> {
                     addSolid(context, solid, solid.name) {
-                        this.material = context.resolveColor(group, material, solid)
+                        context.configureSolid(this, group, solid)
                     }
                 }
                 GDMLTransformer.Action.CACHE -> {
-                    if (context.templates[solid.name] == null) {
-                        context.templates.addSolid(context, solid, solid.name) {
-                            this.material = context.resolveColor(group, material, solid)
+                    if (context.proto[solid.name] == null) {
+                        context.proto.addSolid(context, solid, solid.name) {
+                            context.configureSolid(this, group, solid)
                         }
                     }
                     ref(solid.name.asName(), solid.name)
@@ -241,14 +245,18 @@ private fun volume(
     }
 }
 
-typealias ColorResolver = GDMLGroup?.(GDMLMaterial, GDMLSolid?) -> Meta
-
-
 fun GDML.toVisual(block: GDMLTransformer.() -> Unit = {}): VisualGroup3D {
 
     val context = GDMLTransformer(this).apply(block)
 
-    return volume(context, world).also {
-        context.finished(it)
-    }
+    return context.finalize(volume(context, world))
+}
+
+/**
+ * Append gdml node to the group
+ */
+fun VisualGroup3D.gdml(gdml: GDML, key: String = "", transformer: GDMLTransformer.() -> Unit = {}) {
+    val visual = gdml.toVisual(transformer)
+    //println(Visual3DPlugin.json.stringify(VisualGroup3D.serializer(), visual))
+    set(key, visual)
 }
\ No newline at end of file
diff --git a/dataforge-vis-spatial-gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt b/dataforge-vis-spatial-gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
deleted file mode 100644
index 7de8ea84..00000000
--- a/dataforge-vis-spatial-gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
+++ /dev/null
@@ -1,128 +0,0 @@
-package hep.dataforge.vis.spatial.gdml.demo
-
-import hep.dataforge.context.Global
-import hep.dataforge.vis.hmr.ApplicationBase
-import hep.dataforge.vis.hmr.startApplication
-import hep.dataforge.vis.spatial.gdml.GDMLTransformer
-import hep.dataforge.vis.spatial.gdml.LUnit
-import hep.dataforge.vis.spatial.gdml.toVisual
-import hep.dataforge.vis.spatial.three.ThreePlugin
-import hep.dataforge.vis.spatial.three.output
-import kotlinx.coroutines.CoroutineScope
-import kotlinx.coroutines.GlobalScope
-import kotlinx.coroutines.launch
-import org.w3c.dom.HTMLDivElement
-import org.w3c.dom.events.Event
-import org.w3c.files.FileList
-import org.w3c.files.FileReader
-import org.w3c.files.get
-import scientifik.gdml.GDML
-import kotlin.browser.document
-import kotlin.dom.clear
-
-private class GDMLDemoApp : ApplicationBase() {
-
-
-    /**
-     * Handle mouse drag according to https://www.html5rocks.com/en/tutorials/file/dndfiles/
-     */
-    private fun handleDragOver(event: Event) {
-        event.stopPropagation()
-        event.preventDefault()
-        event.asDynamic().dataTransfer.dropEffect = "copy"
-    }
-
-    /**
-     * Load data from text file
-     */
-    private fun loadData(event: Event, block: suspend CoroutineScope.(String) -> Unit) {
-        event.stopPropagation()
-        event.preventDefault()
-
-
-        val file = (event.asDynamic().dataTransfer.files as FileList)[0]
-            ?: throw RuntimeException("Failed to load file")
-
-        FileReader().apply {
-            onload = {
-                val string = result as String
-                GlobalScope.launch {
-                    block(string)
-                }
-            }
-            readAsText(file)
-        }
-    }
-
-    private fun spinner(show: Boolean) {
-        val style = if (show) {
-            "display:block;"
-        } else {
-            "display:none;"
-        }
-        document.getElementById("loader")?.setAttribute("style", style)
-    }
-
-    private fun message(message: String?) {
-        val element = document.getElementById("message")
-        if (message == null) {
-            element?.setAttribute("style", "display:none;")
-        } else {
-            element?.textContent = message
-            element?.setAttribute("style", "display:block;")
-        }
-    }
-
-
-    override fun start(state: Map<String, Any>) {
-
-        val context = Global.context("demo") {}
-        val three = context.plugins.load(ThreePlugin)
-        //val url = URL("https://drive.google.com/open?id=1w5e7fILMN83JGgB8WANJUYm8OW2s0WVO")
-
-        val canvas = document.getElementById("canvas") ?: error("Element with id canvas not found on page")
-        canvas.clear()
-
-        val action: suspend CoroutineScope.(String) -> Unit = { it ->
-            canvas.clear()
-            launch { spinner(true) }
-            launch { message("Loading GDML") }
-            val gdml = GDML.format.parse(GDML.serializer(), it)
-            launch { message("Converting GDML into DF-VIS format") }
-            val visual = gdml.toVisual {
-                lUnit = LUnit.CM
-                volumeAction = { volume ->
-                    when {
-                        volume.name.startsWith("ecal") -> GDMLTransformer.Action.REJECT
-                        volume.name.startsWith("U") -> GDMLTransformer.Action.CACHE
-                        volume.name.startsWith("V") -> GDMLTransformer.Action.CACHE
-                        else -> GDMLTransformer.Action.ACCEPT
-                    }
-                }
-
-            }
-            launch { message("Rendering") }
-            val output = three.output(canvas){
-                "axis" to {
-                    "size" to 100
-                }
-            }
-            output.render(visual)
-            launch {
-                message(null)
-                spinner(false)
-            }
-        }
-
-        (document.getElementById("drop_zone") as? HTMLDivElement)?.apply {
-            addEventListener("dragover", { handleDragOver(it) }, false)
-            addEventListener("drop", { loadData(it, action) }, false)
-        }
-
-    }
-
-}
-
-fun main() {
-    startApplication(::GDMLDemoApp)
-}
\ No newline at end of file
diff --git a/dataforge-vis-spatial-gdml/src/jsMain/web/index.html b/dataforge-vis-spatial-gdml/src/jsMain/web/index.html
deleted file mode 100644
index 83164142..00000000
--- a/dataforge-vis-spatial-gdml/src/jsMain/web/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Three js demo for particle physics</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-    <link rel="stylesheet" href="main.css">
-    <script type="text/javascript" src="main.bundle.js"></script>
-</head>
-<body class="testApp">
-<div class="container" id="drop_zone" data-toggle="tooltip" data-placement="right"
-     title="Для загрузки данных в текстовом формате, надо перетащить файл сюда">
-    Загрузить данные
-    <br/>
-    (перетащить файл сюда)
-</div>
-<div class="container">
-    <h1>GDML demo</h1>
-</div>
-<div class="container loader" id="loader" style="display:none;"></div>
-<div class="container animate-bottom" id="message" style="display:none;"></div>
-<div class="container" id="canvas"></div>
-
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-        crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
-        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
-        crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
-        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
-        crossorigin="anonymous"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/dataforge-vis-spatial-gdml/src/jsMain/web/main.css b/dataforge-vis-spatial-gdml/src/jsMain/web/main.css
deleted file mode 100644
index a21a4397..00000000
--- a/dataforge-vis-spatial-gdml/src/jsMain/web/main.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.loader {
-    border: 16px solid #f3f3f3; /* Light grey */
-    border-top: 16px solid #3498db; /* Blue */
-    border-radius: 50%;
-    width: 120px;
-    height: 120px;
-    animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
\ No newline at end of file
diff --git a/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/generateSchema.kt b/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/generateSchema.kt
new file mode 100644
index 00000000..628a8651
--- /dev/null
+++ b/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/generateSchema.kt
@@ -0,0 +1,169 @@
+package hep.dataforge.vis.spatial.gdml
+
+import hep.dataforge.meta.Meta
+import hep.dataforge.vis.spatial.*
+import kotlinx.serialization.*
+import kotlinx.serialization.json.*
+import kotlinx.serialization.modules.SerialModule
+import kotlinx.serialization.modules.SerialModuleCollector
+import kotlin.reflect.KClass
+
+internal val SerialDescriptor.jsonType
+    get() = when (this.kind) {
+        StructureKind.LIST -> "array"
+        PrimitiveKind.BYTE, PrimitiveKind.SHORT, PrimitiveKind.INT, PrimitiveKind.LONG,
+        PrimitiveKind.FLOAT, PrimitiveKind.DOUBLE -> "number"
+        PrimitiveKind.STRING, PrimitiveKind.CHAR, UnionKind.ENUM_KIND -> "string"
+        PrimitiveKind.BOOLEAN -> "boolean"
+        else -> "object"
+    }
+
+
+private fun SerialModule.enumerate(type: KClass<*>): Sequence<SerialDescriptor> {
+    val list = ArrayList<SerialDescriptor>()
+    fun send(descriptor: SerialDescriptor) = list.add(descriptor)
+
+    val enumerator = object : SerialModuleCollector {
+        override fun <T : Any> contextual(kClass: KClass<T>, serializer: KSerializer<T>) {
+            if (kClass == type) {
+                send(serializer.descriptor)
+            }
+        }
+
+        override fun <Base : Any, Sub : Base> polymorphic(
+            baseClass: KClass<Base>,
+            actualClass: KClass<Sub>,
+            actualSerializer: KSerializer<Sub>
+        ) {
+            if (baseClass == type) {
+                send(actualSerializer.descriptor)
+            }
+        }
+
+    }
+    dumpTo(enumerator)
+    return list.asSequence()
+}
+
+/**
+ * Creates an [JsonObject] which contains Json Schema of given [descriptor].
+ *
+ * Schema can contain following fields:
+ * `description`, `type` for all descriptors;
+ * `properties` and `required` for objects;
+ * `enum` for enums;
+ * `items` for arrays.
+ *
+ * User can modify this schema to add additional validation keywords
+ * (as per [https://json-schema.org/latest/json-schema-validation.html])
+ * if they want.
+ */
+private fun jsonSchema(descriptor: SerialDescriptor, context: SerialModule): JsonObject {
+
+    if (descriptor.name in arrayOf(
+            "hep.dataforge.vis.spatial.Point3D",
+            "hep.dataforge.vis.spatial.Point2D",
+            Meta::class.qualifiedName
+        )
+    ) return json {
+        "\$ref" to "#/definitions/${descriptor.name}"
+    }
+
+
+    val properties: MutableMap<String, JsonObject> = mutableMapOf()
+    val requiredProperties: MutableSet<String> = mutableSetOf()
+    val isEnum = descriptor.kind == UnionKind.ENUM_KIND
+    val isPolymorphic = descriptor.kind is PolymorphicKind
+
+
+    if (!isEnum && !isPolymorphic) descriptor.elementDescriptors().forEachIndexed { index, child ->
+        val elementName = descriptor.getElementName(index)
+
+        properties[elementName] = when (elementName) {
+            "templates" ->  json {
+                "\$ref" to "#/definitions/hep.dataforge.vis.spatial.VisualGroup3D"
+            }
+            "properties" ->  json {
+                "\$ref" to "#/definitions/${Meta::class.qualifiedName}"
+            }
+            "first", "second" -> json{
+                "\$ref" to "#/definitions/children"
+            }
+            "styleSheet" -> json {
+                "type" to "object"
+                "additionalProperties" to json {
+                    "\$ref" to "#/definitions/${Meta::class.qualifiedName}"
+                }
+            }
+            in arrayOf("children") ->  json {
+                "type" to "object"
+                "additionalProperties" to json {
+                    "\$ref" to "#/definitions/children"
+                }
+            }
+            else -> jsonSchema(child, context)
+        }
+
+        if (!descriptor.isElementOptional(index)) requiredProperties.add(elementName)
+    }
+
+    val jsonType = descriptor.jsonType
+    val objectData: MutableMap<String, JsonElement> = mutableMapOf(
+        "description" to JsonLiteral(descriptor.name),
+        "type" to JsonLiteral(jsonType)
+    )
+    if (isEnum) {
+        val allElementNames = (0 until descriptor.elementsCount).map(descriptor::getElementName)
+        objectData += "enum" to JsonArray(allElementNames.map(::JsonLiteral))
+    }
+    when (jsonType) {
+        "object" -> {
+            objectData["properties"] = JsonObject(properties)
+            val required = requiredProperties.map { JsonLiteral(it) }
+            if (required.isNotEmpty()) {
+                objectData["required"] = JsonArray(required)
+            }
+        }
+        "array" -> objectData["items"] = properties.values.let {
+            check(it.size == 1) { "Array descriptor has returned inconsistent number of elements: expected 1, found ${it.size}" }
+            it.first()
+        }
+        else -> { /* no-op */
+        }
+    }
+    return JsonObject(objectData)
+}
+
+fun main() {
+    val context = Visual3DPlugin.serialModule
+    val definitions = json {
+        "children" to json {
+            "anyOf" to jsonArray {
+                context.enumerate(VisualObject3D::class).forEach {
+                    if (it.name == "hep.dataforge.vis.spatial.VisualGroup3D") {
+                        +json {
+                            "\$ref" to "#/definitions/${it.name}"
+                        }
+                    } else {
+                        +jsonSchema(it, context)
+                    }
+                }
+            }
+        }
+        "hep.dataforge.vis.spatial.Point3D" to jsonSchema(Point3DSerializer.descriptor, context)
+        "hep.dataforge.vis.spatial.Point2D" to jsonSchema(Point2DSerializer.descriptor, context)
+        "hep.dataforge.vis.spatial.VisualGroup3D" to jsonSchema(VisualGroup3D.serializer().descriptor, context)
+
+    }
+
+    println(
+        Json.indented.stringify(
+            JsonObjectSerializer,
+            json {
+                "definitions" to definitions
+                "\$ref" to "#/definitions/hep.dataforge.vis.spatial.VisualGroup3D"
+            }
+        )
+    )
+}
+
diff --git a/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/testCoil.kt b/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/testCoil.kt
deleted file mode 100644
index 567f0e7c..00000000
--- a/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/testCoil.kt
+++ /dev/null
@@ -1,26 +0,0 @@
-package hep.dataforge.vis.spatial.gdml
-
-import hep.dataforge.vis.spatial.Visual3DPlugin
-import hep.dataforge.vis.spatial.VisualGroup3D
-import nl.adaptivity.xmlutil.StAXReader
-import scientifik.gdml.GDML
-import java.io.File
-
-
-fun main() {
-    val file = File("D:\\Work\\Projects\\gdml.kt\\gdml-source\\BM@N_coil.gdml")
-
-    val xmlReader = StAXReader(file.inputStream(), "UTF-8")
-    val xml = GDML.format.parse(GDML.serializer(), xmlReader)
-    val visual = xml.toVisual {
-        lUnit = LUnit.CM
-    }
-
-    //val meta = visual.toMeta()
-
-    val str = Visual3DPlugin.json.stringify(VisualGroup3D.serializer(), visual)
-
-    println(str)
-
-    //println(Json.indented.stringify(meta.toJson()))
-}
\ No newline at end of file
diff --git a/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/testMain.kt b/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/testMain.kt
deleted file mode 100644
index 943b4afc..00000000
--- a/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/testMain.kt
+++ /dev/null
@@ -1,38 +0,0 @@
-package hep.dataforge.vis.spatial.gdml
-
-import hep.dataforge.names.toName
-import hep.dataforge.vis.spatial.VisualGroup3D
-import nl.adaptivity.xmlutil.StAXReader
-import scientifik.gdml.GDML
-import java.io.File
-
-fun main() {
-    val file = File("D:\\Work\\Projects\\gdml.kt\\gdml-source\\BM@N.gdml")
-    //val file = File("D:\\Work\\Projects\\gdml.kt\\gdml-source\\cubes.gdml")
-
-    val xmlReader = StAXReader(file.inputStream(), "UTF-8")
-    val xml = GDML.format.parse(GDML.serializer(), xmlReader)
-    val visual = xml.toVisual {
-        lUnit = LUnit.CM
-        volumeAction = { volume ->
-            when {
-                volume.name.startsWith("ecal") -> GDMLTransformer.Action.CACHE
-                volume.name.startsWith("U") -> GDMLTransformer.Action.CACHE
-                volume.name.startsWith("V") -> GDMLTransformer.Action.CACHE
-                else -> GDMLTransformer.Action.ACCEPT
-            }
-        }
-        onFinish = { printStatistics() }
-    }
-
-    val template = visual.getTemplate("volumes.ecal01mod".toName())
-    println(template)
-    visual.flatMap { (it as? VisualGroup3D) ?: listOf(it) }.forEach {
-        if(it.parent==null) error("")
-    }
-    //readLine()
-    //val meta = visual.toMeta()
-//    val tmpFile = File.createTempFile("dataforge-visual", "json")
-    //tmpFile.writeText(meta.toString())
-    //println(tmpFile.absoluteFile)
-}
\ No newline at end of file
diff --git a/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDMLJvm.kt b/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDMLJvm.kt
new file mode 100644
index 00000000..ae1904f5
--- /dev/null
+++ b/dataforge-vis-spatial-gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/visualGDMLJvm.kt
@@ -0,0 +1,18 @@
+package hep.dataforge.vis.spatial.gdml
+
+import hep.dataforge.vis.spatial.VisualGroup3D
+import nl.adaptivity.xmlutil.StAXReader
+import scientifik.gdml.GDML
+import java.nio.file.Files
+import java.nio.file.Path
+
+fun GDML.Companion.readFile(file: Path): GDML {
+    val xmlReader = StAXReader(Files.newInputStream(file), "UTF-8")
+    return GDML.format.parse(GDML.serializer(), xmlReader)
+}
+
+fun VisualGroup3D.gdml(file: Path, key: String = "", transformer: GDMLTransformer.() -> Unit = {}) {
+    val gdml = GDML.readFile(file)
+    gdml(gdml, key, transformer)
+}
+
diff --git a/dataforge-vis-spatial-gdml/src/jvmTest/kotlin/hep/dataforge/vis/spatial/gdml/TestConvertor.kt b/dataforge-vis-spatial-gdml/src/jvmTest/kotlin/hep/dataforge/vis/spatial/gdml/TestConvertor.kt
index 3644139c..f9cad99c 100644
--- a/dataforge-vis-spatial-gdml/src/jvmTest/kotlin/hep/dataforge/vis/spatial/gdml/TestConvertor.kt
+++ b/dataforge-vis-spatial-gdml/src/jvmTest/kotlin/hep/dataforge/vis/spatial/gdml/TestConvertor.kt
@@ -5,10 +5,12 @@ import org.junit.Test
 import scientifik.gdml.GDML
 import java.io.File
 import java.net.URL
+import kotlin.test.Ignore
 
 class TestConvertor {
 
     @Test
+    @Ignore
     fun testBMNGeometry() {
         val url = URL("https://drive.google.com/open?id=1w5e7fILMN83JGgB8WANJUYm8OW2s0WVO")
         val file = File("D:\\Work\\Projects\\gdml.kt\\gdml-source\\BM@N.gdml")
@@ -24,6 +26,7 @@ class TestConvertor {
     }
 
     @Test
+    @Ignore
     fun testCubes() {
         val file = File("D:\\Work\\Projects\\gdml.kt\\gdml-source\\cubes.gdml ")
         val stream = if (file.exists()) {
diff --git a/dataforge-vis-spatial/build.gradle.kts b/dataforge-vis-spatial/build.gradle.kts
index 17715a94..2fe2ac14 100644
--- a/dataforge-vis-spatial/build.gradle.kts
+++ b/dataforge-vis-spatial/build.gradle.kts
@@ -1,16 +1,15 @@
 import org.openjfx.gradle.JavaFXOptions
+import scientifik.useSerialization
 
 plugins {
     id("scientifik.mpp")
     id("org.openjfx.javafxplugin")
 }
 
-scientifik{
-    serialization = true
-}
+useSerialization()
 
 kotlin {
-    jvm{
+    jvm {
         withJava()
     }
     sourceSets {
@@ -19,19 +18,22 @@ kotlin {
                 api(project(":dataforge-vis-common"))
             }
         }
-        jvmMain{
+        jvmMain {
             dependencies {
-                implementation(project(":dataforge-vis-fx"))
-                implementation("org.fxyz3d:fxyz3d:0.4.0")
+                implementation("org.fxyz3d:fxyz3d:0.5.2") {
+                    exclude(module = "slf4j-simple")
+                }
+                api("org.jetbrains.kotlinx:kotlinx-coroutines-javafx:${Scientifik.coroutinesVersion}")
+                implementation("eu.mihosoft.vrl.jcsg:jcsg:0.5.7") {
+                    exclude(module = "slf4j-simple")
+                }
             }
         }
-        jsMain{
+        jsMain {
             dependencies {
-                api("info.laht.threekt:threejs-wrapper:0.106-npm-3")
+//                api(project(":wrappers"))
                 implementation(npm("three", "0.106.2"))
                 implementation(npm("@hi-level/three-csg", "1.0.6"))
-                implementation(npm("style-loader"))
-                implementation(npm("element-resize-event"))
             }
         }
     }
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Box.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Box.kt
index 7f362248..fd6358a2 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Box.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Box.kt
@@ -2,17 +2,22 @@
 package hep.dataforge.vis.spatial
 
 import hep.dataforge.context.Context
-import hep.dataforge.io.ConfigSerializer
-import hep.dataforge.meta.*
+import hep.dataforge.io.serialization.ConfigSerializer
+import hep.dataforge.meta.Config
+import hep.dataforge.meta.Meta
+import hep.dataforge.meta.float
+import hep.dataforge.meta.get
 import hep.dataforge.vis.common.AbstractVisualObject
 import hep.dataforge.vis.common.VisualFactory
 import hep.dataforge.vis.common.VisualObject
+import kotlinx.serialization.SerialName
 import kotlinx.serialization.Serializable
 import kotlinx.serialization.UseSerializers
 import kotlin.reflect.KClass
 
 @Serializable
-data class Box(
+@SerialName("3d.box")
+class Box(
     val xSize: Float,
     val ySize: Float,
     val zSize: Float
@@ -27,9 +32,9 @@ data class Box(
 
     //TODO add helper for color configuration
     override fun <T : Any> toGeometry(geometryBuilder: GeometryBuilder<T>) {
-        val dx = xSize.toFloat() / 2
-        val dy = ySize.toFloat() / 2
-        val dz = zSize.toFloat() / 2
+        val dx = xSize / 2
+        val dy = ySize / 2
+        val dz = zSize / 2
         val node1 = Point3D(-dx, -dy, -dz)
         val node2 = Point3D(dx, -dy, -dz)
         val node3 = Point3D(dx, dy, -dz)
@@ -46,17 +51,6 @@ data class Box(
         geometryBuilder.face4(node8, node5, node6, node7)
     }
 
-    override fun MetaBuilder.updateMeta() {
-        "xSize" to xSize
-        "ySize" to ySize
-        "zSize" to ySize
-        updatePosition()
-    }
-
-//    override fun toMeta(): Meta {
-//        return (Visual3DPlugin.json.toJson(Box.serializer(), this) as JsonObject).toMeta()
-//    }
-
     companion object : VisualFactory<Box> {
         const val TYPE = "geometry.3d.box"
 
@@ -76,6 +70,6 @@ inline fun VisualGroup3D.box(
     xSize: Number,
     ySize: Number,
     zSize: Number,
-    name: String? = null,
+    name: String = "",
     action: Box.() -> Unit = {}
 ) = Box(xSize.toFloat(), ySize.toFloat(), zSize.toFloat()).apply(action).also { set(name, it) }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Composite.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Composite.kt
index 8e6970ad..ed6f087b 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Composite.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Composite.kt
@@ -1,9 +1,9 @@
 @file:UseSerializers(Point3DSerializer::class)
+
 package hep.dataforge.vis.spatial
 
-import hep.dataforge.io.ConfigSerializer
+import hep.dataforge.io.serialization.ConfigSerializer
 import hep.dataforge.meta.Config
-import hep.dataforge.meta.MetaBuilder
 import hep.dataforge.meta.update
 import hep.dataforge.vis.common.AbstractVisualObject
 import kotlinx.serialization.Serializable
@@ -22,46 +22,49 @@ class Composite(
     val second: VisualObject3D
 ) : AbstractVisualObject(), VisualObject3D {
 
+    init {
+        first.parent = this
+        second.parent = this
+    }
+
     override var position: Point3D? = null
     override var rotation: Point3D? = null
     override var scale: Point3D? = null
 
     @Serializable(ConfigSerializer::class)
     override var properties: Config? = null
-
-    override fun MetaBuilder.updateMeta() {
-        "compositeType" to compositeType
-        "first" to first.toMeta()
-        "second" to second.toMeta()
-        updatePosition()
-    }
 }
 
 inline fun VisualGroup3D.composite(
     type: CompositeType,
-    name: String? = null,
+    name: String = "",
     builder: VisualGroup3D.() -> Unit
 ): Composite {
     val group = VisualGroup3D().apply(builder)
     val children = group.filterIsInstance<VisualObject3D>()
     if (children.size != 2) error("Composite requires exactly two children")
     return Composite(type, children[0], children[1]).also {
-        if (group.properties != null) {
-            it.config.update(group.config)
-            it.material = group.material
+        it.config.update(group.config)
+        //it.material = group.material
+
+        if(group.position!=null) {
+            it.position = group.position
+        }
+        if(group.rotation!=null) {
+            it.rotation = group.rotation
+        }
+        if(group.scale!=null) {
+            it.scale = group.scale
         }
-        it.position = group.position
-        it.rotation = group.rotation
-        it.scale = group.scale
         set(name, it)
     }
 }
 
-fun VisualGroup3D.union(name: String? = null, builder: VisualGroup3D.() -> Unit) =
+fun VisualGroup3D.union(name: String = "", builder: VisualGroup3D.() -> Unit) =
     composite(CompositeType.UNION, name, builder = builder)
 
-fun VisualGroup3D.subtract(name: String? = null, builder: VisualGroup3D.() -> Unit) =
+fun VisualGroup3D.subtract(name: String = "", builder: VisualGroup3D.() -> Unit) =
     composite(CompositeType.SUBTRACT, name, builder = builder)
 
-fun VisualGroup3D.intersect(name: String? = null, builder: VisualGroup3D.() -> Unit) =
+fun VisualGroup3D.intersect(name: String = "", builder: VisualGroup3D.() -> Unit) =
     composite(CompositeType.INTERSECT, name, builder = builder)
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/ConeSegment.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/ConeSegment.kt
index fdecbf3c..9aa090ef 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/ConeSegment.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/ConeSegment.kt
@@ -2,11 +2,13 @@
 
 package hep.dataforge.vis.spatial
 
-import hep.dataforge.io.ConfigSerializer
+import hep.dataforge.io.serialization.ConfigSerializer
 import hep.dataforge.meta.Config
 import hep.dataforge.vis.common.AbstractVisualObject
 import kotlinx.serialization.Serializable
 import kotlinx.serialization.UseSerializers
+import kotlin.math.cos
+import kotlin.math.sin
 
 /**
  * A cylinder or cut cone segment
@@ -18,7 +20,7 @@ class ConeSegment(
     var upperRadius: Float,
     var startAngle: Float = 0f,
     var angle: Float = PI2
-) : AbstractVisualObject(), VisualObject3D {
+) : AbstractVisualObject(), VisualObject3D, Shape {
 
     @Serializable(ConfigSerializer::class)
     override var properties: Config? = null
@@ -26,12 +28,55 @@ class ConeSegment(
     override var position: Point3D? = null
     override var rotation: Point3D? = null
     override var scale: Point3D? = null
+
+    override fun <T : Any> toGeometry(geometryBuilder: GeometryBuilder<T>) {
+        val segments = detail ?: 8
+        require(segments >= 4) { "The number of segments in cone segment is too small" }
+        val angleStep = angle / (segments - 1)
+
+        fun shape(r: Float, z: Float): List<Point3D> {
+            return (0 until segments).map { i ->
+                Point3D(r * cos(startAngle + angleStep * i), r * sin(startAngle + angleStep * i), z)
+            }
+        }
+
+        geometryBuilder.apply {
+
+            //creating shape in x-y plane with z = 0
+            val bottomOuterPoints = shape(upperRadius, -height / 2)
+            val upperOuterPoints = shape(radius, height / 2)
+            //outer face
+            (1 until segments).forEach {
+                face4(bottomOuterPoints[it - 1], bottomOuterPoints[it], upperOuterPoints[it], upperOuterPoints[it - 1])
+            }
+
+            if (angle == PI2) {
+                face4(bottomOuterPoints.last(), bottomOuterPoints[0], upperOuterPoints[0], upperOuterPoints.last())
+            }
+
+            val zeroBottom = Point3D(0f, 0f, 0f)
+            val zeroTop = Point3D(0f, 0f, height)
+            (1 until segments).forEach {
+                face(bottomOuterPoints[it - 1], zeroBottom, bottomOuterPoints[it])
+                face(upperOuterPoints[it - 1], upperOuterPoints[it], zeroTop)
+            }
+            if (angle == PI2) {
+                face(bottomOuterPoints.last(), zeroBottom, bottomOuterPoints[0])
+                face(upperOuterPoints.last(), upperOuterPoints[0], zeroTop)
+            } else {
+                face4(zeroTop, zeroBottom, bottomOuterPoints[0], upperOuterPoints[0])
+                face4(zeroTop, zeroBottom, bottomOuterPoints.last(), upperOuterPoints.last())
+            }
+
+        }
+    }
+
 }
 
 inline fun VisualGroup3D.cylinder(
     r: Number,
     height: Number,
-    name: String? = null,
+    name: String = "",
     block: ConeSegment.() -> Unit = {}
 ): ConeSegment = ConeSegment(
     r.toFloat(),
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Convex.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Convex.kt
index 1bfa5e7b..1ca46886 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Convex.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Convex.kt
@@ -2,9 +2,8 @@
 
 package hep.dataforge.vis.spatial
 
-import hep.dataforge.io.ConfigSerializer
+import hep.dataforge.io.serialization.ConfigSerializer
 import hep.dataforge.meta.Config
-import hep.dataforge.meta.MetaBuilder
 import hep.dataforge.vis.common.AbstractVisualObject
 import kotlinx.serialization.Serializable
 import kotlinx.serialization.UseSerializers
@@ -19,19 +18,12 @@ class Convex(val points: List<Point3D>) : AbstractVisualObject(), VisualObject3D
     override var rotation: Point3D? = null
     override var scale: Point3D? = null
 
-    override fun MetaBuilder.updateMeta() {
-        "points" to {
-            "point" to points.map { it.toMeta() }
-        }
-        updatePosition()
-    }
-
     companion object {
         const val TYPE = "geometry.3d.convex"
     }
 }
 
-inline fun VisualGroup3D.convex(name: String? = null, action: ConvexBuilder.() -> Unit = {}) =
+inline fun VisualGroup3D.convex(name: String = "", action: ConvexBuilder.() -> Unit = {}) =
     ConvexBuilder().apply(action).build().also { set(name, it) }
 
 class ConvexBuilder {
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Extruded.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Extruded.kt
index 5a464521..18dac3d0 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Extruded.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Extruded.kt
@@ -1,7 +1,7 @@
 @file:UseSerializers(Point2DSerializer::class, Point3DSerializer::class)
 package hep.dataforge.vis.spatial
 
-import hep.dataforge.io.ConfigSerializer
+import hep.dataforge.io.serialization.ConfigSerializer
 import hep.dataforge.meta.Config
 import hep.dataforge.vis.common.AbstractVisualObject
 import kotlinx.serialization.Serializable
@@ -62,7 +62,7 @@ class Extruded(
     override fun <T : Any> toGeometry(geometryBuilder: GeometryBuilder<T>) {
         val shape: Shape2D = shape
 
-        if (shape.size < 3) error("Extruded shape requires more than points per layer")
+        if (shape.size < 3) error("Extruded shape requires more than 2 points per layer")
 
         /**
          * Expand the shape for specific layers
@@ -110,5 +110,5 @@ class Extruded(
     }
 }
 
-fun VisualGroup3D.extrude(name: String? = null, action: Extruded.() -> Unit = {}) =
+fun VisualGroup3D.extrude(name: String = "", action: Extruded.() -> Unit = {}) =
     Extruded().apply(action).also { set(name, it) }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Label3D.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Label3D.kt
new file mode 100644
index 00000000..01ff005e
--- /dev/null
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Label3D.kt
@@ -0,0 +1,30 @@
+@file:UseSerializers(Point3DSerializer::class)
+
+package hep.dataforge.vis.spatial
+
+import hep.dataforge.io.serialization.ConfigSerializer
+import hep.dataforge.meta.Config
+import hep.dataforge.vis.common.AbstractVisualObject
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.UseSerializers
+
+@Serializable
+class Label3D(var text: String, var fontSize: Double, var fontFamily: String) : AbstractVisualObject(),
+    VisualObject3D {
+    @Serializable(ConfigSerializer::class)
+    override var properties: Config? = null
+
+    override var position: Point3D? = null
+    override var rotation: Point3D? = null
+    override var scale: Point3D? = null
+
+}
+
+fun VisualGroup3D.label(
+    text: String,
+    fontSize: Number = 20,
+    fontFamily: String = "Arial",
+    name: String = "",
+    action: Label3D.() -> Unit = {}
+) =
+    Label3D(text, fontSize.toDouble(), fontFamily).apply(action).also { set(name, it) }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Material3D.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Material3D.kt
new file mode 100644
index 00000000..342016cb
--- /dev/null
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Material3D.kt
@@ -0,0 +1,96 @@
+package hep.dataforge.vis.spatial
+
+import hep.dataforge.descriptors.NodeDescriptor
+import hep.dataforge.meta.*
+import hep.dataforge.names.asName
+import hep.dataforge.names.plus
+import hep.dataforge.values.ValueType
+import hep.dataforge.vis.common.Colors
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_COLOR_KEY
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_OPACITY_KEY
+
+class Material3D(override val config: Config) : Specific {
+
+    var color by string(key = COLOR_KEY)
+
+    var specularColor by string()
+
+    var opacity by float(1f, key = OPACITY_KEY)
+
+    var wireframe by boolean(false, WIREFRAME_KEY)
+
+    companion object : Specification<Material3D> {
+        override fun wrap(config: Config): Material3D = Material3D(config)
+
+        val MATERIAL_KEY = "material".asName()
+        internal val COLOR_KEY = "color".asName()
+        val MATERIAL_COLOR_KEY = MATERIAL_KEY + COLOR_KEY
+        val SPECULAR_COLOR = "specularColor".asName()
+        internal val OPACITY_KEY = "opacity".asName()
+        val MATERIAL_OPACITY_KEY = MATERIAL_KEY + OPACITY_KEY
+        internal val WIREFRAME_KEY = "wireframe".asName()
+        val MATERIAL_WIREFRAME_KEY = MATERIAL_KEY + WIREFRAME_KEY
+
+        val descriptor = NodeDescriptor {
+            value(VisualObject3D.VISIBLE_KEY) {
+                type(ValueType.BOOLEAN)
+                default(true)
+            }
+            node(MATERIAL_KEY) {
+                value(COLOR_KEY) {
+                    type(ValueType.STRING, ValueType.NUMBER)
+                    default("#ffffff")
+                }
+                value(OPACITY_KEY) {
+                    type(ValueType.NUMBER)
+                    default(1.0)
+                }
+                value(WIREFRAME_KEY) {
+                    type(ValueType.BOOLEAN)
+                    default(false)
+                }
+            }
+        }
+    }
+}
+
+fun VisualObject3D.color(rgb: String) {
+    setProperty(MATERIAL_COLOR_KEY, rgb)
+}
+
+fun VisualObject3D.color(rgb: Int) {
+    setProperty(MATERIAL_COLOR_KEY, rgb)
+}
+
+fun VisualObject3D.color(r: UByte, g: UByte, b: UByte) = setProperty(
+    MATERIAL_COLOR_KEY,
+    Colors.rgbToMeta(r, g, b)
+)
+
+/**
+ * Web colors representation of the color in `#rrggbb` format or HTML name
+ */
+var VisualObject3D.color: String?
+    get() = getProperty(MATERIAL_COLOR_KEY)?.let { Colors.fromMeta(it) }
+    set(value) {
+        setProperty(MATERIAL_COLOR_KEY, value)
+    }
+
+//var VisualObject3D.material: Material3D?
+//    get() = getProperty(MATERIAL_KEY).node?.let { Material3D.wrap(it) }
+//    set(value) = setProperty(MATERIAL_KEY, value?.config)
+
+fun VisualObject3D.material(builder: Material3D.() -> Unit) {
+    val node = config[Material3D.MATERIAL_KEY].node
+    if (node != null) {
+        Material3D.update(node, builder)
+    } else {
+        config[Material3D.MATERIAL_KEY] = Material3D(builder)
+    }
+}
+
+var VisualObject3D.opacity: Double?
+    get() = getProperty(MATERIAL_OPACITY_KEY).double
+    set(value) {
+        setProperty(MATERIAL_OPACITY_KEY, value)
+    }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/PolyLine.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/PolyLine.kt
new file mode 100644
index 00000000..75d00ab4
--- /dev/null
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/PolyLine.kt
@@ -0,0 +1,27 @@
+@file:UseSerializers(Point3DSerializer::class)
+
+package hep.dataforge.vis.spatial
+
+import hep.dataforge.io.serialization.ConfigSerializer
+import hep.dataforge.meta.Config
+import hep.dataforge.vis.common.AbstractVisualObject
+import hep.dataforge.vis.common.number
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.UseSerializers
+
+@Serializable
+class PolyLine(var points: List<Point3D>) : AbstractVisualObject(), VisualObject3D {
+    @Serializable(ConfigSerializer::class)
+    override var properties: Config? = null
+
+    override var position: Point3D? = null
+    override var rotation: Point3D? = null
+    override var scale: Point3D? = null
+
+    //var lineType by string()
+    var thickness by number(1.0, key = "material.thickness")
+
+}
+
+fun VisualGroup3D.polyline(vararg points: Point3D, name: String = "", action: PolyLine.() -> Unit = {}) =
+    PolyLine(points.toList()).apply(action).also { set(name, it) }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Proxy.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Proxy.kt
index 15ea2f28..62d7b5c0 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Proxy.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Proxy.kt
@@ -1,22 +1,32 @@
-@file:UseSerializers(Point3DSerializer::class, NameSerializer::class)
+@file:UseSerializers(Point3DSerializer::class, NameSerializer::class, ConfigSerializer::class)
 
 package hep.dataforge.vis.spatial
 
-import hep.dataforge.io.ConfigSerializer
-import hep.dataforge.io.NameSerializer
+import hep.dataforge.io.serialization.ConfigSerializer
+import hep.dataforge.io.serialization.NameSerializer
 import hep.dataforge.meta.Config
-import hep.dataforge.meta.MetaBuilder
+import hep.dataforge.meta.Laminate
 import hep.dataforge.meta.MetaItem
+import hep.dataforge.meta.get
 import hep.dataforge.names.Name
-import hep.dataforge.vis.common.AbstractVisualObject
+import hep.dataforge.names.NameToken
+import hep.dataforge.names.asName
+import hep.dataforge.names.plus
+import hep.dataforge.vis.common.*
+import kotlinx.serialization.SerialName
 import kotlinx.serialization.Serializable
+import kotlinx.serialization.Transient
 import kotlinx.serialization.UseSerializers
+import kotlin.collections.component1
+import kotlin.collections.component2
+import kotlin.collections.set
 
 /**
  * A proxy [VisualObject3D] to reuse a template object
  */
 @Serializable
-class Proxy(val templateName: Name) : AbstractVisualObject(), VisualObject3D {
+@SerialName("3d.proxy")
+class Proxy(val templateName: Name) : AbstractVisualObject(), VisualGroup, VisualObject3D {
 
     override var position: Point3D? = null
     override var rotation: Point3D? = null
@@ -28,36 +38,133 @@ class Proxy(val templateName: Name) : AbstractVisualObject(), VisualObject3D {
     /**
      * Recursively search for defined template in the parent
      */
-    val template: VisualObject3D
-        get() = (parent as? VisualGroup3D)?.getTemplate(templateName)
+    val prototype: VisualObject3D
+        get() = (parent as? VisualGroup3D)?.getPrototype(templateName)
             ?: error("Template with name $templateName not found in $parent")
 
+    override val styleSheet: StyleSheet
+        get() = (parent as? VisualGroup)?.styleSheet ?: StyleSheet(this)
 
     override fun getProperty(name: Name, inherit: Boolean): MetaItem<*>? {
         return if (inherit) {
-            super.getProperty(name, false) ?: template.getProperty(name, false) ?: parent?.getProperty(name, inherit)
+            properties?.get(name)
+                ?: mergedStyles[name]
+                ?: prototype.getProperty(name)
+                ?: parent?.getProperty(name)
         } else {
-            super.getProperty(name, false) ?: template.getProperty(name, false)
+            properties?.get(name)
+                ?: mergedStyles[name]
+                ?: prototype.getProperty(name, false)
         }
     }
 
-    override fun MetaBuilder.updateMeta() {
-        //TODO add reference to child
-        updatePosition()
+    override val children: Map<NameToken, ProxyChild>
+        get() = (prototype as? MutableVisualGroup)?.children
+            ?.filter { !it.key.toString().startsWith("@") }
+            ?.mapValues {
+                ProxyChild(it.key.asName())
+            } ?: emptyMap()
+
+    @Transient
+    private val propertyCache: HashMap<Name, Config> = HashMap()
+
+    fun childPropertyName(childName: Name, propertyName: Name): Name {
+        return NameToken(PROXY_CHILD_PROPERTY_PREFIX, childName.toString()) + propertyName
+    }
+
+    private fun prototypeFor(name: Name): VisualObject {
+        return (prototype as? VisualGroup)?.get(name)
+            ?: error("Prototype with name $name not found in $this")
+    }
+
+    override fun allProperties(): Laminate = Laminate(properties, mergedStyles, prototype.allProperties())
+
+    //override fun findAllStyles(): Laminate = Laminate((styles + prototype.styles).mapNotNull { findStyle(it) })
+
+    @Serializable
+    inner class ProxyChild(val name: Name) : AbstractVisualObject(), VisualGroup {
+
+        val prototype: VisualObject get() = prototypeFor(name)
+
+        override val styleSheet: StyleSheet get() = this@Proxy.styleSheet
+
+        override val children: Map<NameToken, VisualObject>
+            get() = (prototype as? VisualGroup)?.children?.mapValues { (key, _) ->
+                ProxyChild(
+                    name + key.asName()
+                )
+            } ?: emptyMap()
+
+        override var properties: Config?
+            get() = propertyCache[name]
+            set(value) {
+                if (value == null) {
+                    propertyCache.remove(name)?.also {
+                        //Removing listener if it is present
+                        removeChangeListener(this@Proxy)
+                    }
+                } else {
+                    propertyCache[name] = value.also {
+                        onPropertyChange(this@Proxy) { propertyName, before, after ->
+                            this@Proxy.propertyChanged(childPropertyName(name, propertyName), before, after)
+                        }
+                    }
+                }
+            }
+
+        override fun getProperty(name: Name, inherit: Boolean): MetaItem<*>? {
+            return if (inherit) {
+                properties?.get(name)
+                    ?: mergedStyles[name]
+                    ?: prototype.getProperty(name)
+                    ?: parent?.getProperty(name)
+            } else {
+                properties?.get(name)
+                    ?: mergedStyles[name]
+                    ?: prototype.getProperty(name, false)
+            }
+        }
+
+
+        override fun allProperties(): Laminate = Laminate(properties, mergedStyles, prototype.allProperties())
+
+    }
+
+    companion object {
+        const val PROXY_CHILD_PROPERTY_PREFIX = "@child"
     }
 }
 
-//fun VisualGroup3D.proxy(
-//    templateName: Name,
-//    //name: String? = null,
-//    builder: VisualGroup3D.() -> Unit
-//): Proxy {
-//    val template = getTemplate(templateName) ?: templates.builder()
-//    return Proxy(this, templateName).also { set(name, it) }
-//}
+val VisualObject.prototype: VisualObject
+    get() = when (this) {
+        is Proxy -> prototype
+        is Proxy.ProxyChild -> prototype
+        else -> this
+    }
 
+/**
+ * Create ref for existing prototype
+ */
 inline fun VisualGroup3D.ref(
     templateName: Name,
-    name: String? = null,
-    action: Proxy.() -> Unit = {}
-) = Proxy(templateName).apply(action).also { set(name, it) }
\ No newline at end of file
+    name: String = "",
+    block: Proxy.() -> Unit = {}
+) = Proxy(templateName).apply(block).also { set(name, it) }
+
+/**
+ * Add new proxy wrapping given object and automatically adding it to the prototypes
+ */
+fun VisualGroup3D.proxy(
+    templateName: Name,
+    obj: VisualObject3D,
+    name: String = "",
+    block: Proxy.() -> Unit = {}
+): Proxy {
+    val existing = getPrototype(templateName)
+    if (existing == null) {
+        setPrototype(templateName, obj)
+    } else if (existing != obj) {
+        error("Can't add different prototype on top of existing one")
+    }
+    return ref(templateName, name, block)
+}
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Sphere.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Sphere.kt
index 28f83960..26a9e820 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Sphere.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Sphere.kt
@@ -2,7 +2,7 @@
 
 package hep.dataforge.vis.spatial
 
-import hep.dataforge.io.ConfigSerializer
+import hep.dataforge.io.serialization.ConfigSerializer
 import hep.dataforge.meta.Config
 import hep.dataforge.vis.common.AbstractVisualObject
 import kotlinx.serialization.Serializable
@@ -16,7 +16,7 @@ class Sphere(
     var phi: Float = PI2,
     var thetaStart: Float = 0f,
     var theta: Float = PI.toFloat()
-) : AbstractVisualObject(), VisualObject3D {
+) : AbstractVisualObject(), VisualObject3D, Shape {
 
     @Serializable(ConfigSerializer::class)
     override var properties: Config? = null
@@ -24,13 +24,26 @@ class Sphere(
     override var position: Point3D? = null
     override var rotation: Point3D? = null
     override var scale: Point3D? = null
+
+    override fun <T : Any> toGeometry(geometryBuilder: GeometryBuilder<T>) {
+        TODO("not implemented")
+//        val segments = this.detail ?: 8
+//        require(segments >= 4) { "The detail for sphere must be >= 4" }
+//        val phiStep = phi / segments
+//        val thetaStep = theta / segments
+//        for (i in 1 until segments - 1) {
+//            for (j in 0 until segments - 1) {
+//                val point1 = Point3D()
+//            }
+//        }
+    }
 }
 
 inline fun VisualGroup3D.sphere(
     radius: Number,
     phi: Number = 2 * PI,
     theta: Number = PI,
-    name: String? = null,
+    name: String = "",
     action: Sphere.() -> Unit = {}
 ) = Sphere(
     radius.toFloat(),
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Tube.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Tube.kt
index 6b869d7f..248fbfce 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Tube.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Tube.kt
@@ -1,7 +1,7 @@
 @file:UseSerializers(Point3DSerializer::class)
 package hep.dataforge.vis.spatial
 
-import hep.dataforge.io.ConfigSerializer
+import hep.dataforge.io.serialization.ConfigSerializer
 import hep.dataforge.meta.Config
 import hep.dataforge.vis.common.AbstractVisualObject
 import kotlinx.serialization.Serializable
@@ -123,6 +123,7 @@ class Tube(
             }
         }
     }
+
 }
 
 inline fun VisualGroup3D.tube(
@@ -131,7 +132,7 @@ inline fun VisualGroup3D.tube(
     innerRadius: Number = 0f,
     startAngle: Number = 0f,
     angle: Number = 2 * PI,
-    name: String? = null,
+    name: String = "",
     block: Tube.() -> Unit = {}
 ): Tube = Tube(
     r.toFloat(),
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Visual3DPlugin.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Visual3DPlugin.kt
index 2c9a0595..3f4a194d 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Visual3DPlugin.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/Visual3DPlugin.kt
@@ -1,14 +1,20 @@
 package hep.dataforge.vis.spatial
 
 import hep.dataforge.context.AbstractPlugin
+import hep.dataforge.context.Context
 import hep.dataforge.context.PluginFactory
 import hep.dataforge.context.PluginTag
+import hep.dataforge.io.serialization.ConfigSerializer
+import hep.dataforge.io.serialization.MetaSerializer
+import hep.dataforge.io.serialization.NameSerializer
 import hep.dataforge.meta.*
 import hep.dataforge.names.Name
+import hep.dataforge.vis.common.VisualObject
 import hep.dataforge.vis.common.VisualPlugin
 import kotlinx.serialization.json.Json
 import kotlinx.serialization.json.JsonConfiguration
 import kotlinx.serialization.modules.SerializersModule
+import kotlinx.serialization.modules.contextual
 import kotlin.reflect.KClass
 
 class Visual3DPlugin(meta: Meta) : AbstractPlugin(meta) {
@@ -25,16 +31,26 @@ class Visual3DPlugin(meta: Meta) : AbstractPlugin(meta) {
     companion object : PluginFactory<Visual3DPlugin> {
         override val tag: PluginTag = PluginTag(name = "visual.spatial", group = PluginTag.DATAFORGE_GROUP)
         override val type: KClass<out Visual3DPlugin> = Visual3DPlugin::class
-        override fun invoke(meta: Meta): Visual3DPlugin = Visual3DPlugin(meta)
+        override fun invoke(meta: Meta, context: Context): Visual3DPlugin = Visual3DPlugin(meta)
 
         val serialModule = SerializersModule {
-            polymorphic(VisualObject3D::class) {
+            contextual(Point3DSerializer)
+            contextual(Point2DSerializer)
+            contextual(NameSerializer)
+            contextual(NameTokenSerializer)
+            contextual(MetaSerializer)
+            contextual(ConfigSerializer)
+
+            polymorphic(VisualObject::class, VisualObject3D::class) {
                 VisualGroup3D::class with VisualGroup3D.serializer()
                 Proxy::class with Proxy.serializer()
                 Composite::class with Composite.serializer()
                 Tube::class with Tube.serializer()
                 Box::class with Box.serializer()
                 Convex::class with Convex.serializer()
+                Extruded::class with Extruded.serializer()
+                addSubclass(PolyLine.serializer())
+                addSubclass(Label3D.serializer())
             }
         }
 
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualGroup3D.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualGroup3D.kt
new file mode 100644
index 00000000..44717f4d
--- /dev/null
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualGroup3D.kt
@@ -0,0 +1,143 @@
+@file:UseSerializers(
+    Point3DSerializer::class,
+    ConfigSerializer::class,
+    NameTokenSerializer::class,
+    NameSerializer::class,
+    MetaSerializer::class
+)
+
+package hep.dataforge.vis.spatial
+
+import hep.dataforge.io.serialization.ConfigSerializer
+import hep.dataforge.io.serialization.MetaSerializer
+import hep.dataforge.io.serialization.NameSerializer
+import hep.dataforge.meta.Config
+import hep.dataforge.names.Name
+import hep.dataforge.names.NameToken
+import hep.dataforge.names.asName
+import hep.dataforge.names.isEmpty
+import hep.dataforge.vis.common.AbstractVisualGroup
+import hep.dataforge.vis.common.StyleSheet
+import hep.dataforge.vis.common.VisualObject
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.UseSerializers
+import kotlin.collections.set
+
+/**
+ * Represents 3-dimensional Visual Group
+ */
+@Serializable
+@SerialName("group.3d")
+class VisualGroup3D : AbstractVisualGroup(), VisualObject3D {
+    /**
+     * A container for templates visible inside this group
+     */
+    @SerialName(PROTOTYPES_KEY)
+    var prototypes: VisualGroup3D? = null
+        set(value) {
+            value?.parent = this
+            field = value
+        }
+
+    override var styleSheet: StyleSheet? = null
+        private set
+
+    //FIXME to be lifted to AbstractVisualGroup after https://github.com/Kotlin/kotlinx.serialization/issues/378 is fixed
+    override var properties: Config? = null
+
+    override var position: Point3D? = null
+    override var rotation: Point3D? = null
+    override var scale: Point3D? = null
+
+    @SerialName("children")
+    private val _children = HashMap<NameToken, VisualObject>()
+    override val children: Map<NameToken, VisualObject> get() = _children
+
+    init {
+        //Do after deserialization
+        attachChildren()
+    }
+
+    /**
+     * Update or create stylesheet
+     */
+    fun styleSheet(block: StyleSheet.() -> Unit) {
+        val res = this.styleSheet ?: StyleSheet(this).also { this.styleSheet = it }
+        res.block()
+    }
+
+    override fun removeChild(token: NameToken) {
+        _children.remove(token)
+        childrenChanged(token.asName(), null)
+    }
+
+    override fun setChild(token: NameToken, child: VisualObject) {
+        if (child.parent == null) {
+            child.parent = this
+        } else {
+            error("Can't reassign existing parent for $child")
+        }
+        _children[token] = child
+        childrenChanged(token.asName(), child)
+    }
+
+//    /**
+//     * TODO add special static group to hold statics without propagation
+//     */
+//    override fun addStatic(child: VisualObject) = setChild(NameToken("@static(${child.hashCode()})"), child)
+
+    override fun createGroup(name: Name): VisualGroup3D {
+        return when {
+            name.isEmpty() -> error("Should be unreachable")
+            name.length == 1 -> {
+                val token = name.first()!!
+                when (val current = children[token]) {
+                    null -> VisualGroup3D().also { setChild(token, it) }
+                    is VisualGroup3D -> current
+                    else -> error("Can't create group with name $name because it exists and not a group")
+                }
+            }
+            else -> createGroup(name.first()!!.asName()).createGroup(name.cutFirst())
+        }
+    }
+
+    override fun attachChildren() {
+        super.attachChildren()
+        prototypes?.run {
+            parent = this
+            attachChildren()
+        }
+    }
+
+    companion object {
+        const val PROTOTYPES_KEY = "templates"
+    }
+}
+
+/**
+ * Ger a prototype redirecting the request to the parent if prototype is not found
+ */
+fun VisualGroup3D.getPrototype(name: Name): VisualObject3D? =
+    prototypes?.get(name) as? VisualObject3D ?: (parent as? VisualGroup3D)?.getPrototype(name)
+
+/**
+ * Defined a prototype inside current group
+ */
+fun VisualGroup3D.setPrototype(name: Name, obj: VisualObject3D) {
+    (prototypes ?: VisualGroup3D().also { this.prototypes = it })[name] = obj
+}
+
+/**
+ * Define a group with given [key], attach it to this parent and return it.
+ */
+fun VisualGroup3D.group(key: String = "", action: VisualGroup3D.() -> Unit = {}): VisualGroup3D =
+    VisualGroup3D().apply(action).also { set(key, it) }
+
+/**
+ * Create or edit prototype node as a group
+ */
+inline fun VisualGroup3D.prototypes(builder: VisualGroup3D.() -> Unit): Unit {
+    (prototypes ?: VisualGroup3D().also { this.prototypes = it }).run(builder)
+}
+
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualObject3D.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualObject3D.kt
index 0a51c6cb..db95754a 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualObject3D.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/VisualObject3D.kt
@@ -1,22 +1,22 @@
-@file:UseSerializers(Point3DSerializer::class, NameSerializer::class)
+@file:UseSerializers(Point3DSerializer::class, NameSerializer::class, NameTokenSerializer::class)
 
 package hep.dataforge.vis.spatial
 
-import hep.dataforge.io.ConfigSerializer
-import hep.dataforge.io.NameSerializer
+import hep.dataforge.io.serialization.NameSerializer
 import hep.dataforge.meta.*
-import hep.dataforge.names.Name
+import hep.dataforge.names.asName
 import hep.dataforge.names.plus
-import hep.dataforge.output.Output
-import hep.dataforge.vis.common.VisualGroup
+import hep.dataforge.output.Renderer
 import hep.dataforge.vis.common.VisualObject
-import hep.dataforge.vis.common.asName
 import hep.dataforge.vis.spatial.VisualObject3D.Companion.DETAIL_KEY
-import hep.dataforge.vis.spatial.VisualObject3D.Companion.MATERIAL_KEY
+import hep.dataforge.vis.spatial.VisualObject3D.Companion.IGNORE_KEY
+import hep.dataforge.vis.spatial.VisualObject3D.Companion.LAYER_KEY
 import hep.dataforge.vis.spatial.VisualObject3D.Companion.VISIBLE_KEY
-import kotlinx.serialization.Serializable
 import kotlinx.serialization.UseSerializers
 
+/**
+ * Interface for 3-dimensional [VisualObject]
+ */
 interface VisualObject3D : VisualObject {
     var position: Point3D?
     var rotation: Point3D?
@@ -35,9 +35,14 @@ interface VisualObject3D : VisualObject {
     }
 
     companion object {
-        val MATERIAL_KEY = "material".asName()
+
         val VISIBLE_KEY = "visible".asName()
+        val SELECTED_KEY = "selected".asName()
         val DETAIL_KEY = "detail".asName()
+        val LAYER_KEY = "layer".asName()
+        val IGNORE_KEY = "ignore".asName()
+
+        val GEOMETRY_KEY = "geometry".asName()
 
         val x = "x".asName()
         val y = "y".asName()
@@ -65,44 +70,16 @@ interface VisualObject3D : VisualObject {
     }
 }
 
-@Serializable
-class VisualGroup3D : VisualGroup<VisualObject3D>(), VisualObject3D, Configurable {
-    /**
-     * A container for templates visible inside this group
-     */
-    var templates: VisualGroup3D? = null
-        set(value) {
-            value?.parent = this
-            field = value
-        }
-
-    @Serializable(ConfigSerializer::class)
-    override var properties: Config? = null
-
-    override var position: Point3D? = null
-    override var rotation: Point3D? = null
-    override var scale: Point3D? = null
-
-    override val namedChildren: MutableMap<Name, VisualObject3D> = HashMap()
-    override val unnamedChildren: MutableList<VisualObject3D> = ArrayList()
-
-    fun getTemplate(name: Name): VisualObject3D? = templates?.get(name) ?: (parent as? VisualGroup3D)?.getTemplate(name)
-
-    override fun MetaBuilder.updateMeta() {
-        set(TEMPLATES_KEY, templates?.toMeta())
-        updatePosition()
-        updateChildren()
+/**
+ * Count number of layers to the top object. Return 1 if this is top layer
+ */
+var VisualObject3D.layer: Int
+    get() = getProperty(LAYER_KEY).int ?: 0
+    set(value) {
+        setProperty(LAYER_KEY, value)
     }
 
-    companion object {
-        const val TEMPLATES_KEY = "templates"
-    }
-}
-
-fun VisualGroup3D.group(key: String? = null, action: VisualGroup3D.() -> Unit = {}): VisualGroup3D =
-    VisualGroup3D().apply(action).also { set(key, it) }
-
-fun Output<VisualObject3D>.render(meta: Meta = EmptyMeta, action: VisualGroup3D.() -> Unit) =
+fun Renderer<VisualObject3D>.render(meta: Meta = EmptyMeta, action: VisualGroup3D.() -> Unit) =
     render(VisualGroup3D().apply(action), meta)
 
 // Common properties
@@ -131,27 +108,21 @@ var VisualObject3D.detail: Int?
     get() = getProperty(DETAIL_KEY, false).int
     set(value) = setProperty(DETAIL_KEY, value)
 
-var VisualObject3D.material: Meta?
-    get() = getProperty(MATERIAL_KEY).node
-    set(value) = setProperty(MATERIAL_KEY, value)
-
-var VisualObject3D.visible: Boolean?
+var VisualObject.visible: Boolean?
     get() = getProperty(VISIBLE_KEY).boolean
     set(value) = setProperty(VISIBLE_KEY, value)
 
-fun VisualObject3D.color(rgb: Int) {
-    material = buildMeta { "color" to rgb }
-}
+/**
+ * If this property is true, the object will be ignored on render.
+ * Property is not inherited.
+ */
+var VisualObject.ignore: Boolean?
+    get() = getProperty(IGNORE_KEY,false).boolean
+    set(value) = setProperty(IGNORE_KEY, value)
 
-fun VisualObject3D.material(builder: MetaBuilder.() -> Unit) {
-    material = buildMeta(builder)
-}
-
-fun VisualObject3D.color(r: Int, g: Int, b: Int) = material {
-    "red" to r
-    "green" to g
-    "blue" to b
-}
+//var VisualObject.selected: Boolean?
+//    get() = getProperty(SELECTED_KEY).boolean
+//    set(value) = setProperty(SELECTED_KEY, value)
 
 private fun VisualObject3D.position(): Point3D =
     position ?: Point3D(0.0, 0.0, 0.0).also { position = it }
@@ -160,21 +131,21 @@ var VisualObject3D.x: Number
     get() = position?.x ?: 0f
     set(value) {
         position().x = value.toDouble()
-        propertyChanged(VisualObject3D.xPos)
+        propertyInvalidated(VisualObject3D.xPos)
     }
 
 var VisualObject3D.y: Number
     get() = position?.y ?: 0f
     set(value) {
         position().y = value.toDouble()
-        propertyChanged(VisualObject3D.yPos)
+        propertyInvalidated(VisualObject3D.yPos)
     }
 
 var VisualObject3D.z: Number
     get() = position?.z ?: 0f
     set(value) {
         position().z = value.toDouble()
-        propertyChanged(VisualObject3D.zPos)
+        propertyInvalidated(VisualObject3D.zPos)
     }
 
 private fun VisualObject3D.rotation(): Point3D =
@@ -184,21 +155,21 @@ var VisualObject3D.rotationX: Number
     get() = rotation?.x ?: 0f
     set(value) {
         rotation().x = value.toDouble()
-        propertyChanged(VisualObject3D.xRotation)
+        propertyInvalidated(VisualObject3D.xRotation)
     }
 
 var VisualObject3D.rotationY: Number
     get() = rotation?.y ?: 0f
     set(value) {
         rotation().y = value.toDouble()
-        propertyChanged(VisualObject3D.yRotation)
+        propertyInvalidated(VisualObject3D.yRotation)
     }
 
 var VisualObject3D.rotationZ: Number
     get() = rotation?.z ?: 0f
     set(value) {
         rotation().z = value.toDouble()
-        propertyChanged(VisualObject3D.zRotation)
+        propertyInvalidated(VisualObject3D.zRotation)
     }
 
 private fun VisualObject3D.scale(): Point3D =
@@ -208,19 +179,19 @@ var VisualObject3D.scaleX: Number
     get() = scale?.x ?: 1f
     set(value) {
         scale().x = value.toDouble()
-        propertyChanged(VisualObject3D.xScale)
+        propertyInvalidated(VisualObject3D.xScale)
     }
 
 var VisualObject3D.scaleY: Number
     get() = scale?.y ?: 1f
     set(value) {
         scale().y = value.toDouble()
-        propertyChanged(VisualObject3D.yScale)
+        propertyInvalidated(VisualObject3D.yScale)
     }
 
 var VisualObject3D.scaleZ: Number
     get() = scale?.z ?: 1f
     set(value) {
         scale().z = value.toDouble()
-        propertyChanged(VisualObject3D.zScale)
+        propertyInvalidated(VisualObject3D.zScale)
     }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/World.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/World.kt
index 0743357d..bc946987 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/World.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/World.kt
@@ -3,12 +3,8 @@ package hep.dataforge.vis.spatial
 import kotlin.math.PI
 
 object World {
-    const val CAMERA_INITIAL_DISTANCE = -500.0
-    const val CAMERA_INITIAL_X_ANGLE = -50.0
-    const val CAMERA_INITIAL_Y_ANGLE = 0.0
-    const val CAMERA_INITIAL_Z_ANGLE = -210.0
-    const val CAMERA_NEAR_CLIP = 0.1
-    const val CAMERA_FAR_CLIP = 10000.0
+    val ZERO = Point3D(0.0, 0.0, 0.0)
+    val ONE = Point3D(1.0, 1.0, 1.0)
 }
 
 const val PI2: Float = 2 * PI.toFloat()
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/geometry.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/geometry.kt
index 20b537b2..75336e60 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/geometry.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/geometry.kt
@@ -14,8 +14,8 @@ operator fun Point2D.component1() = x
 operator fun Point2D.component2() = y
 
 fun Point2D.toMeta() = buildMeta {
-    VisualObject3D.x to x
-    VisualObject3D.y to y
+    VisualObject3D.x put x
+    VisualObject3D.y put y
 }
 
 fun Meta.point2D() = Point2D(this["x"].number ?: 0, this["y"].number ?: 0)
@@ -26,16 +26,16 @@ expect class Point3D(x: Number, y: Number, z: Number) {
     var z: Double
 }
 
+expect operator fun Point3D.plus(other: Point3D): Point3D
+
 operator fun Point3D.component1() = x
 operator fun Point3D.component2() = y
 operator fun Point3D.component3() = z
 
 fun Meta.point3D() = Point3D(this["x"].number ?: 0, this["y"].number ?: 0, this["y"].number ?: 0)
 
-val zero = Point3D(0, 0, 0)
-
 fun Point3D.toMeta() = buildMeta {
-    VisualObject3D.x to x
-    VisualObject3D.y to y
-    VisualObject3D.z to z
+    VisualObject3D.x put x
+    VisualObject3D.y put y
+    VisualObject3D.z put z
 }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/serilization.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/serilization.kt
index e353d655..b4f87d39 100644
--- a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/serilization.kt
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/serilization.kt
@@ -1,41 +1,109 @@
 package hep.dataforge.vis.spatial
 
+import hep.dataforge.io.serialization.descriptor
+import hep.dataforge.names.NameToken
+import hep.dataforge.names.toName
 import kotlinx.serialization.*
+import kotlinx.serialization.internal.DoubleSerializer
+import kotlinx.serialization.internal.StringDescriptor
+import kotlinx.serialization.internal.nullable
 
-@Serializable
-private data class Point2DSerial(val x: Double, val y: Double)
+inline fun <R> Decoder.decodeStructure(
+    desc: SerialDescriptor,
+    vararg typeParams: KSerializer<*> = emptyArray(),
+    crossinline block:  CompositeDecoder.() -> R
+): R {
+    val decoder = beginStructure(desc, *typeParams)
+    val res = decoder.block()
+    decoder.endStructure(desc)
+    return res
+}
 
-@Serializable
-private data class Point3DSerial(val x: Double, val y: Double, val z: Double)
+inline fun Encoder.encodeStructure(
+    desc: SerialDescriptor,
+    vararg typeParams: KSerializer<*> = emptyArray(),
+    block: CompositeEncoder.() -> Unit
+) {
+    val encoder = beginStructure(desc, *typeParams)
+    encoder.block()
+    encoder.endStructure(desc)
+}
 
 @Serializer(Point3D::class)
 object Point3DSerializer : KSerializer<Point3D> {
-    private val serializer = Point3DSerial.serializer()
-    override val descriptor: SerialDescriptor get() = serializer.descriptor
+    override val descriptor: SerialDescriptor = descriptor("hep.dataforge.vis.spatial.Point3D") {
+        double("x", true)
+        double("y", true)
+        double("z", true)
+    }
 
     override fun deserialize(decoder: Decoder): Point3D {
-        return serializer.deserialize(decoder).let {
-            Point3D(it.x, it.y, it.z)
+        var x: Double? = null
+        var y: Double? = null
+        var z: Double? = null
+        decoder.decodeStructure(descriptor) {
+            loop@ while (true) {
+                when (val i = decodeElementIndex(descriptor)) {
+                    CompositeDecoder.READ_DONE -> break@loop
+                    0 -> x = decodeNullableSerializableElement(descriptor, 0, DoubleSerializer.nullable) ?: 0.0
+                    1 -> y = decodeNullableSerializableElement(descriptor, 0, DoubleSerializer.nullable) ?: 0.0
+                    2 -> z = decodeNullableSerializableElement(descriptor, 0, DoubleSerializer.nullable) ?: 0.0
+                    else -> throw SerializationException("Unknown index $i")
+                }
+            }
         }
+        return Point3D(x?:0.0, y?:0.0, z?:0.0)
     }
 
     override fun serialize(encoder: Encoder, obj: Point3D) {
-        serializer.serialize(encoder, Point3DSerial(obj.x, obj.y, obj.z) )
+        encoder.encodeStructure(descriptor) {
+            if (obj.x != 0.0) encodeDoubleElement(descriptor, 0, obj.x)
+            if (obj.y != 0.0) encodeDoubleElement(descriptor, 1, obj.y)
+            if (obj.z != 0.0) encodeDoubleElement(descriptor, 2, obj.z)
+        }
     }
 }
 
 @Serializer(Point2D::class)
 object Point2DSerializer : KSerializer<Point2D> {
-    private val serializer = Point2DSerial.serializer()
-    override val descriptor: SerialDescriptor get() = serializer.descriptor
+    override val descriptor: SerialDescriptor = descriptor("hep.dataforge.vis.spatial.Point2D") {
+        double("x", true)
+        double("y", true)
+    }
 
     override fun deserialize(decoder: Decoder): Point2D {
-        return serializer.deserialize(decoder).let {
-            Point2D(it.x, it.y)
+        var x: Double? = null
+        var y: Double? = null
+        decoder.decodeStructure(descriptor) {
+            loop@ while (true) {
+                when (val i = decodeElementIndex(descriptor)) {
+                    CompositeDecoder.READ_DONE -> break@loop
+                    0 -> x = decodeNullableSerializableElement(descriptor, 0, DoubleSerializer.nullable) ?: 0.0
+                    1 -> y = decodeNullableSerializableElement(descriptor, 0, DoubleSerializer.nullable) ?: 0.0
+                    else -> throw SerializationException("Unknown index $i")
+                }
+            }
         }
+        return Point2D(x?:0.0, y?:0.0)
     }
 
     override fun serialize(encoder: Encoder, obj: Point2D) {
-        serializer.serialize(encoder, Point2DSerial(obj.x, obj.y))
+        encoder.encodeStructure(descriptor) {
+            if (obj.x != 0.0) encodeDoubleElement(descriptor, 0, obj.x)
+            if (obj.y != 0.0) encodeDoubleElement(descriptor, 1, obj.y)
+        }
+    }
+}
+
+@Serializer(NameToken::class)
+object NameTokenSerializer : KSerializer<NameToken> {
+    override val descriptor: SerialDescriptor = StringDescriptor.withName("NameToken")
+
+    override fun deserialize(decoder: Decoder): NameToken {
+        return decoder.decodeString().toName().first()!!
+    }
+
+    override fun serialize(encoder: Encoder, obj: NameToken) {
+        encoder.encodeString(obj.toString())
     }
 }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/specifications/AxesSpec.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/specifications/AxesSpec.kt
new file mode 100644
index 00000000..b46b9f4d
--- /dev/null
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/specifications/AxesSpec.kt
@@ -0,0 +1,17 @@
+package hep.dataforge.vis.spatial.specifications
+
+import hep.dataforge.meta.*
+
+class AxesSpec(override val config: Config) : Specific {
+    var visible by boolean(!config.isEmpty())
+    var size by double(AXIS_SIZE)
+    var width by double(AXIS_WIDTH)
+
+    companion object : Specification<AxesSpec> {
+        override fun wrap(config: Config): AxesSpec = AxesSpec(config)
+
+        const val AXIS_SIZE = 1000.0
+        const val AXIS_WIDTH = 3.0
+
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/specifications/CameraSpec.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/specifications/CameraSpec.kt
new file mode 100644
index 00000000..eb23472f
--- /dev/null
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/specifications/CameraSpec.kt
@@ -0,0 +1,26 @@
+package hep.dataforge.vis.spatial.specifications
+
+import hep.dataforge.meta.*
+import kotlin.math.PI
+
+class CameraSpec(override val config: Config) : Specific {
+    var fov by int(FIELD_OF_VIEW)
+    //var aspect by double(1.0)
+    var nearClip by double(NEAR_CLIP)
+    var farClip by double(FAR_CLIP)
+
+    var distance by double(INITIAL_DISTANCE)
+    var azimuth by double(INITIAL_AZIMUTH)
+    var latitude by double(INITIAL_LATITUDE)
+    val zenith: Double get() = PI / 2 - latitude
+
+    companion object : Specification<CameraSpec> {
+        override fun wrap(config: Config): CameraSpec = CameraSpec(config)
+        const val INITIAL_DISTANCE = 300.0
+        const val INITIAL_AZIMUTH = 0.0
+        const val INITIAL_LATITUDE = PI/6
+        const val NEAR_CLIP = 0.1
+        const val FAR_CLIP = 10000.0
+        const val FIELD_OF_VIEW = 75
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/specifications/CanvasSpec.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/specifications/CanvasSpec.kt
new file mode 100644
index 00000000..d9cbded6
--- /dev/null
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/specifications/CanvasSpec.kt
@@ -0,0 +1,15 @@
+package hep.dataforge.vis.spatial.specifications
+
+import hep.dataforge.meta.*
+
+class CanvasSpec(override val config: Config) : Specific {
+    var axes by spec(AxesSpec)
+    var camera by spec(CameraSpec)
+    var controls by spec(ControlsSpec)
+    var minSize by int(300)
+
+    companion object: Specification<CanvasSpec>{
+        override fun wrap(config: Config): CanvasSpec = CanvasSpec(config)
+
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/specifications/ControlsSpec.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/specifications/ControlsSpec.kt
new file mode 100644
index 00000000..2a828766
--- /dev/null
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/specifications/ControlsSpec.kt
@@ -0,0 +1,11 @@
+package hep.dataforge.vis.spatial.specifications
+
+import hep.dataforge.meta.Config
+import hep.dataforge.meta.Specific
+import hep.dataforge.meta.Specification
+
+class ControlsSpec(override val config: Config) : Specific {
+    companion object : Specification<ControlsSpec> {
+        override fun wrap(config: Config): ControlsSpec = ControlsSpec(config)
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/transform/RemoveSingleChild.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/transform/RemoveSingleChild.kt
new file mode 100644
index 00000000..70db5c75
--- /dev/null
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/transform/RemoveSingleChild.kt
@@ -0,0 +1,60 @@
+package hep.dataforge.vis.spatial.transform
+
+import hep.dataforge.meta.update
+import hep.dataforge.names.asName
+import hep.dataforge.vis.common.MutableVisualGroup
+import hep.dataforge.vis.common.VisualGroup
+import hep.dataforge.vis.common.VisualObject
+import hep.dataforge.vis.spatial.*
+
+internal fun mergeChild(parent: VisualGroup, child: VisualObject): VisualObject {
+    return child.apply {
+
+        config.update(parent.config)
+
+        //parent.properties?.let { config.update(it) }
+
+        if (this is VisualObject3D && parent is VisualObject3D) {
+            position = (position ?: World.ZERO) + (parent.position ?: World.ZERO)
+            rotation = (parent.rotation ?: World.ZERO) + (parent.rotation ?: World.ZERO)
+            scale = when {
+                scale == null && parent.scale == null -> null
+                scale == null -> parent.scale
+                parent.scale == null -> scale
+                else -> Point3D(
+                    scale!!.x * parent.scale!!.x,
+                    scale!!.y * parent.scale!!.y,
+                    scale!!.z * parent.scale!!.z
+                )
+            }
+        }
+
+    }
+}
+
+object RemoveSingleChild : VisualTreeTransform<VisualGroup3D>() {
+
+    override fun VisualGroup3D.transformInPlace() {
+        fun MutableVisualGroup.replaceChildren() {
+            children.forEach { (childName, parent) ->
+                if (parent is Proxy) return@forEach //ignore refs
+                if (parent is MutableVisualGroup) {
+                    parent.replaceChildren()
+                }
+                if (parent is VisualGroup && parent.children.size == 1) {
+                    val child = parent.children.values.first()
+                    val newParent = mergeChild(parent, child)
+                    newParent.parent = null
+                    set(childName.asName(), newParent)
+                }
+            }
+        }
+
+        replaceChildren()
+        prototypes?.replaceChildren()
+    }
+
+    override fun VisualGroup3D.clone(): VisualGroup3D {
+        TODO()
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/transform/UnRef.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/transform/UnRef.kt
new file mode 100644
index 00000000..12681b24
--- /dev/null
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/transform/UnRef.kt
@@ -0,0 +1,49 @@
+package hep.dataforge.vis.spatial.transform
+
+import hep.dataforge.names.Name
+import hep.dataforge.names.asName
+import hep.dataforge.vis.common.MutableVisualGroup
+import hep.dataforge.vis.common.VisualGroup
+import hep.dataforge.vis.spatial.Proxy
+import hep.dataforge.vis.spatial.VisualGroup3D
+
+object UnRef : VisualTreeTransform<VisualGroup3D>() {
+    private fun VisualGroup.countRefs(): Map<Name, Int> {
+        return children.values.fold(HashMap()) { reducer, obj ->
+            if (obj is VisualGroup) {
+                val counter = obj.countRefs()
+                counter.forEach { (key, value) ->
+                    reducer[key] = (reducer[key] ?: 0) + value
+                }
+            } else if (obj is Proxy) {
+                reducer[obj.templateName] = (reducer[obj.templateName] ?: 0) + 1
+            }
+
+            return reducer
+        }
+    }
+
+    private fun MutableVisualGroup.unref(name: Name) {
+        (this as? VisualGroup3D)?.prototypes?.set(name, null)
+        children.filter { (it.value as? Proxy)?.templateName == name }.forEach { (key, value) ->
+            val proxy = value as Proxy
+            val newChild = mergeChild(proxy, proxy.prototype)
+            newChild.parent = null
+            set(key.asName(), newChild) // replace proxy with merged object
+        }
+
+        children.values.filterIsInstance<MutableVisualGroup>().forEach { it.unref(name) }
+    }
+
+    override fun VisualGroup3D.transformInPlace() {
+        val counts = countRefs()
+        counts.filter { it.value <= 1 }.forEach {
+            this.unref(it.key)
+        }
+    }
+
+    override fun VisualGroup3D.clone(): VisualGroup3D {
+        TODO()
+    }
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/transform/VisualTreeTransform.kt b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/transform/VisualTreeTransform.kt
new file mode 100644
index 00000000..596aad56
--- /dev/null
+++ b/dataforge-vis-spatial/src/commonMain/kotlin/hep/dataforge/vis/spatial/transform/VisualTreeTransform.kt
@@ -0,0 +1,34 @@
+package hep.dataforge.vis.spatial.transform
+
+import hep.dataforge.vis.common.VisualObject
+
+/**
+ * A root class for [VisualObject] tree optimization
+ */
+abstract class VisualTreeTransform<T : VisualObject> {
+    protected abstract fun T.transformInPlace()
+    protected abstract fun T.clone(): T
+
+    operator fun invoke(source: T, inPlace: Boolean = true): T {
+        val newSource = if (inPlace) {
+            source
+        } else {
+            source.clone()
+        }
+        newSource.transformInPlace()
+
+        return newSource
+    }
+}
+
+fun <T : VisualObject> T.transform(vararg transform: VisualTreeTransform<T>): T {
+    var res = this
+    transform.forEach {
+        res = it(res)
+    }
+    return res
+}
+
+fun <T : VisualObject> T.transformInPlace(vararg transform: VisualTreeTransform<in T>) {
+    transform.forEach { it(this) }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/ConvexTest.kt b/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/ConvexTest.kt
index 6d1c5152..3358fe84 100644
--- a/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/ConvexTest.kt
+++ b/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/ConvexTest.kt
@@ -1,13 +1,13 @@
 package hep.dataforge.vis.spatial
 
-import hep.dataforge.meta.get
-import hep.dataforge.meta.getAll
-import hep.dataforge.meta.node
-import hep.dataforge.names.toName
+import hep.dataforge.io.toMeta
+import hep.dataforge.meta.MetaItem
+import hep.dataforge.meta.getIndexed
 import kotlin.test.Test
 import kotlin.test.assertEquals
 
 class ConvexTest {
+    @Suppress("UNUSED_VARIABLE")
     @Test
     fun testConvexBuilder() {
         val group = VisualGroup3D().apply {
@@ -25,12 +25,11 @@ class ConvexTest {
 
         val convex = group.first() as Convex
 
-        val meta = convex.toMeta()
+        val json = Visual3DPlugin.json.toJson(Convex.serializer(), convex)
+        val meta = json.toMeta()
 
-        val pointsNode = convex.toMeta()["points"].node
-
-        assertEquals(8, pointsNode?.items?.count())
-        val points = pointsNode?.getAll("point".toName())
+        val points = meta.getIndexed("points").values.map { (it as MetaItem.NodeItem<*>).node.point3D()}
+        assertEquals(8, points.count())
 
         assertEquals(8, convex.points.size)
     }
diff --git a/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/GroupTest.kt b/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/GroupTest.kt
index e7ef1eeb..2608b53a 100644
--- a/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/GroupTest.kt
+++ b/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/GroupTest.kt
@@ -1,15 +1,16 @@
 package hep.dataforge.vis.spatial
 
 import hep.dataforge.vis.common.Colors
+import hep.dataforge.vis.common.get
 import kotlin.math.PI
 import kotlin.test.Test
 import kotlin.test.assertEquals
 
 class GroupTest {
     @Test
-    fun testGroupWithComposite(){
-        val group = VisualGroup3D().apply{
-            union {
+    fun testGroupWithComposite() {
+        val group = VisualGroup3D().apply {
+            union("union") {
                 box(100, 100, 100) {
                     z = 100
                     rotationX = PI / 4
@@ -17,11 +18,11 @@ class GroupTest {
                 }
                 box(100, 100, 100)
                 material {
-                    "color" to Colors.lightgreen
-                    "opacity" to 0.3
+                    color(Colors.lightgreen)
+                    opacity = 0.3f
                 }
             }
-            intersect{
+            intersect("intersect") {
                 box(100, 100, 100) {
                     z = 100
                     rotationX = PI / 4
@@ -31,7 +32,7 @@ class GroupTest {
                 y = 300
                 color(Colors.red)
             }
-            subtract{
+            subtract("subtract") {
                 box(100, 100, 100) {
                     z = 100
                     rotationX = PI / 4
@@ -44,7 +45,7 @@ class GroupTest {
         }
 
         assertEquals(3, group.count())
-        assertEquals(300.0,group.toList()[1].y.toDouble())
-        assertEquals(-300.0,group.toList()[2].y.toDouble())
+        assertEquals(300.0, (group["intersect"] as VisualObject3D).y.toDouble())
+        assertEquals(-300.0, (group["subtract"] as VisualObject3D).y.toDouble())
     }
 }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/PropertyTest.kt b/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/PropertyTest.kt
new file mode 100644
index 00000000..fa15b905
--- /dev/null
+++ b/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/PropertyTest.kt
@@ -0,0 +1,79 @@
+package hep.dataforge.vis.spatial
+
+import hep.dataforge.meta.int
+import hep.dataforge.meta.set
+import hep.dataforge.names.asName
+import hep.dataforge.vis.common.useStyle
+import kotlin.test.Test
+import kotlin.test.assertEquals
+
+class PropertyTest {
+    @Test
+    fun testInheritedProperty() {
+        var box: Box? = null
+        val group = VisualGroup3D().apply {
+            config["test"] = 22
+            group {
+                box = box(100, 100, 100)
+            }
+        }
+        assertEquals(22, box?.getProperty("test".asName()).int)
+    }
+
+    @Test
+    fun testStyleProperty() {
+        var box: Box? = null
+        val group = VisualGroup3D().apply {
+            styleSheet {
+                set("testStyle") {
+                    "test" put 22
+                }
+            }
+            group {
+                box = box(100, 100, 100).apply {
+                    useStyle("testStyle")
+                }
+            }
+        }
+        assertEquals(22, box?.getProperty("test".asName()).int)
+    }
+
+    @Test
+    fun testColor() {
+        var box: Box? = null
+        val group = VisualGroup3D().apply {
+            styleSheet {
+                set("testStyle") {
+                    Material3D.MATERIAL_COLOR_KEY put "#555555"
+                }
+            }
+            group {
+                box = box(100, 100, 100) {
+                    useStyle("testStyle")
+                }
+            }
+        }
+        assertEquals("#555555", box?.color)
+    }
+
+    @Test
+    fun testProxyStyleProperty() {
+        var box: Proxy? = null
+        val group = VisualGroup3D().apply {
+            styleSheet {
+                set("testStyle") {
+                    Material3D.MATERIAL_COLOR_KEY put "#555555"
+                }
+            }
+            prototypes {
+                box(100, 100, 100, name = "box") {
+                    styles = listOf("testStyle")
+                }
+            }
+            group {
+                box = ref("box".asName())
+            }
+        }
+        assertEquals("#555555", box?.color)
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/SerializationTest.kt b/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/SerializationTest.kt
index 87668852..128b507b 100644
--- a/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/SerializationTest.kt
+++ b/dataforge-vis-spatial/src/commonTest/kotlin/hep/dataforge/vis/spatial/SerializationTest.kt
@@ -1,6 +1,6 @@
 package hep.dataforge.vis.spatial
 
-import hep.dataforge.context.Global
+import hep.dataforge.vis.spatial.Visual3DPlugin.Companion.json
 import kotlinx.serialization.ImplicitReflectionSerializer
 import kotlin.test.Test
 import kotlin.test.assertEquals
@@ -8,13 +8,15 @@ import kotlin.test.assertEquals
 class SerializationTest {
     @ImplicitReflectionSerializer
     @Test
-    fun testCubeSerialization(){
-        val cube = Box(100f,100f,100f).apply{
+    fun testCubeSerialization() {
+        val cube = Box(100f, 100f, 100f).apply {
             color(222)
+            x = 100
+            z = -100
         }
-        val meta = cube.toMeta()
-        println(meta)
-        val newCube = Box(Global,null, meta)
-        assertEquals(cube,newCube)
+        val string = json.stringify(Box.serializer(), cube)
+        println(string)
+        val newCube = json.parse(Box.serializer(), string)
+        assertEquals(cube.config, newCube.config)
     }
 }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/geometryJs.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/geometryJs.kt
index cacb3600..cba5d958 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/geometryJs.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/geometryJs.kt
@@ -1,8 +1,14 @@
 package hep.dataforge.vis.spatial
 
+
 import info.laht.threekt.math.Vector2
 import info.laht.threekt.math.Vector3
+import info.laht.threekt.math.plus
 
 actual typealias Point2D = Vector2
 
-actual typealias Point3D = Vector3
\ No newline at end of file
+actual typealias Point3D = Vector3
+
+actual operator fun Point3D.plus(other: Point3D): Point3D {
+    return this.plus(other)
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/Materials.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/Materials.kt
deleted file mode 100644
index 3d7f382b..00000000
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/Materials.kt
+++ /dev/null
@@ -1,63 +0,0 @@
-package hep.dataforge.vis.spatial.three
-
-import hep.dataforge.meta.*
-import hep.dataforge.values.ValueType
-import hep.dataforge.vis.common.Colors
-import info.laht.threekt.materials.Material
-import info.laht.threekt.materials.MeshBasicMaterial
-import info.laht.threekt.materials.MeshPhongMaterial
-import info.laht.threekt.math.Color
-
-
-object Materials {
-    val DEFAULT_COLOR = Color(Colors.darkgreen)
-    val DEFAULT = MeshPhongMaterial().apply {
-        this.color.set(DEFAULT_COLOR)
-    }
-}
-
-/**
- * Infer color based on meta item
- */
-fun MetaItem<*>.color(): Color {
-    return when (this) {
-        is MetaItem.ValueItem -> if (this.value.type == ValueType.STRING) {
-            Color(this.value.string)
-        } else {
-            val int = value.number.toInt()
-//            val red = int and 0x00ff0000 shr 16
-//            val green = int and 0x0000ff00 shr 8
-//            val blue = int and 0x000000ff
-            Color(int)
-        }
-        is MetaItem.NodeItem -> {
-            Color(
-                node["red"]?.int ?: 0,
-                node["green"]?.int ?: 0,
-                node["blue"]?.int ?: 0
-            )
-        }
-    }
-}
-
-private val materialCache = HashMap<Meta, Material>()
-
-/**
- * Infer Three material based on meta item
- */
-fun Meta?.jsMaterial(): Material {
-    return if (this == null) {
-        Materials.DEFAULT
-    } else
-    //TODO add more options for material
-        return materialCache.getOrPut(this) {
-            MeshBasicMaterial().apply {
-                color = get("color")?.color() ?: Materials.DEFAULT_COLOR
-                opacity = get("opacity")?.double ?: 1.0
-                transparent = get("transparent").boolean ?: (opacity < 1.0)
-                //node["specularColor"]?.let { specular = it.color() }
-                side = 2
-            }
-        }
-}
-
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/MeshThreeFactory.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/MeshThreeFactory.kt
new file mode 100644
index 00000000..76adef48
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/MeshThreeFactory.kt
@@ -0,0 +1,119 @@
+package hep.dataforge.vis.spatial.three
+
+import hep.dataforge.meta.boolean
+import hep.dataforge.meta.node
+import hep.dataforge.names.asName
+import hep.dataforge.names.plus
+import hep.dataforge.names.startsWith
+import hep.dataforge.vis.spatial.Material3D
+import hep.dataforge.vis.spatial.VisualObject3D
+import hep.dataforge.vis.spatial.layer
+import hep.dataforge.vis.spatial.three.ThreeMaterials.getMaterial
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.geometries.EdgesGeometry
+import info.laht.threekt.geometries.WireframeGeometry
+import info.laht.threekt.objects.LineSegments
+import info.laht.threekt.objects.Mesh
+import kotlin.reflect.KClass
+
+/**
+ * Basic geometry-based factory
+ */
+abstract class MeshThreeFactory<in T : VisualObject3D>(
+    override val type: KClass<in T>
+) : ThreeFactory<T> {
+    /**
+     * Build a geometry for an object
+     */
+    abstract fun buildGeometry(obj: T): BufferGeometry
+
+    override fun invoke(obj: T): Mesh {
+        val geometry = buildGeometry(obj)
+
+        //JS sometimes tries to pass Geometry as BufferGeometry
+        @Suppress("USELESS_IS_CHECK") if (geometry !is BufferGeometry) error("BufferGeometry expected")
+
+        //val meshMeta: Meta = obj.properties[Material3D.MATERIAL_KEY]?.node ?: Meta.empty
+
+        val mesh = Mesh(geometry, getMaterial(obj)).apply {
+            matrixAutoUpdate = false
+            applyEdges(obj)
+            applyWireFrame(obj)
+
+            //set position for mesh
+            updatePosition(obj)
+
+            layers.enable(obj.layer)
+            children.forEach {
+                it.layers.enable(obj.layer)
+            }
+        }
+
+        //add listener to object properties
+        obj.onPropertyChange(this) { name, _, _ ->
+            when {
+                name.startsWith(VisualObject3D.GEOMETRY_KEY) -> {
+                    val oldGeometry = mesh.geometry as BufferGeometry
+                    val newGeometry = buildGeometry(obj)
+                    oldGeometry.attributes = newGeometry.attributes
+                    mesh.applyWireFrame(obj)
+                    mesh.applyEdges(obj)
+                    newGeometry.dispose()
+                }
+                name.startsWith(WIREFRAME_KEY) -> mesh.applyWireFrame(obj)
+                name.startsWith(EDGES_KEY) -> mesh.applyEdges(obj)
+                else -> mesh.updateProperty(obj, name)
+            }
+        }
+        return mesh
+    }
+
+    companion object {
+        val EDGES_KEY = "edges".asName()
+        val WIREFRAME_KEY = "wireframe".asName()
+        val ENABLED_KEY = "enabled".asName()
+        val EDGES_ENABLED_KEY = EDGES_KEY + ENABLED_KEY
+        val EDGES_MATERIAL_KEY = EDGES_KEY + Material3D.MATERIAL_KEY
+        val WIREFRAME_ENABLED_KEY = WIREFRAME_KEY + ENABLED_KEY
+        val WIREFRAME_MATERIAL_KEY = WIREFRAME_KEY + Material3D.MATERIAL_KEY
+    }
+}
+
+fun Mesh.applyEdges(obj: VisualObject3D) {
+    children.find { it.name == "edges" }?.let {
+        remove(it)
+        (it as LineSegments).dispose()
+    }
+    //inherited edges definition, enabled by default
+    if (obj.getProperty(MeshThreeFactory.EDGES_ENABLED_KEY).boolean != false) {
+
+        val material = ThreeMaterials.getLineMaterial(obj.getProperty(MeshThreeFactory.EDGES_MATERIAL_KEY).node)
+        add(
+            LineSegments(
+                EdgesGeometry(geometry as BufferGeometry),
+                material
+            ).apply {
+                name = "edges"
+            }
+        )
+    }
+}
+
+fun Mesh.applyWireFrame(obj: VisualObject3D) {
+    children.find { it.name == "wireframe" }?.let {
+        remove(it)
+        (it as LineSegments).dispose()
+    }
+    //inherited wireframe definition, disabled by default
+    if (obj.getProperty(MeshThreeFactory.WIREFRAME_ENABLED_KEY).boolean == true) {
+        val material = ThreeMaterials.getLineMaterial(obj.getProperty(MeshThreeFactory.WIREFRAME_MATERIAL_KEY).node)
+        add(
+            LineSegments(
+                WireframeGeometry(geometry as BufferGeometry),
+                material
+            ).apply {
+                name = "wireframe"
+            }
+        )
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvas.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvas.kt
new file mode 100644
index 00000000..08717e92
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvas.kt
@@ -0,0 +1,215 @@
+package hep.dataforge.vis.spatial.three
+
+import hep.dataforge.context.Context
+import hep.dataforge.meta.Meta
+import hep.dataforge.meta.get
+import hep.dataforge.meta.string
+import hep.dataforge.names.Name
+import hep.dataforge.names.plus
+import hep.dataforge.names.toName
+import hep.dataforge.output.Renderer
+import hep.dataforge.vis.common.Colors
+import hep.dataforge.vis.spatial.VisualObject3D
+import hep.dataforge.vis.spatial.specifications.CameraSpec
+import hep.dataforge.vis.spatial.specifications.CanvasSpec
+import hep.dataforge.vis.spatial.specifications.ControlsSpec
+import hep.dataforge.vis.spatial.three.ThreeMaterials.HIGHLIGHT_MATERIAL
+import info.laht.threekt.WebGLRenderer
+import info.laht.threekt.cameras.PerspectiveCamera
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.core.Raycaster
+import info.laht.threekt.external.controls.OrbitControls
+import info.laht.threekt.external.controls.TrackballControls
+import info.laht.threekt.geometries.EdgesGeometry
+import info.laht.threekt.helpers.AxesHelper
+import info.laht.threekt.math.Vector2
+import info.laht.threekt.objects.LineSegments
+import info.laht.threekt.objects.Mesh
+import info.laht.threekt.scenes.Scene
+import org.w3c.dom.HTMLElement
+import org.w3c.dom.Node
+import org.w3c.dom.events.MouseEvent
+import kotlin.browser.window
+import kotlin.dom.clear
+import kotlin.math.cos
+import kotlin.math.max
+import kotlin.math.sin
+
+/**
+ *
+ */
+class ThreeCanvas(element: HTMLElement, val three: ThreePlugin, val spec: CanvasSpec) : Renderer<VisualObject3D> {
+
+    override val context: Context get() = three.context
+
+    var content: VisualObject3D? = null
+        private set
+
+    private var root: Object3D? = null
+
+    private val raycaster = Raycaster()
+    private val mousePosition: Vector2 = Vector2()
+
+    var clickListener: ((Name) -> Unit)? = null
+
+    val axes = AxesHelper(spec.axes.size.toInt()).apply {
+        visible = spec.axes.visible
+    }
+
+    val scene: Scene = Scene().apply {
+        add(axes)
+    }
+
+    val camera = buildCamera(spec.camera)
+
+    init {
+        element.clear()
+
+        //Attach listener to track mouse changes
+        element.addEventListener("mousemove", { event ->
+            (event as? MouseEvent)?.run {
+                val rect = element.getBoundingClientRect()
+                mousePosition.x = ((event.clientX - rect.left) / element.clientWidth) * 2 - 1
+                mousePosition.y = -((event.clientY - rect.top) / element.clientHeight) * 2 + 1
+            }
+        }, false)
+
+        element.addEventListener("mousedown", { event ->
+            val mesh = pick()
+            if (mesh != null) {
+                val name = mesh.fullName()
+                clickListener?.invoke(name)
+            }
+        }, false)
+
+        camera.aspect = 1.0
+
+        val renderer = WebGLRenderer { antialias = true }.apply {
+            setClearColor(Colors.skyblue, 1)
+
+        }
+
+        addControls(renderer.domElement, spec.controls)
+
+        fun animate() {
+            val mesh = pick()
+
+            if (mesh != null && highlighted != mesh) {
+                highlighted?.toggleHighlight(false)
+                mesh.toggleHighlight(true)
+            }
+
+            window.requestAnimationFrame {
+                animate()
+            }
+            renderer.render(scene, camera)
+        }
+
+        element.appendChild(renderer.domElement)
+
+        renderer.setSize(max(spec.minSize, element.offsetWidth), max(spec.minSize, element.offsetWidth))
+
+        element.onresize = {
+            renderer.setSize(element.offsetWidth, element.offsetWidth)
+            camera.updateProjectionMatrix()
+        }
+
+        animate()
+    }
+
+    private fun pick(): Mesh? {
+        // update the picking ray with the camera and mouse position
+        raycaster.setFromCamera(mousePosition, camera)
+
+        // calculate objects intersecting the picking ray
+        return root?.let { root ->
+            val intersects = raycaster.intersectObject(root, true)
+            val intersect = intersects.firstOrNull()
+            intersect?.`object` as? Mesh
+        }
+    }
+
+    /**
+     * Resolve full name of the object relative to the global root
+     */
+    private fun Object3D.fullName(): Name {
+        if (root == null) error("Can't resolve element name without the root")
+        return if (parent == root) {
+            name.toName()
+        } else {
+            (parent?.fullName() ?: Name.EMPTY) + name.toName()
+        }
+    }
+
+    private fun buildCamera(spec: CameraSpec) = PerspectiveCamera(
+        spec.fov,
+        1.0,
+        spec.nearClip,
+        spec.farClip
+    ).apply {
+        translateX(spec.distance * sin(spec.zenith) * sin(spec.azimuth))
+        translateY(spec.distance * cos(spec.zenith))
+        translateZ(spec.distance * sin(spec.zenith) * cos(spec.azimuth))
+    }
+
+    private fun addControls(element: Node, controlsSpec: ControlsSpec) {
+        when (controlsSpec["type"].string) {
+            "trackball" -> TrackballControls(camera, element)
+            else -> OrbitControls(camera, element)
+        }
+    }
+
+    override fun render(obj: VisualObject3D, meta: Meta) {
+        //clear old root
+        scene.children.find { it.name == "@root" }?.let {
+            scene.remove(it)
+        }
+
+        val object3D = three.buildObject3D(obj)
+        object3D.name = "@root"
+        scene.add(object3D)
+        content = obj
+        root = object3D
+    }
+
+    private var highlighted: Mesh? = null
+
+    /**
+     * Toggle highlight for the given [Mesh] object
+     */
+    private fun Mesh.toggleHighlight(highlight: Boolean) {
+        if (highlight) {
+            val edges = LineSegments(
+                EdgesGeometry(geometry as BufferGeometry),
+                HIGHLIGHT_MATERIAL
+            ).apply {
+                name = "@highlight"
+            }
+            add(edges)
+            highlighted = this
+        } else {
+            val highlightEdges = children.find { it.name == "@highlight" }
+            highlightEdges?.let { remove(it) }
+        }
+    }
+
+    /**
+     * Toggle highlight for element with given name
+     */
+    fun highlight(name: Name?) {
+        if (name == null) {
+            highlighted?.toggleHighlight(false)
+            highlighted = null
+            return
+        }
+        val mesh = root?.findChild(name) as? Mesh
+        if (mesh != null && highlighted != mesh) {
+            highlighted?.toggleHighlight(false)
+            mesh.toggleHighlight(true)
+        }
+    }
+}
+
+fun ThreePlugin.output(element: HTMLElement, spec: CanvasSpec = CanvasSpec.empty()): ThreeCanvas =
+    ThreeCanvas(element, this, spec)
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvasLabelFactory.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvasLabelFactory.kt
new file mode 100644
index 00000000..23a1bf3a
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCanvasLabelFactory.kt
@@ -0,0 +1,56 @@
+package hep.dataforge.vis.spatial.three
+
+import hep.dataforge.vis.spatial.Label3D
+import hep.dataforge.vis.spatial.color
+import info.laht.threekt.DoubleSide
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.geometries.PlaneBufferGeometry
+import info.laht.threekt.materials.MeshBasicMaterial
+import info.laht.threekt.objects.Mesh
+import info.laht.threekt.textures.Texture
+import org.w3c.dom.CanvasRenderingContext2D
+import org.w3c.dom.CanvasTextBaseline
+import org.w3c.dom.HTMLCanvasElement
+import org.w3c.dom.MIDDLE
+import kotlin.browser.document
+import kotlin.reflect.KClass
+
+/**
+ * Using example from http://stemkoski.github.io/Three.js/Texture-From-Canvas.html
+ */
+object ThreeCanvasLabelFactory: ThreeFactory<Label3D> {
+    override val type: KClass<in Label3D> get() = Label3D::class
+
+    override fun invoke(obj: Label3D): Object3D {
+        val canvas = document.createElement("canvas") as HTMLCanvasElement
+        val context = canvas.getContext("2d") as CanvasRenderingContext2D
+        context.font = "Bold ${obj.fontSize}pt ${obj.fontFamily}"
+        context.fillStyle = obj.color ?: "black"
+        context.textBaseline = CanvasTextBaseline.MIDDLE
+        val metrics = context.measureText(obj.text)
+        //canvas.width = metrics.width.toInt()
+
+
+        context.fillText(obj.text, (canvas.width - metrics.width)/2, 0.5*canvas.height)
+
+
+        // canvas contents will be used for a texture
+        val texture = Texture(canvas)
+        texture.needsUpdate = true
+
+        val material = MeshBasicMaterial().apply {
+            map = texture
+            side = DoubleSide
+            transparent = true
+        }
+
+        val mesh = Mesh(
+            PlaneBufferGeometry(canvas.width, canvas.height),
+            material
+        )
+
+        mesh.updatePosition(obj)
+
+        return mesh
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCompositeFactory.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCompositeFactory.kt
index b6ee8852..8b88208d 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCompositeFactory.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeCompositeFactory.kt
@@ -6,7 +6,7 @@ import info.laht.threekt.core.BufferGeometry
 import info.laht.threekt.objects.Mesh
 
 /**
- * This should be inner, becaulse it uses object builder
+ * This should be inner, because it uses object builder
  */
 class ThreeCompositeFactory(val three: ThreePlugin) : MeshThreeFactory<Composite>(Composite::class) {
 
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeFactory.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeFactory.kt
index c50f5139..65dc71ef 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeFactory.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeFactory.kt
@@ -1,19 +1,15 @@
 package hep.dataforge.vis.spatial.three
 
-import hep.dataforge.meta.boolean
-import hep.dataforge.meta.int
-import hep.dataforge.meta.node
-import hep.dataforge.names.plus
+import hep.dataforge.names.Name
 import hep.dataforge.names.startsWith
 import hep.dataforge.provider.Type
-import hep.dataforge.vis.common.asName
+import hep.dataforge.vis.common.VisualObject
 import hep.dataforge.vis.spatial.*
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_KEY
 import hep.dataforge.vis.spatial.three.ThreeFactory.Companion.TYPE
+import hep.dataforge.vis.spatial.three.ThreeMaterials.getMaterial
 import info.laht.threekt.core.BufferGeometry
 import info.laht.threekt.core.Object3D
-import info.laht.threekt.geometries.EdgesGeometry
-import info.laht.threekt.geometries.WireframeGeometry
-import info.laht.threekt.objects.LineSegments
 import info.laht.threekt.objects.Mesh
 import kotlin.reflect.KClass
 
@@ -21,9 +17,9 @@ import kotlin.reflect.KClass
  * Builder and updater for three.js object
  */
 @Type(TYPE)
-interface ThreeFactory<T : VisualObject3D> {
+interface ThreeFactory<in T : VisualObject> {
 
-    val type: KClass<out T>
+    val type: KClass<in T>
 
     operator fun invoke(obj: T): Object3D
 
@@ -35,112 +31,41 @@ interface ThreeFactory<T : VisualObject3D> {
 /**
  * Update position, rotation and visibility
  */
-internal fun Object3D.updatePosition(obj: VisualObject3D) {
+fun Object3D.updatePosition(obj: VisualObject3D) {
     visible = obj.visible ?: true
     position.set(obj.x, obj.y, obj.z)
-//    obj.rotation?.let{
-//        rotateZ(it.z)
-//        rotateX(it.x)
-//        rotateY(it.y)
-//    }
     setRotationFromEuler(obj.euler)
     scale.set(obj.scaleX, obj.scaleY, obj.scaleZ)
     updateMatrix()
 }
 
-internal fun <T : VisualObject3D> Mesh.updateFrom(obj: T) {
-    matrixAutoUpdate = false
-
-    //inherited edges definition, enabled by default
-    if (obj.getProperty(MeshThreeFactory.EDGES_ENABLED_KEY).boolean != false) {
-        val material = obj.getProperty(MeshThreeFactory.EDGES_MATERIAL_KEY).node?.jsMaterial() ?: Materials.DEFAULT
-        add(LineSegments(EdgesGeometry(geometry as BufferGeometry), material))
-    }
-
-    //inherited wireframe definition, disabled by default
-    if (obj.getProperty(MeshThreeFactory.WIREFRAME_ENABLED_KEY).boolean == true) {
-        val material = obj.getProperty(MeshThreeFactory.WIREFRAME_MATERIAL_KEY).node?.jsMaterial() ?: Materials.DEFAULT
-        add(LineSegments(WireframeGeometry(geometry as BufferGeometry), material))
-    }
-
-    //set position for mesh
-    updatePosition(obj)
-
-    obj.getProperty(MeshThreeFactory.LAYER_KEY).int?.let {
-        layers.set(it)
-    }
-}
+///**
+// * Unsafe invocation of a factory
+// */
+//operator fun <T : VisualObject3D> ThreeFactory<T>.invoke(obj: Any): Object3D {
+//    if (type.isInstance(obj)) {
+//        @Suppress("UNCHECKED_CAST")
+//        return invoke(obj as T)
+//    } else {
+//        error("The object of type ${obj::class} could not be rendered by this factory")
+//    }
+//}
 
 /**
- * Unsafe invocation of a factory
+ * Update non-position non-geometry property
  */
-operator fun <T : VisualObject3D> ThreeFactory<T>.invoke(obj: Any): Object3D {
-    if (type.isInstance(obj)) {
-        @Suppress("UNCHECKED_CAST")
-        return invoke(obj as T)
-    } else {
-        error("The object of type ${obj::class} could not be rendered by this factory")
-    }
-}
-
-/**
- * Basic geometry-based factory
- */
-abstract class MeshThreeFactory<T : VisualObject3D>(override val type: KClass<out T>) : ThreeFactory<T> {
-    /**
-     * Build a geometry for an object
-     */
-    abstract fun buildGeometry(obj: T): BufferGeometry
-
-
-    override fun invoke(obj: T): Mesh {
-        //create mesh from geometry
-        return buildMesh<T>(obj) { buildGeometry(it) }
-    }
-
-    companion object {
-        val EDGES_KEY = "edges".asName()
-        val WIREFRAME_KEY = "wireframe".asName()
-        val ENABLED_KEY = "enabled".asName()
-        val EDGES_ENABLED_KEY = EDGES_KEY + ENABLED_KEY
-        val EDGES_MATERIAL_KEY = EDGES_KEY + VisualObject3D.MATERIAL_KEY
-        val WIREFRAME_ENABLED_KEY = WIREFRAME_KEY + ENABLED_KEY
-        val WIREFRAME_MATERIAL_KEY = WIREFRAME_KEY + VisualObject3D.MATERIAL_KEY
-        val LAYER_KEY = "layer".asName()
-
-        fun <T : VisualObject3D> buildMesh(obj: T, geometryBuilder: (T) -> BufferGeometry): Mesh {
-            //TODO add caching for geometries using templates
-            val geometry = geometryBuilder(obj)
-
-            //JS sometimes tries to pass Geometry as BufferGeometry
-            @Suppress("USELESS_IS_CHECK") if (geometry !is BufferGeometry) error("BufferGeometry expected")
-
-            val mesh = Mesh(geometry, obj.material.jsMaterial())
-
-            mesh.updateFrom(obj)
-
-            //add listener to object properties
-            obj.onPropertyChange(this) { name, _, _ ->
-                if (name.startsWith(VisualObject3D.MATERIAL_KEY)) {
-                    //updated material
-                    mesh.material = obj.material.jsMaterial()
-                } else if (
-                    name.startsWith(VisualObject3D.position) ||
-                    name.startsWith(VisualObject3D.rotation) ||
-                    name.startsWith(VisualObject3D.scale)
-                ) {
-                    //update position of mesh using this object
-                    mesh.updatePosition(obj)
-                } else if (name == VisualObject3D.VISIBLE_KEY) {
-                    mesh.visible = obj.visible ?: true
-                } else {
-                    //full update
-                    mesh.geometry = geometryBuilder(obj)
-                    mesh.material = obj.material.jsMaterial()
-                }
-            }
-            return mesh
-        }
+fun Object3D.updateProperty(source: VisualObject3D, propertyName: Name) {
+    if (this is Mesh && propertyName.startsWith(MATERIAL_KEY)) {
+        this.material = getMaterial(source)
+    } else if (
+        propertyName.startsWith(VisualObject3D.position)
+        || propertyName.startsWith(VisualObject3D.rotation)
+        || propertyName.startsWith(VisualObject3D.scale)
+    ) {
+        //update position of mesh using this object
+        updatePosition(source)
+    } else if (propertyName == VisualObject3D.VISIBLE_KEY) {
+        visible = source.visible ?: true
     }
 }
 
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeGeometryBuilder.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeGeometryBuilder.kt
index a7a6b606..c263e031 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeGeometryBuilder.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeGeometryBuilder.kt
@@ -10,6 +10,9 @@ import info.laht.threekt.core.Face3
 import info.laht.threekt.core.Geometry
 import info.laht.threekt.math.Vector3
 
+/**
+ * An implementation of geometry builder for Three.js [BufferGeometry]
+ */
 class ThreeGeometryBuilder : GeometryBuilder<BufferGeometry> {
 
     private val vertices = ArrayList<Point3D>()
@@ -31,7 +34,7 @@ class ThreeGeometryBuilder : GeometryBuilder<BufferGeometry> {
     override fun face(vertex1: Point3D, vertex2: Point3D, vertex3: Point3D, normal: Point3D?, meta: Meta) {
         val face = Face3(append(vertex1), append(vertex2), append(vertex3), normal ?: Vector3(0, 0, 0))
         meta["materialIndex"].int?.let { face.materialIndex = it }
-        meta["color"]?.color()?.let { face.color = it }
+        meta["color"]?.getColor()?.let { face.color = it }
         faces.add(face)
     }
 
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeLabelFactory.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeLabelFactory.kt
new file mode 100644
index 00000000..c3e1024a
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeLabelFactory.kt
@@ -0,0 +1,33 @@
+package hep.dataforge.vis.spatial.three
+
+import hep.dataforge.js.jsObject
+import hep.dataforge.meta.MetaItem
+import hep.dataforge.names.Name
+import hep.dataforge.vis.spatial.Label3D
+import hep.dataforge.vis.spatial.three.ThreeMaterials.getMaterial
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.geometries.TextBufferGeometry
+import info.laht.threekt.objects.Mesh
+import kotlin.reflect.KClass
+
+/**
+*
+ */
+object ThreeLabelFactory : ThreeFactory<Label3D> {
+    override val type: KClass<in Label3D> get() = Label3D::class
+
+    override fun invoke(obj: Label3D): Object3D {
+        val textGeo = TextBufferGeometry( obj.text, jsObject {
+            font =  obj.fontFamily
+            size = 20
+            height = 1
+            curveSegments = 1
+        } )
+        return Mesh(textGeo, getMaterial(obj)).apply {
+            updatePosition(obj)
+            obj.onPropertyChange(this@ThreeLabelFactory){name: Name, before: MetaItem<*>?, after: MetaItem<*>? ->
+                //TODO
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeLineFactory.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeLineFactory.kt
new file mode 100644
index 00000000..d2e8d52e
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeLineFactory.kt
@@ -0,0 +1,37 @@
+package hep.dataforge.vis.spatial.three
+
+import hep.dataforge.meta.node
+import hep.dataforge.vis.spatial.PolyLine
+import hep.dataforge.vis.spatial.color
+import hep.dataforge.vis.spatial.three.ThreeMaterials.DEFAULT_LINE_COLOR
+import info.laht.threekt.core.Geometry
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.math.Color
+import info.laht.threekt.objects.LineSegments
+import kotlin.reflect.KClass
+
+object ThreeLineFactory : ThreeFactory<PolyLine> {
+    override val type: KClass<PolyLine> get() = PolyLine::class
+
+    override fun invoke(obj: PolyLine): Object3D {
+        val geometry = Geometry().apply {
+            vertices = obj.points.toTypedArray()
+        }
+
+        val material =
+            ThreeMaterials.getLineMaterial(obj.getProperty(MeshThreeFactory.EDGES_MATERIAL_KEY).node)
+
+        material.linewidth = obj.thickness.toDouble()
+        material.color = obj.color?.let { Color(it) }?: DEFAULT_LINE_COLOR
+
+        return LineSegments(geometry, material).apply {
+            updatePosition(obj)
+            //layers.enable(obj.layer)
+            //add listener to object properties
+            obj.onPropertyChange(this) { propertyName, _, _ ->
+                updateProperty(obj, propertyName)
+            }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeMaterials.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeMaterials.kt
new file mode 100644
index 00000000..ff3ddcf9
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeMaterials.kt
@@ -0,0 +1,84 @@
+package hep.dataforge.vis.spatial.three
+
+import hep.dataforge.meta.*
+import hep.dataforge.values.ValueType
+import hep.dataforge.vis.common.Colors
+import hep.dataforge.vis.spatial.Material3D
+import hep.dataforge.vis.spatial.VisualObject3D
+import info.laht.threekt.materials.LineBasicMaterial
+import info.laht.threekt.materials.Material
+import info.laht.threekt.materials.MeshBasicMaterial
+import info.laht.threekt.materials.MeshPhongMaterial
+import info.laht.threekt.math.Color
+
+
+object ThreeMaterials {
+    val DEFAULT_COLOR = Color(Colors.darkgreen)
+    val DEFAULT = MeshBasicMaterial().apply {
+        color.set(DEFAULT_COLOR)
+    }
+    val DEFAULT_LINE_COLOR = Color(Colors.black)
+    val DEFAULT_LINE = LineBasicMaterial().apply {
+        color.set(DEFAULT_LINE_COLOR)
+    }
+
+    val HIGHLIGHT_MATERIAL = LineBasicMaterial().apply {
+        color.set(Colors.ivory)
+        linewidth = 8.0
+    }
+
+    fun getLineMaterial(meta: Meta?): LineBasicMaterial {
+        if (meta == null) return DEFAULT_LINE
+        return LineBasicMaterial().apply {
+            color = meta[Material3D.COLOR_KEY]?.getColor() ?: DEFAULT_LINE_COLOR
+            opacity = meta[Material3D.OPACITY_KEY].double ?: 1.0
+            transparent = opacity < 1.0
+            linewidth = meta["thickness"].double ?: 1.0
+        }
+    }
+
+    fun getMaterial(visualObject3D: VisualObject3D): Material {
+        val meta = visualObject3D.getProperty(Material3D.MATERIAL_KEY).node ?: return ThreeMaterials.DEFAULT
+        return if (meta[Material3D.SPECULAR_COLOR] != null) {
+            MeshPhongMaterial().apply {
+                color = meta[Material3D.COLOR_KEY]?.getColor() ?: DEFAULT_COLOR
+                specular = meta[Material3D.SPECULAR_COLOR]!!.getColor()
+                opacity = meta[Material3D.OPACITY_KEY]?.double ?: 1.0
+                transparent = opacity < 1.0
+                wireframe = meta[Material3D.WIREFRAME_KEY].boolean ?: false
+                needsUpdate = true
+            }
+        } else {
+            MeshBasicMaterial().apply {
+                color = meta[Material3D.COLOR_KEY]?.getColor() ?: DEFAULT_COLOR
+                opacity = meta[Material3D.OPACITY_KEY]?.double ?: 1.0
+                transparent = opacity < 1.0
+                wireframe = meta[Material3D.WIREFRAME_KEY].boolean ?: false
+                needsUpdate = true
+            }
+        }
+    }
+
+}
+
+/**
+ * Infer color based on meta item
+ */
+fun MetaItem<*>.getColor(): Color {
+    return when (this) {
+        is MetaItem.ValueItem -> if (this.value.type == ValueType.NUMBER) {
+            val int = value.number.toInt()
+            Color(int)
+        } else {
+            Color(this.value.string)
+        }
+        is MetaItem.NodeItem -> {
+            Color(
+                node[Colors.RED_KEY]?.int ?: 0,
+                node[Colors.GREEN_KEY]?.int ?: 0,
+                node[Colors.BLUE_KEY]?.int ?: 0
+            )
+        }
+    }
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeOutput.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeOutput.kt
deleted file mode 100644
index 81de1a89..00000000
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeOutput.kt
+++ /dev/null
@@ -1,71 +0,0 @@
-package hep.dataforge.vis.spatial.three
-
-import hep.dataforge.context.Context
-import hep.dataforge.meta.*
-import hep.dataforge.output.Output
-import hep.dataforge.vis.common.Colors
-import hep.dataforge.vis.hmr.require
-import hep.dataforge.vis.spatial.VisualObject3D
-import info.laht.threekt.WebGLRenderer
-import info.laht.threekt.helpers.AxesHelper
-import info.laht.threekt.lights.AmbientLight
-import info.laht.threekt.scenes.Scene
-import org.w3c.dom.Element
-import kotlin.browser.window
-
-private val elementResizeEvent = require("element-resize-event")
-
-class ThreeOutput(val three: ThreePlugin, val meta: Meta = EmptyMeta) : Output<VisualObject3D> {
-
-    override val context: Context get() = three.context
-
-    val scene: Scene = Scene().apply {
-        add(AmbientLight())
-        meta["axis"]?.let {
-            val axesHelper = AxesHelper(it.node["size"].int ?: 1)
-            add(axesHelper)
-        }
-    }
-
-    private val camera = three.buildCamera(meta["camera"].node ?: EmptyMeta)
-
-    fun attach(element: Element, computeWidth: Element.() -> Int = { element.clientWidth }) {
-        val width by meta.number(computeWidth(element)).int
-
-        val height: Int = (width / camera.aspect).toInt()
-
-        val renderer = WebGLRenderer { antialias = true }.apply {
-            setClearColor(Colors.skyblue, 1)
-            setSize(width, height)
-        }
-
-        three.addControls(camera, renderer.domElement, meta["controls"].node ?: EmptyMeta)
-
-        fun animate() {
-            window.requestAnimationFrame {
-                animate()
-            }
-            renderer.render(scene, camera)
-        }
-
-        elementResizeEvent(element) {
-            camera.updateProjectionMatrix()
-            val newWidth = computeWidth(element)
-            renderer.setSize(newWidth, (newWidth / camera.aspect).toInt())
-        }
-
-        element.replaceWith(renderer.domElement)
-        animate()
-    }
-
-    override fun render(obj: VisualObject3D, meta: Meta) {
-        scene.add(three.buildObject3D(obj))
-    }
-}
-
-fun ThreePlugin.output(element: Element? = null, meta: Meta = EmptyMeta, override: MetaBuilder.() -> Unit = {}) =
-    ThreeOutput(this, buildMeta(meta, override)).apply {
-        if(element!=null){
-            attach(element)
-        }
-    }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreePlugin.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreePlugin.kt
index 50de48f4..11117b27 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreePlugin.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreePlugin.kt
@@ -1,19 +1,14 @@
 package hep.dataforge.vis.spatial.three
 
-import hep.dataforge.context.AbstractPlugin
-import hep.dataforge.context.PluginFactory
-import hep.dataforge.context.PluginTag
-import hep.dataforge.context.content
-import hep.dataforge.meta.*
+import hep.dataforge.context.*
+import hep.dataforge.meta.Meta
+import hep.dataforge.names.*
+import hep.dataforge.vis.common.VisualObject
 import hep.dataforge.vis.spatial.*
-import info.laht.threekt.cameras.Camera
-import info.laht.threekt.cameras.PerspectiveCamera
 import info.laht.threekt.core.Object3D
-import info.laht.threekt.external.controls.OrbitControls
-import info.laht.threekt.external.controls.TrackballControls
-import org.w3c.dom.Node
 import kotlin.collections.set
 import kotlin.reflect.KClass
+import info.laht.threekt.objects.Group as ThreeGroup
 
 class ThreePlugin : AbstractPlugin() {
     override val tag: PluginTag get() = Companion.tag
@@ -28,31 +23,81 @@ class ThreePlugin : AbstractPlugin() {
         objectFactories[Convex::class] = ThreeConvexFactory
         objectFactories[Sphere::class] = ThreeSphereFactory
         objectFactories[ConeSegment::class] = ThreeCylinderFactory
+        objectFactories[PolyLine::class] = ThreeLineFactory
+        objectFactories[Label3D::class] = ThreeCanvasLabelFactory
     }
 
-    private fun findObjectFactory(type: KClass<out VisualObject3D>): ThreeFactory<*>? {
-        return objectFactories[type]
-            ?: context.content<ThreeFactory<*>>(ThreeFactory.TYPE).values.find { it.type == type }
+    @Suppress("UNCHECKED_CAST")
+    private fun findObjectFactory(type: KClass<out VisualObject>): ThreeFactory<VisualObject3D>? {
+        return (objectFactories[type]
+            ?: context.content<ThreeFactory<*>>(ThreeFactory.TYPE).values.find { it.type == type })
+                as ThreeFactory<VisualObject3D>?
     }
 
     fun buildObject3D(obj: VisualObject3D): Object3D {
         return when (obj) {
-            is VisualGroup3D -> Group(obj.mapNotNull {
-                try {
-                    buildObject3D(it)
-                } catch (ex: Throwable) {
-                    console.error(ex)
-                    logger.error(ex) { "Failed to render $it" }
-                    null
+            is ThreeVisualObject -> obj.toObject3D()
+            is Proxy -> proxyFactory(obj)
+            is VisualGroup3D -> {
+                val group = ThreeGroup()
+                obj.children.forEach { (token, child) ->
+                    if (child is VisualObject3D && child.ignore != true) {
+                        try {
+                            val object3D = buildObject3D(child)
+                            group[token] = object3D
+                        } catch (ex: Throwable) {
+                            logger.error(ex) { "Failed to render $child" }
+                        }
+                    }
+                }
+
+                group.apply {
+                    updatePosition(obj)
+                    //obj.onChildrenChange()
+
+                    obj.onPropertyChange(this) { name, _, _ ->
+                        if (
+                            name.startsWith(VisualObject3D.position) ||
+                            name.startsWith(VisualObject3D.rotation) ||
+                            name.startsWith(VisualObject3D.scale)
+                        ) {
+                            //update position of mesh using this object
+                            updatePosition(obj)
+                        } else if (name == VisualObject3D.VISIBLE_KEY) {
+                            visible = obj.visible ?: true
+                        }
+                    }
+
+                    obj.onChildrenChange(this) { name, child ->
+                        if (name.isEmpty()) {
+                            logger.error { "Children change with empty namr on $group" }
+                            return@onChildrenChange
+                        }
+
+                        val parentName = name.cutLast()
+                        val childName = name.last()!!
+
+                        //removing old object
+                        findChild(name)?.let { oldChild ->
+                            oldChild.parent?.remove(oldChild)
+                        }
+
+                        //adding new object
+                        if (child != null && child is VisualObject3D) {
+                            try {
+                                val object3D = buildObject3D(child)
+                                set(name, object3D)
+                            } catch (ex: Throwable) {
+                                logger.error(ex) { "Failed to render $child" }
+                            }
+                        }
+                    }
                 }
-            }).apply {
-                updatePosition(obj)
             }
             is Composite -> compositeFactory(obj)
-            is Proxy -> proxyFactory(obj)
             else -> {
                 //find specialized factory for this type if it is present
-                val factory = findObjectFactory(obj::class)
+                val factory: ThreeFactory<VisualObject3D>? = findObjectFactory(obj::class)
                 when {
                     factory != null -> factory(obj)
                     obj is Shape -> ThreeShapeFactory(obj)
@@ -62,30 +107,44 @@ class ThreePlugin : AbstractPlugin() {
         }
     }
 
-    fun buildCamera(meta: Meta) = PerspectiveCamera(
-        meta["fov"].int ?: 75,
-        meta["aspect"].double ?: 1.0,
-        meta["nearClip"].double ?: World.CAMERA_NEAR_CLIP,
-        meta["farClip"].double ?: World.CAMERA_FAR_CLIP
-    ).apply {
-        position.setZ(World.CAMERA_INITIAL_DISTANCE)
-        rotation.set(
-            World.CAMERA_INITIAL_X_ANGLE,
-            World.CAMERA_INITIAL_Y_ANGLE,
-            World.CAMERA_INITIAL_Z_ANGLE
-        )
-    }
-
-    fun addControls(camera: Camera, element: Node, meta: Meta) {
-        when (meta["type"].string) {
-            "trackball" -> TrackballControls(camera, element)
-            else -> OrbitControls(camera, element)
-        }
-    }
-
     companion object : PluginFactory<ThreePlugin> {
         override val tag = PluginTag("visual.three", PluginTag.DATAFORGE_GROUP)
         override val type = ThreePlugin::class
-        override fun invoke(meta: Meta) = ThreePlugin()
+        override fun invoke(meta: Meta, context: Context) = ThreePlugin()
+    }
+}
+
+internal operator fun Object3D.set(token: NameToken, object3D: Object3D) {
+    object3D.name = token.toString()
+    add(object3D)
+}
+
+internal fun Object3D.getOrCreateGroup(name: Name): Object3D {
+    return when {
+        name.isEmpty() -> this
+        name.length == 1 -> {
+            val token = name.first()!!
+            children.find { it.name == token.toString() } ?: info.laht.threekt.objects.Group().also { group ->
+                group.name = token.toString()
+                this.add(group)
+            }
+        }
+        else -> getOrCreateGroup(name.first()!!.asName()).getOrCreateGroup(name.cutFirst())
+    }
+}
+
+internal operator fun Object3D.set(name: Name, obj: Object3D) {
+    when (name.length) {
+        0 -> error("Can't set object with an empty name")
+        1 -> set(name.first()!!, obj)
+        else -> getOrCreateGroup(name.cutLast())[name.last()!!] = obj
+    }
+}
+
+internal fun Object3D.findChild(name: Name): Object3D? {
+    return when {
+        name.isEmpty() -> this
+        name.length == 1 -> this.children.find { it.name == name.first()!!.toString() }
+        else -> findChild(name.first()!!.asName())?.findChild(name.cutFirst())
     }
 }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeProxyFactory.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeProxyFactory.kt
index bb037270..84fcb86e 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeProxyFactory.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeProxyFactory.kt
@@ -1,6 +1,8 @@
 package hep.dataforge.vis.spatial.three
 
+import hep.dataforge.names.toName
 import hep.dataforge.vis.spatial.Proxy
+import hep.dataforge.vis.spatial.Proxy.Companion.PROXY_CHILD_PROPERTY_PREFIX
 import hep.dataforge.vis.spatial.VisualObject3D
 import info.laht.threekt.core.Object3D
 
@@ -10,15 +12,27 @@ class ThreeProxyFactory(val three: ThreePlugin) : ThreeFactory<Proxy> {
     override val type = Proxy::class
 
     override fun invoke(obj: Proxy): Object3D {
-        val template = obj.template
+        val template = obj.prototype
         val cachedObject = cache.getOrPut(template) {
             three.buildObject3D(template)
         }
 
         //val mesh = Mesh(templateMesh.geometry as BufferGeometry, templateMesh.material)
-        val mesh = cachedObject.clone()
+        val object3D = cachedObject.clone()
+        object3D.updatePosition(obj)
 
-        mesh.updatePosition(obj)
-        return mesh
+        obj.onPropertyChange(this) { name, _, _ ->
+            if (name.first()?.body == PROXY_CHILD_PROPERTY_PREFIX) {
+                val childName = name.first()?.index?.toName() ?: error("Wrong syntax for proxy child property: '$name'")
+                val propertyName = name.cutFirst()
+                val proxyChild = obj[childName] as? VisualObject3D ?: error("Proxy child with name '$childName' not found or not a 3D object")
+                val child = object3D.findChild(childName)?: error("Object child with name '$childName' not found")
+                child.updateProperty(proxyChild, propertyName)
+            } else {
+                object3D.updateProperty(obj, name)
+            }
+        }
+
+        return object3D
     }
 }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeVisualObject.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeVisualObject.kt
new file mode 100644
index 00000000..5970a76d
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/ThreeVisualObject.kt
@@ -0,0 +1,34 @@
+@file:UseSerializers(Point3DSerializer::class)
+
+package hep.dataforge.vis.spatial.three
+
+import hep.dataforge.io.serialization.ConfigSerializer
+import hep.dataforge.meta.Config
+import hep.dataforge.vis.common.AbstractVisualObject
+import hep.dataforge.vis.spatial.Point3D
+import hep.dataforge.vis.spatial.Point3DSerializer
+import hep.dataforge.vis.spatial.VisualObject3D
+import info.laht.threekt.core.Object3D
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.UseSerializers
+
+/**
+ * A custom visual object that has its own Three.js renderer
+ */
+interface ThreeVisualObject : VisualObject3D {
+    fun toObject3D(): Object3D
+}
+
+@Serializable
+class CustomThreeVisualObject(val threeFactory: ThreeFactory<VisualObject3D>) : AbstractVisualObject(),
+    ThreeVisualObject {
+    override var position: Point3D? = null
+    override var rotation: Point3D? = null
+    override var scale: Point3D? = null
+
+    @Serializable(ConfigSerializer::class)
+    override var properties: Config? = null
+
+    override fun toObject3D(): Object3D = threeFactory(this)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/csg.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/csg.kt
index fa9a1c5b..036f729a 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/csg.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/csg.kt
@@ -16,6 +16,9 @@ import info.laht.threekt.math.Matrix4
 import info.laht.threekt.math.Vector3
 import info.laht.threekt.objects.Mesh
 
+/**
+ * Constructive Solid Geometry
+ */
 open external class CSG {
     open var polygons: Array<Polygon>
     open fun clone(): CSG
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/outputConfig.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/outputConfig.kt
new file mode 100644
index 00000000..1f3c0a6d
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/outputConfig.kt
@@ -0,0 +1,87 @@
+package hep.dataforge.vis.spatial.three
+
+import hep.dataforge.js.requireJS
+import hep.dataforge.vis.js.editor.card
+import hep.dataforge.vis.spatial.Visual3DPlugin
+import hep.dataforge.vis.spatial.VisualGroup3D
+import kotlinx.html.InputType
+import kotlinx.html.TagConsumer
+import kotlinx.html.button
+import kotlinx.html.dom.append
+import kotlinx.html.js.*
+import org.w3c.dom.Element
+import org.w3c.dom.HTMLElement
+import org.w3c.dom.events.Event
+import org.w3c.files.Blob
+import org.w3c.files.BlobPropertyBag
+import kotlin.dom.clear
+
+private fun saveData(event: Event, fileName: String, mimeType: String = "text/plain", dataBuilder: () -> String) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    val fileSaver = requireJS("file-saver")
+    val blob = Blob(arrayOf(dataBuilder()), BlobPropertyBag("$mimeType;charset=utf-8"))
+    fileSaver.saveAs(blob, fileName)
+}
+
+fun Element.displayCanvasControls(canvas: ThreeCanvas, block: TagConsumer<HTMLElement>.() -> Unit = {}) {
+    clear()
+    append {
+        card("Settings") {
+            div("row") {
+                div("col-2") {
+                    label("checkbox-inline") {
+                        input(type = InputType.checkBox).apply {
+                            checked = canvas.axes.visible
+                            onChangeFunction = {
+                                canvas.axes.visible = checked
+                            }
+                        }
+                        +"Axes"
+                    }
+                }
+                div("col-1") {
+                    button {
+                        +"Export"
+                        onClickFunction = {
+                            val json = (canvas.content as? VisualGroup3D)?.let { group ->
+                                Visual3DPlugin.json.stringify(
+                                    VisualGroup3D.serializer(),
+                                    group
+                                )
+                            }
+                            if (json != null) {
+                                saveData(it, "object.json", "text/json"){
+                                    json
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        card("Layers") {
+            div("row") {
+                (0..11).forEach { layer ->
+                    div("col-1") {
+                        label { +layer.toString() }
+                        input(type = InputType.checkBox).apply {
+                            if (layer == 0) {
+                                checked = true
+                            }
+                            onChangeFunction = {
+                                if (checked) {
+                                    canvas.camera.layers.enable(layer)
+                                } else {
+                                    canvas.camera.layers.disable(layer)
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        block()
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/three.kt b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/three.kt
index 730e7550..9f3a7985 100644
--- a/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/three.kt
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/hep/dataforge/vis/spatial/three/three.kt
@@ -6,21 +6,16 @@ import hep.dataforge.meta.get
 import hep.dataforge.meta.node
 import hep.dataforge.vis.spatial.*
 import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.DirectGeometry
 import info.laht.threekt.core.Face3
 import info.laht.threekt.core.Geometry
-import info.laht.threekt.core.Object3D
+import info.laht.threekt.external.controls.OrbitControls
+import info.laht.threekt.materials.Material
 import info.laht.threekt.math.Euler
 import info.laht.threekt.math.Vector3
-
-/**
- * Utility methods for three.kt.
- * TODO move to three project
- */
-
-@Suppress("FunctionName")
-fun Group(children: Collection<Object3D>) = info.laht.threekt.objects.Group().apply {
-    children.forEach { this.add(it) }
-}
+import info.laht.threekt.objects.Mesh
+import info.laht.threekt.textures.Texture
+import kotlin.math.PI
 
 val VisualObject3D.euler get() = Euler(rotationX, rotationY, rotationZ, rotationOrder.name)
 
@@ -28,6 +23,8 @@ val MetaItem<*>.vector get() = Vector3(node["x"].float ?: 0f, node["y"].float ?:
 
 fun Geometry.toBufferGeometry(): BufferGeometry = BufferGeometry().apply { fromGeometry(this@toBufferGeometry) }
 
+internal fun Double.toRadians() = this * PI / 180
+
 fun CSG.toGeometry(): Geometry {
     val geom = Geometry()
 
@@ -43,7 +40,7 @@ fun CSG.toGeometry(): Geometry {
         }
 
         for (j in 3..polygon.vertices.size) {
-            val fc = Face3(v0, v0 + j - 2, v0 + j - 1, zero)
+            val fc = Face3(v0, v0 + j - 2, v0 + j - 1, World.ZERO)
             fc.vertexNormals = arrayOf(
                 Vector3().copy(pvs[0].normal),
                 Vector3().copy(pvs[j - 2].normal),
@@ -64,4 +61,19 @@ fun CSG.toGeometry(): Geometry {
     geom.computeBoundingSphere()
     geom.computeBoundingBox()
     return geom
+}
+
+internal fun Any.dispose() {
+    when (this) {
+        is Geometry -> dispose()
+        is BufferGeometry -> dispose()
+        is DirectGeometry -> dispose()
+        is Material -> dispose()
+        is Mesh -> {
+            geometry.dispose()
+            material.dispose()
+        }
+        is OrbitControls -> dispose()
+        is Texture -> dispose()
+    }
 }
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/THREE.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/THREE.kt
new file mode 100644
index 00000000..d3844561
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/THREE.kt
@@ -0,0 +1,156 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt
+
+
+external val REVISION: String
+external val CullFaceNone: Int
+external val CullFaceBack: Int
+external val CullFaceFront: Int
+external val CullFaceFrontBack: Int
+external val FrontFaceDirectionCW: Int
+external val FrontFaceDirectionCCW: Int
+external val BasicShadowMap: Int
+external val PCFShadowMap: Int
+external val PCFSoftShadowMap: Int
+external val FrontSide: Int
+external val BackSide: Int
+external val DoubleSide: Int
+external val FlatShading: Int
+external val SmoothShading: Int
+external val NoColors: Int
+external val FaceColors: Int
+external val VertexColors: Int
+external val NoBlending: Int
+external val NormalBlending: Int
+external val AdditiveBlending: Int
+external val SubtractiveBlending: Int
+external val MultiplyBlending: Int
+external val CustomBlending: Int
+external val AddEquation: Int
+external val SubtractEquation: Int
+external val ReverseSubtractEquation: Int
+external val MinEquation: Int
+external val MaxEquation: Int
+external val ZeroFactor: Int
+external val OneFactor: Int
+external val SrcColorFactor: Int
+external val OneMinusSrcColorFactor: Int
+external val SrcAlphaFactor: Int
+external val OneMinusSrcAlphaFactor: Int
+external val DstAlphaFactor: Int
+external val OneMinusDstAlphaFactor: Int
+external val DstColorFactor: Int
+external val OneMinusDstColorFactor: Int
+external val SrcAlphaSaturateFactor: Int
+external val NeverDepth: Int
+external val AlwaysDepth: Int
+external val LessDepth: Int
+external val LessEqualDepth: Int
+external val EqualDepth: Int
+external val GreaterEqualDepth: Int
+external val GreaterDepth: Int
+external val NotEqualDepth: Int
+external val MultiplyOperation: Int
+external val MixOperation: Int
+external val AddOperation: Int
+external val NoToneMapping: Int
+external val LinearToneMapping: Int
+external val ReinhardToneMapping: Int
+external val Uncharted2ToneMapping: Int
+external val CineonToneMapping: Int
+external val UVMapping: Int
+external val CubeReflectionMapping: Int
+external val CubeRefractionMapping: Int
+external val EquirectangularReflectionMapping: Int
+external val EquirectangularRefractionMapping: Int
+external val SphericalReflectionMapping: Int
+external val CubeUVReflectionMapping: Int
+external val CubeUVRefractionMapping: Int
+external val RepeatWrapping: Int
+external val ClampToEdgeWrapping: Int
+external val MirroredRepeatWrapping: Int
+external val NearestFilter: Int
+external val NearestMipMapNearestFilter: Int
+external val NearestMipMapLinearFilter: Int
+external val LinearFilter: Int
+external val LinearMipMapNearestFilter: Int
+external val LinearMipMapLinearFilter: Int
+external val UnsignedByteType: Int
+external val ByteType: Int
+external val ShortType: Int
+external val UnsignedShortType: Int
+external val IntType: Int
+external val UnsignedIntType: Int
+external val FloatType: Int
+external val HalfFloatType: Int
+external val UnsignedShort4444Type: Int
+external val UnsignedShort5551Type: Int
+external val UnsignedShort565Type: Int
+external val UnsignedInt248Type: Int
+external val AlphaFormat: Int
+external val RGBFormat: Int
+external val RGBAFormat: Int
+external val LuminanceFormat: Int
+external val LuminanceAlphaFormat: Int
+external val RGBEFormat: Int
+external val DepthFormat: Int
+external val DepthStencilFormat: Int
+external val RGB_S3TC_DXT1_Format: Int
+external val RGBA_S3TC_DXT1_Format: Int
+external val RGBA_S3TC_DXT3_Format: Int
+external val RGBA_S3TC_DXT5_Format: Int
+external val RGB_PVRTC_4BPPV1_Format: Int
+external val RGB_PVRTC_2BPPV1_Format: Int
+external val RGBA_PVRTC_4BPPV1_Format: Int
+external val RGBA_PVRTC_2BPPV1_Format: Int
+external val RGB_ETC1_Format: Int
+external val LoopOnce: Int
+external val LoopRepeat: Int
+external val LoopPingPong: Int
+external val InterpolateDiscrete: Int
+external val InterpolateLinear: Int
+external val InterpolateSmooth: Int
+external val ZeroCurvatureEnding: Int
+external val ZeroSlopeEnding: Int
+external val WrapAroundEnding: Int
+external val TrianglesDrawMode: Int
+external val TriangleStripDrawMode: Int
+external val TriangleFanDrawMode: Int
+external val LinearEncoding: Int
+external val sRGBEncoding: Int
+external val GammaEncoding: Int
+external val RGBEEncoding: Int
+external val LogLuvEncoding: Int
+external val RGBM7Encoding: Int
+external val RGBM16Encoding: Int
+external val RGBDEncoding: Int
+external val BasicDepthPacking: Int
+external val RGBADepthPacking: Int
+
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/AnimationAction.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/AnimationAction.kt
new file mode 100644
index 00000000..8abbc8ae
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/AnimationAction.kt
@@ -0,0 +1,128 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.animation
+
+import info.laht.threekt.core.Object3D
+
+external class AnimationAction(
+    mixer: AnimationMixer,
+    clip: AnimationClip,
+    localRoot: Object3D
+) {
+
+    /**
+     * Setting enabled to false disables this action, so that it has no impact. Default is true.
+     *
+     * When the action is re-enabled, the animation continues from its current time
+     * (setting enabled to false doesn't reset the action).
+     *
+     * Note: Setting enabled to true doesn’t automatically restart the animation.
+     * Setting enabled to true will only restart the animation immediately if the following condition
+     * is fulfilled: paused is false, this action has not been deactivated in the meantime
+     * (by executing a stop or reset command), and neither weight nor timeScale is 0.
+     */
+    var enabled: Boolean
+
+    /**
+     * The looping mode (can be changed with setLoop). Default is THREE.LoopRepeat (with an infinite number of repetitions)
+     */
+    var loop: Int
+
+    /**
+     * Setting paused to true pauses the execution of the action by setting the effective time scale to 0. Default is false.
+     */
+    var paused: Boolean
+
+    var repetitions: Int
+
+    var time: Double
+
+    var timeScale: Double
+
+    /**
+     * The degree of influence of this action (in the interval [0, 1]).
+     * Values between 0 (no impact) and 1 (full impact) can be used to blend between several actions. Default is 1.
+     *
+     * Properties/methods concerning weight are: crossFadeFrom, crossFadeTo, enabled, fadeIn, fadeOut,
+     * getEffectiveWeight, setEffectiveWeight, stopFading.
+     */
+    var weight: Double
+
+    /**
+     * Enables smooth interpolation without separate clips for start, loop and end. Default is true.
+     */
+    var zeroSlopeAtEnd: Boolean
+
+    /**
+     * Enables smooth interpolation without separate clips for start, loop and end. Default is true.
+     */
+    var zeroSlopeAtStart: Boolean
+
+
+    // State & Scheduling
+
+    fun play(): AnimationAction
+
+    fun stop(): AnimationAction
+
+    fun reset(): AnimationAction
+
+    fun isRunning(): Boolean
+
+    // return true when play has been called
+    fun isScheduled(): Boolean
+
+    fun startAt(time: Number): AnimationAction
+    fun setLoop(mode: Int, repetitions: Int): AnimationAction
+
+    // Weight
+
+    // set the weight stopping any scheduled fading
+    // although .enabled = false yields an effective weight of zero, this
+    // method does *not* change .enabled, because it would be confusing
+    fun setEffectiveWeight(weight: Number)
+
+    // return the weight considering fading and .enabled
+    fun getEffectiveWeight()
+
+    fun fadeIn(duration: Number): AnimationAction
+
+    fun fadeOut(duration: Number): AnimationAction
+
+    fun crossFadeFrom(fadeOutAction: AnimationAction, duration: Number, warp: Boolean)
+
+    fun crossFadeTo(fadeInAction: AnimationAction, duration: Number, warp: Boolean)
+
+    fun stopFading(): AnimationAction
+
+    // Time Scale Control
+
+    // set the time scale stopping any scheduled warping
+    // although .paused = true yields an effective time scale of zero, this
+    // method does *not* change .paused, because it would be confusing
+    fun setEffectiveTimeScale(timeScale: Number): AnimationAction
+
+    // return the time scale considering warping and .paused
+    fun getEffectiveTimeScale(): Double
+
+    fun setDuration(duration: Number): AnimationAction
+
+    fun syncWith(action: AnimationAction)
+
+    fun halt(duration: Number): AnimationAction
+
+    fun warp(startTimeScale: Number, endTimeScale: Number, duration: Number): AnimationAction
+
+    fun stopWarping(): AnimationAction
+
+    // Object Accessors
+
+    fun getMixer(): AnimationMixer
+
+    fun getClip(): AnimationClip
+
+    fun getRoot(): Object3D
+
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/AnimationClip.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/AnimationClip.kt
new file mode 100644
index 00000000..262f02dc
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/AnimationClip.kt
@@ -0,0 +1,53 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.animation
+
+/**
+ * An AnimationClip is a reusable set of keyframe tracks which represent an animation.
+
+For an overview of the different elements of the three.js animation system see the "Animation System" article in the "Next Steps" section of the manual.
+ *
+ * @param name a name for this clip.
+ * @param duration the duration of this clip (in seconds). If a negative value is passed, the duration will be calculated from the passed tracks array.
+ * @param tracks an array of KeyframeTracks.
+ */
+external class AnimationClip(
+    name: String,
+    duration: Number,
+    tracks: Array<KeyFrameTrack>
+) {
+
+    companion object {
+        /**
+         * Parses the animation.hierarchy format and returns an AnimationClip.
+         */
+        fun parse(json: String): AnimationClip
+
+        /**
+         * Takes an AnimationClip and returns a JSON object.
+         */
+        fun toJSON(clip: AnimationClip): dynamic
+    }
+
+    var uuid: String
+    var name: String
+    var duration: Double
+    var tracks: Array<KeyFrameTrack>
+
+    /**
+     * Optimizes each track by removing equivalent sequential keys (which are common in morph target sequences).
+     */
+    fun optimize(): AnimationClip
+
+    /**
+     * Sets the duration of the clip to the duration of its longest KeyframeTrack.
+     */
+    fun resetDuration()
+
+    /**
+     * Trims all tracks to the clip's duration.
+     */
+    fun trim(): AnimationClip
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/AnimationMixer.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/AnimationMixer.kt
new file mode 100644
index 00000000..383f88f7
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/AnimationMixer.kt
@@ -0,0 +1,37 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.animation
+
+import info.laht.threekt.core.Object3D
+
+/**
+ * The AnimationMixer is a player for animations on a particular object in the scene.
+ * When multiple objects in the scene are animated independently, one AnimationMixer may be used for each object.
+
+ * For an overview of the different elements of the three.js animation system see the "Animation System" article
+ * in the "Next Steps" section of the manual.
+ */
+external class AnimationMixer(
+    root: Object3D
+) {
+
+    var time: Double
+    var timeScale: Double
+
+    fun clipAction(clip: AnimationClip, optionalRoot: Object3D = definedExternally): AnimationClip
+    fun existingAction(clip: AnimationClip, optionalRoot: Object3D = definedExternally): AnimationClip
+
+    fun getRoot(): Object3D
+
+    fun stopAllAction()
+
+    fun update(deltaTimeInSeconds: Number)
+
+    fun uncacheClip(clip: AnimationClip)
+
+    fun unchacheRoot(root: Object3D)
+
+    fun uncacheAction(clip: AnimationClip, optionalRoot: Object3D)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/AnimationUtils.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/AnimationUtils.kt
new file mode 100644
index 00000000..34a9633b
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/AnimationUtils.kt
@@ -0,0 +1,8 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.animation
+
+external object AnimationUtils {
+    //TODO
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/KeyFrameTrack.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/KeyFrameTrack.kt
new file mode 100644
index 00000000..478fd1f6
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/animation/KeyFrameTrack.kt
@@ -0,0 +1,35 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.animation
+
+import org.khronos.webgl.Float32Array
+
+/**
+ * @param name the identifier for the KeyframeTrack.
+ * @param times an array of keyframe times, converted internally to a Float32Array.
+ * @param values an array with the values related to the times array, converted internally to a Float32Array.
+ * @param interpolation the type of interpolation to use. See Animation Constants for possible values. Default is InterpolateLinear.
+ */
+external class KeyFrameTrack(
+    name: String,
+    times: Array<Number>,
+    values: Array<Number>,
+    interpolation: Int
+) {
+
+    companion object {
+        var DefaultInterpolation: Int
+    }
+
+    var name: String
+    var times: Float32Array
+    var values: Float32Array
+
+    /**
+     * Returns the interpolation type
+     */
+    fun getInterpolation(): Int
+
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/audio/Audio.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/audio/Audio.kt
new file mode 100644
index 00000000..f6266c41
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/audio/Audio.kt
@@ -0,0 +1,155 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.audio
+
+/**
+ * Create a non-positional ( global ) audio object.
+ *
+ * This uses the Web Audio API.
+ */
+open external class Audio(listener: AudioListener) {
+
+    /**
+     * Whether to start playback automatically. Default is false.
+     */
+    var autoPlay: Boolean
+    /**
+     * The AudioContext of the listener given in the constructor.
+     */
+    var context: dynamic
+    /**
+     * Whether the audio is currently playing. Default is empty array.
+     */
+    var filters: Array<dynamic>
+    /**
+     * A GainNode created using AudioContext.createGain().
+     */
+    var gain: dynamic
+
+    /**
+     * Whether playback can be controlled using the play(), pause() etc. methods. Default is true.
+     */
+    var hasPlaybackControl: Boolean
+    /**
+     * Speed of playback. Default is 1.
+     */
+    var playbackRate: Double
+
+    /**
+     * Whether the audio is currently playing.
+     */
+    var isPlaying: Boolean
+
+    /**
+     * The time at which the sound should begin to play. Same as the when paramter of AudioBufferSourceNode.start(). Default is 0.
+     */
+    var startTime: Double
+
+    /**
+     * Type of the audio source. Default is string 'empty'.
+     */
+    var sourceType: String
+
+    /**
+     * Return the gainNode.
+     */
+    open fun getOutput(): dynamic
+
+    /**
+     * Setup the source to the audioBuffer, and sets sourceType to 'audioNode'.
+     * Also sets hasPlaybackControl to false.
+     */
+    fun setNodeSource(audioNode: dynamic): Audio
+
+    /**
+     * Setup the source to the audioBuffer, and sets sourceType to 'buffer'.
+     * If autoplay, also starts playback.
+     */
+    fun setBuffer(audioBuffer: dynamic): Audio
+
+    /**
+     * If hasPlaybackControl is true, starts playback.
+     */
+    fun play(): Audio
+
+    /**
+     * If hasPlaybackControl is true, pauses playback.
+     */
+    fun pause(): Audio
+
+    /**
+     * If hasPlaybackControl is enabled, stops playback,
+     * resets startTime to 0 and sets isPlaying to false.
+     */
+    fun stop(): Audio
+
+    /**
+     * Connect to the Audio.source. This is used internally on initialisation and when setting / removing filters.
+     */
+    fun connect(): Audio
+
+    /**
+     * Disconnect from the Audio.source. This is used internally when setting / removing filters.
+     */
+    fun disconnect(): Audio
+
+    /**
+     * Returns the filters array.
+     */
+    fun getFilters(): Array<dynamic>
+
+    /**
+     * value - arrays of filters.
+     * Set the filters array to value.
+     */
+    fun setFilters(value: Array<dynamic>): Audio
+
+    /**
+     * Returns the first element of the filters array.
+     */
+    fun getFilter(): dynamic
+
+    /**
+     * Add the filter to the filters array.
+     */
+    fun setFilter(filter: dynamic)
+
+    /**
+     * If hasPlaybackControl is enabled, set the playbackRate to value.
+     */
+    fun setPlaybackRate(value: Number): Double
+
+    /**
+     * Return the value of playbackRate.
+     */
+    fun getPlaybackRate(): Double
+
+    /**
+     * Called automatically when playback finished. Sets If isPlaying to false.
+     */
+    fun onEnded()
+
+    /**
+     * Return the value of source.loop (whether playback should loop).
+     */
+    fun getLoop(): Boolean
+
+    /**
+     * Set source.loop to value.
+     * @param value whether playback should loop
+     */
+    fun setLoop(value: Boolean): Audio
+
+    /**
+     * Return the current volume.
+     */
+    fun getVolume(): Double
+
+    /**
+     * Set the volume.
+     * @param value the volume
+     */
+    fun setVolume(value: Number): Audio
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/audio/AudioContext.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/audio/AudioContext.kt
new file mode 100644
index 00000000..3bccd0ac
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/audio/AudioContext.kt
@@ -0,0 +1,24 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.audio
+
+/**
+ * This contains methods for setting up an AudioContext.
+ * Used internally by the AudioListener and AudioLoader classes.
+ *
+ * This uses the Web Audio API.
+ */
+external object AudioContext {
+
+    /**
+     * Return the value of the variable context in the outer scope, if defined, otherwise set it to a new AudioContext.
+     */
+    fun getContext(): dynamic
+
+    /**
+     * Set the variable context in the outer scope to value.
+     */
+    fun setContext(value: dynamic)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/audio/AudioListener.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/audio/AudioListener.kt
new file mode 100644
index 00000000..e99b9b13
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/audio/AudioListener.kt
@@ -0,0 +1,41 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.audio
+
+import info.laht.threekt.core.Object3D
+
+/**
+ * Create a non-positional ( global ) audio object.
+ *
+ * This uses the Web Audio API.
+ */
+external class AudioListener : Object3D {
+
+    var context: dynamic
+
+    /**
+     * Return the gainNode.
+     */
+    fun getInput(): dynamic
+
+    /**
+     * Set the filter property to null.
+     */
+    fun removeFilter()
+
+    /**
+     * Returns the value of the filter property.
+     */
+    fun getFilter(): dynamic
+
+    /**
+     * Set the filter property to value.
+     */
+    fun setFilter(value: dynamic)
+
+    fun getMasterVolume(): Double
+
+    fun setMasterVolume(value: Number)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/audio/PositionalAudio.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/audio/PositionalAudio.kt
new file mode 100644
index 00000000..19c17bea
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/audio/PositionalAudio.kt
@@ -0,0 +1,63 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.audio
+
+/**
+ * Create a positional audio object.
+ *
+ * This uses the Web Audio API.
+ */
+external class PositionalAudio(listener: AudioListener) : Audio {
+
+    /**
+     * The PositionalAudio's PannerNode.
+     */
+    var panner: dynamic
+
+    /**
+     * Returns the panner.
+     */
+    override fun getOutput(): dynamic
+
+    /**
+     * Returns the value of panner.refDistance.
+     */
+    fun getRefDistance(): Double
+
+    /**
+     * Sets the value of panner.refDistance.
+     */
+    fun setRefDistance(value: Number)
+
+    /**
+     * Returns the value of panner.rolloffFactor.
+     */
+    fun getRolloffFactor(): Double
+
+    /**
+     * Sets the value of panner.rolloffFactor.
+     */
+    fun setRolloffFactor(value: Number)
+
+    /**
+     * Returns the value of panner.distanceModel.
+     */
+    fun getDistanceModel(): String
+
+    /**
+     * Sets the value of panner.distanceModel.
+     */
+    fun setDistanceModel(value: String)
+
+    /**
+     * Returns the value of panner.maxDistance.
+     */
+    fun getMaxDistance(): Double
+
+    /**
+     * Sets the value of panner.maxDistance.
+     */
+    fun setMaxDistance(value: Number)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/cameras/Camera.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/cameras/Camera.kt
new file mode 100644
index 00000000..6ab80298
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/cameras/Camera.kt
@@ -0,0 +1,87 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.cameras
+
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.math.Matrix4
+import info.laht.threekt.math.Vector3
+
+external interface View {
+    var enabled: Boolean
+    var fullwidth: Int
+    var fullHeight: Int
+    var offsetX: Int
+    var offsetY: Int
+    var width: Int
+    var height: Int
+}
+
+
+/**
+ * Creates a new Camera. Note that this class is not intended to be called directly;
+ * you probably want a PerspectiveCamera or OrthographicCamera instead.
+ */
+open external class Camera : Object3D {
+
+
+    /**
+     * This is the inverse of matrixWorld. MatrixWorld contains the Matrix which has the world transform of the Camera.
+     */
+    var matrixWorldInverse: Matrix4
+    /**
+     *     /**
+     * This is the matrix which contains the projection.
+    */
+     */
+    var projectionMatrix: Matrix4
+
+
+    /**
+     * Returns a Vector3 representing the world space direction in which the camera is looking.
+     *
+     * Note: This is not the camera’s positive, but its negative z-axis, in contrast to getWorldDirection of the base class (Object3D).
+     *
+     */
+    fun getWorldDirection(): Vector3
+
+    /**
+     * Returns a Vector3 representing the world space direction in which the camera is looking.
+     *
+     * Note: This is not the camera’s positive, but its negative z-axis, in contrast to getWorldDirection of the base class (Object3D).
+     *
+     * If an optionalTarget vector is specified, the result will be copied into this vector (which can be reused in this way),
+     * otherwise a new vector will be created.
+     */
+    override fun getWorldDirection(optionalTarget: Vector3): Vector3
+
+    override fun updateMatrixWorld(force: Boolean)
+
+    fun clone(): Camera
+    fun copy(source: Camera, recursive: Boolean)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/cameras/OrthographicCamera.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/cameras/OrthographicCamera.kt
new file mode 100644
index 00000000..320d71b5
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/cameras/OrthographicCamera.kt
@@ -0,0 +1,57 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.cameras
+
+external class OrthographicCamera(
+    varleft: Int,
+    right: Int,
+    top: Int,
+    bottom: Int,
+    near: Number = definedExternally,
+    far: Number = definedExternally
+) : Camera {
+
+    var zoom: Int
+    var view: View
+
+    var left: Int
+    var right: Int
+    var top: Int
+    var bottom: Int
+
+    var near: Double
+    var far: Double
+
+    fun copy(camera: OrthographicCamera): OrthographicCamera
+
+    fun setViewOffset(fullwidth: Int, fullHeight: Int, x: Int, y: Int, width: Int, height: Int)
+    fun clearViewOffset()
+    fun updateProjectionMatrix()
+
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/cameras/PerspectiveCamera.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/cameras/PerspectiveCamera.kt
new file mode 100644
index 00000000..4deee300
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/cameras/PerspectiveCamera.kt
@@ -0,0 +1,50 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.cameras
+
+
+external class PerspectiveCamera(fov: Int, aspect: Double, near: Number, far: Number) : Camera {
+    var fov: Int
+    var zoom: Double
+
+    var near: Double
+    var far: Double
+    var focus: Double
+
+    var aspect: Double
+    var view: View
+
+    var filmGauge: Int
+    var filmOffset: Int
+
+    fun copy(source: PerspectiveCamera, recursive: Boolean = definedExternally)
+
+    fun setViewOffset(fullwidth: Int, fullHeight: Int, x: Int, y: Int, width: Int, height: Int)
+    fun clearViewOffset()
+    fun updateProjectionMatrix()
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/BufferAttribute.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/BufferAttribute.kt
new file mode 100644
index 00000000..001aa20c
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/BufferAttribute.kt
@@ -0,0 +1,207 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.core
+
+import info.laht.threekt.math.Color
+import info.laht.threekt.math.Vector2
+import info.laht.threekt.math.Vector3
+import info.laht.threekt.math.Vector4
+
+abstract external class BufferAttribute protected constructor(
+    array: dynamic,
+    itemSize: Int,
+    normalized: Boolean = definedExternally
+) {
+
+
+    interface UpdateRange {
+        /**
+         * Default is 0. Position at whcih to start update.
+         */
+        var offset: Int
+        /**
+         * Default is -1, which means don't use update ranges.
+
+         */
+        var count: Int
+    }
+
+
+    /**
+     * UUID of this object instance. This gets automatically assigned and this shouldn't be edited.
+     */
+    val uuid: String
+    /**
+     * Optional name for this attribute instance. Default is an empty string.
+     */
+    var name: String
+
+    var array: dynamic
+    /**
+     * The length of vectors that are being stored in the array.
+     */
+    val itemSize: Int
+    /**
+     * Stores the array's length divided by the itemSize.
+     *
+     * If the buffer is storing a 3-component vector (such as a position, normal, or color),
+     * then this will count the number of such vectors stored.
+     */
+    val count: Int
+    /**
+     * Indicates how the underlying data in the buffer maps to the values in the GLSL shader code. See the constructor above for details.
+     */
+    var normalized: Boolean
+
+    /**
+     * Whether the buffer is dynamic or not. Default is false.
+     * If false, the GPU is informed that contents of the buffer are likely to be used often and not change often.
+     * This corresponds to the glfun sTATIC_DRAW flag.
+     * if true, the GPU is informed that contents of the buffer are likely to be used often and change often.
+     * This corresponds to the gl.DYNAMIC_DRAW flag.
+     */
+    var dynamic: Boolean
+    /**
+     * This can be used to only update some components of stored vectors (
+     * for example, just the component related to color).
+     */
+    var updateRange: UpdateRange
+
+    /**
+     * Flag to indicate that this attribute has changed and should be re-sent to the GPU. Set this to true when you modify the value of the array.
+     *
+     * Setting this to true also increments the version.
+     */
+    var needsUpdate: Boolean
+
+    var onUploadCallback: () -> Unit
+
+    /**
+     * A version number, incremented every time the needsUpdate property is set to true.
+     */
+    val version: Int
+
+    fun setArray(array: dynamic)
+
+    /**
+     * Set dynamic to value.
+     */
+    fun setDynamic(value: Boolean)
+
+    /**
+     * Returns the w component of the vector at the given index.
+     */
+    fun getW(index: Int): Number
+
+    fun copy(source: BufferAttribute): BufferAttribute
+    /**
+     * Copy a vector from bufferAttribute[index2] to array[index1].
+     */
+    fun copyAt(index1: Int, attribute: BufferAttribute, index2: Int): BufferAttribute
+
+    /**
+     * Copy an array representing Face3 indices into array.
+     */
+    fun copyIndicesArray(indices: Array<Int>)
+
+    /**
+     * Copy an array representing RGB color values into array.
+     */
+    fun copyColorsArray(colors: Array<Color>)
+
+    /**
+     * Copy an array representing Vector2s into array.
+     */
+    fun copyVector2sArray(vectors: Array<Vector2>)
+
+    /**
+     * Copy an array representing Vector3s into array.
+     */
+    fun copyVector3sArray(vectors: Array<Vector3>)
+
+    /**
+     * Copy an array representing Vector4s into array.
+     */
+    fun copyVector4sArray(vectors: Array<Vector4>)
+
+    /**
+     * Return a copy of this bufferAttribute.
+     */
+    open fun clone(): BufferAttribute
+
+
+    /**
+     * Returns the x component of the vector at the given index.
+     */
+    fun getX(index: Int): Number
+
+    /**
+     * Returns the y component of the vector at the given index.
+     */
+    fun getY(index: Int): Number
+
+    /**
+     * Returns the z component of the vector at the given index.
+     */
+    fun getZ(index: Int): Number
+
+    /**
+     * Sets the x component of the vector at the given index.
+     */
+    fun setX(index: Int, x: Number)
+
+    /**
+     * Sets the y component of the vector at the given index.
+     */
+    fun setY(index: Int, y: Number)
+
+    /**
+     * Sets the z component of the vector at the given index.
+     */
+    fun setZ(index: Int, z: Number)
+
+    /**
+     * Sets the w component of the vector at the given index.
+     */
+    fun setW(index: Int, w: Number)
+
+    /**
+     * Sets the x, y component of the vector at the given index.
+     */
+    fun setXY(index: Int, x: Number, y: Number)
+
+    /**
+     * Sets the x, y, z component of the vector at the given index.
+     */
+    fun setXYZ(index: Int, x: Number, y: Number, z: Number)
+
+    /**
+     * Sets the x, y, z, w component of the vector at the given index.
+     */
+    fun setXYZW(index: Int, x: Number, y: Number, z: Number, w: Number)
+}
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/BufferGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/BufferGeometry.kt
new file mode 100644
index 00000000..a4219aeb
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/BufferGeometry.kt
@@ -0,0 +1,117 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.core
+
+import info.laht.threekt.math.Box3
+import info.laht.threekt.math.Matrix4
+import info.laht.threekt.math.Sphere
+import info.laht.threekt.math.Vector3
+
+/**
+ * This class is an efficient alternative to Geometry, because it stores all data, including vertex positions,
+ * face indices, normals, colors, UVs, and custom attributes within buffers; this reduces the cost of passing all
+ * this data to the GPU.
+ * This also makes BufferGeometry harder to work with than Geometry; rather than accessing position data as Vector3
+ * objects, color data as Color objects, and so on, you have to access the raw data from the appropriate attribute buffer.
+ * This makes BufferGeometry best-suited for static objects where you don't need to manipulate the geometry much
+ * after instantiating it.
+ */
+open external class BufferGeometry {
+
+    interface DrawRange {
+        var start: Int
+        var count: Int
+    }
+
+    interface Group {
+        var start: Int
+        var count: Int
+        var materialIndex: Int
+    }
+
+    val uuid: String
+    val id: String
+
+    var name: String
+    var type: String
+
+    var index: dynamic
+    var attributes: Map<String, BufferAttribute>
+
+    var morphAttributes: Map<String, BufferAttribute>
+
+    var groups: List<Group>
+
+    var boundingBox: Box3?
+    var boundingSphere: Sphere?
+
+    var drawRange: DrawRange
+
+
+    open fun clone(): BufferGeometry
+    fun copy(bufferGeometry: BufferGeometry): BufferGeometry
+
+    fun computeBoundingBox()
+    fun computeBoundingSphere()
+
+    fun center(): Vector3
+
+    fun dispose()
+    fun clearGroups()
+    fun addGroup(start: Int, count: Int, materialIndex: Int = definedExternally)
+
+    fun addAttribute(name: String, attribute: BufferAttribute)
+    fun getAttribute(name: String): BufferAttribute
+    fun removeAttribute(name: String): BufferGeometry
+
+    fun setIndex(index: BufferAttribute)
+    fun setDrawRange(start: Int, count: Int)
+
+    fun fromGeometry(geometry: Geometry)
+    fun setFromObject(`object`: Object3D): BufferGeometry
+    fun updateFromObject(`object`: Object3D): BufferGeometry
+    fun setFromPoints(points: Array<Vector3>): BufferGeometry
+    fun merge(bufferGeometry: BufferGeometry, offset: Int = definedExternally): BufferGeometry
+
+
+    fun applyMatrix(matrix: Matrix4)
+    fun lookAt(vector: Vector3): BufferGeometry
+    fun rotateX(radians: Double): BufferGeometry
+    fun rotateY(radians: Double): BufferGeometry
+    fun rotateZ(radians: Double): BufferGeometry
+    fun scale(x: Double, y: Double, z: Double): BufferGeometry
+    fun translate(x: Double, y: Double, z: Double): BufferGeometry
+
+
+    fun computeVertexNormals()
+    fun normalizeNormals()
+    fun toNonIndexed(): BufferGeometry
+
+    fun toJSON(): Any
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Clock.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Clock.kt
new file mode 100644
index 00000000..8cce902c
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Clock.kt
@@ -0,0 +1,82 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.core
+
+/**
+ * Object for keeping track of time.
+ * This uses performance.now() if it is available, otherwise it reverts to the less accurate Date.now().
+ * @param autoStart (optional) whether to automatically start the clock. Default is true.
+ */
+external class Clock(autoStart: Boolean = definedExternally) {
+
+    /**
+     * If set, starts the clock automatically when the first update is called. Default is true.
+     */
+    var autoStart: Boolean
+
+    /**
+     * Holds the time at which the clock's start method was last called.
+     */
+    val startTime: Double
+    /**
+     * Holds the time at which the clock's start, getElapsedTime or getDelta methods were last called.
+     */
+    val oldTime: Double
+    /**
+     * Keeps track of the total time that the clock has been running.
+     */
+    val elapsedTime: Double
+
+    /**
+     * Whether the clock is running or not.
+     */
+    val running: Boolean
+
+    /**
+     * Starts clock. Also sets the startTime and oldTime to the current time, sets elapsedTime to 0 and running to true.
+     */
+    fun start()
+
+    /**
+     * Stops clock and sets oldTime to the current time.
+     */
+    fun stop()
+
+    /**
+     * Get the seconds passed since the clock started and sets oldTime to the current time.
+     * If autoStart is true and the clock is not running, also starts the clock.
+     */
+    fun getElapsedTime(): Double
+
+    /**
+     * Get the seconds passed since the time oldTime was set and sets oldTime to the current time.
+     * If autoStart is true and the clock is not running, also starts the clock.
+     */
+    fun getDelta(): Double
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/DirectGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/DirectGeometry.kt
new file mode 100644
index 00000000..bae8ce28
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/DirectGeometry.kt
@@ -0,0 +1,48 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.core
+
+import info.laht.threekt.math.Box3
+import info.laht.threekt.math.Sphere
+
+external class DirectGeometry {
+
+    var verticesNeedUpdate: Boolean
+    var normalsNeedUpdate: Boolean
+    var colorsNeedUpdate: Boolean
+    var uvsNeedUpdate: Boolean
+    var groupsNeedUpdate: Boolean
+
+    fun computeBoundingBox(): Box3
+    fun computeBoundingSphere(): Sphere
+
+    fun dispose()
+
+    fun fromGeometry(geometry: Geometry)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/EventDispatcher.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/EventDispatcher.kt
new file mode 100644
index 00000000..459da88b
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/EventDispatcher.kt
@@ -0,0 +1,37 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.core
+
+external open class EventDispatcher {
+
+    fun addEventListener(type: String, listener: (dynamic) -> Unit)
+    fun hasEventListener(type: String, listener: (dynamic) -> Unit)
+    fun removeEventListener(type: String, listener: (dynamic) -> Unit)
+    fun dispatchEvent(event: dynamic)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Face3.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Face3.kt
new file mode 100644
index 00000000..ff48d022
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Face3.kt
@@ -0,0 +1,68 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.core
+
+import info.laht.threekt.math.Color
+import info.laht.threekt.math.Vector3
+
+external class Face3 {
+
+    constructor(
+        a: Int,
+        b: Int,
+        c: Int,
+        normal: Vector3 = definedExternally,
+        color: Color = definedExternally,
+        materialIndex: Int = definedExternally
+    )
+
+    constructor(
+        a: Int,
+        b: Int,
+        c: Int,
+        normal: Array<Vector3> = definedExternally,
+        color: Array<Color> = definedExternally,
+        materialIndex: Int = definedExternally
+    )
+
+    var a: Int
+    var b: Int
+    var c: Int
+
+    var normal: Vector3?
+    var vertexNormals: Array<Vector3>?
+
+    var color: Color?
+    var vertexColors: Array<Color>?
+
+    var materialIndex: Int?
+
+    fun clone(): Face3
+    fun copy(source: Face3): Face3
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Geometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Geometry.kt
new file mode 100644
index 00000000..518cc6d6
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Geometry.kt
@@ -0,0 +1,109 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.core
+
+import info.laht.threekt.math.*
+import info.laht.threekt.objects.Mesh
+
+external interface MorphTarget {
+    val name: String
+    val vertices: Array<Vector3>
+}
+
+external interface MorphNormal {
+    val name: String
+    val normals: Array<Vector3>
+}
+
+open external class Geometry {
+
+    val id: Int
+
+    var vertices: Array<Vector3>
+    var colors: Array<Color>
+    var faces: Array<Face3>
+    var faceVertexUvs: Array<Array<Vector2>>
+
+    var morphTargets: Array<MorphTarget>
+    var morphNormals: Array<MorphNormal>
+
+    var skinWeights: Array<Vector4>
+    var skinIndices: Array<Vector4>
+
+    var lineDistances: List<Double>
+
+    var boundingBox: Box3?
+    var boundingSphere: Sphere?
+
+    // update flags
+
+    var elementsNeedUpdate: Boolean
+    var verticesNeedUpdate: Boolean
+    var uvsNeedUpdate: Boolean
+    var normalsNeedUpdate: Boolean
+    var colorsNeedUpdate: Boolean
+    var lineDistancesNeedUpdate: Boolean
+    var groupsNeedUpdate: Boolean
+
+    fun applyMatrix(matrix: Matrix4): Geometry
+    fun rotateX(angle: Number): Geometry
+    fun rotateY(angle: Number): Geometry
+    fun rotateZ(angle: Number): Geometry
+    fun translate(x: Number, y: Number, z: Number): Geometry
+    fun scale(x: Number, y: Number, z: Number): Geometry
+    fun lookAt(vector: Vector3): Geometry
+    fun fromBufferGeometry(geometry: BufferGeometry): Geometry
+    fun addFace(a: Int, b: Int, c: Int, materialIndexOffset: Int = definedExternally)
+    fun center(): Vector3
+    fun normalize(): Geometry
+    fun computeFaceNormals()
+    fun computeVertexNormals(areaWeighted: Boolean = definedExternally)
+    fun computeFlatVertexNormals()
+    fun computeMorphNormals()
+    fun computeLineDistances()
+    fun computeBoundingBox()
+    fun computeBoundingSphere()
+
+    fun merge(geometry: Geometry, matrix: Matrix4 = definedExternally, materialIndexOffset: Int = definedExternally)
+
+    fun mergeMesh(mesh: Mesh)
+
+    fun mergeVertices()
+
+    fun setFromPoint(points: Array<Vector3>): Geometry
+
+    fun sortFacesByMaterialIndex()
+
+    fun toJSON(): Any
+
+    open fun clone(): Geometry
+    fun copy(geometry: Geometry): Geometry
+
+    fun dispose()
+
+}
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/InstancedBufferGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/InstancedBufferGeometry.kt
new file mode 100644
index 00000000..92137432
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/InstancedBufferGeometry.kt
@@ -0,0 +1,38 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.core
+
+external class InstancedBufferGeometry : BufferGeometry {
+
+    var maxInstancedCount: Int?
+
+    fun copy(source: InstancedBufferGeometry): InstancedBufferGeometry
+
+    override fun clone(): InstancedBufferGeometry
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Layers.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Layers.kt
new file mode 100644
index 00000000..503878d1
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Layers.kt
@@ -0,0 +1,75 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.core
+
+/**
+ * A Layers object assigns an Object3D to 1 or more of 32 layers numbered 0 to 31 - internally the
+ * layers are stored as a bit mask, and by default all Object3Ds are a member of layer 0.
+ *
+ * This can be used to control visibility - an object must share a layer with a camera to be visible when that
+ * camera's view is renderered.
+ *
+ * All classes that inherit from Object3D have an Object3D.layers property which is an instance of this class.
+ */
+external class Layers {
+
+    /**
+     * A bit mask storing which of the 32 layers this layers object is currently a member of.
+     */
+    var mask: Int
+
+    /**
+     * Set membership to layer, and remove membership all other layers.
+     * @param layer layer - an integer from 0 to 31.
+     */
+    fun set(layer: Int)
+
+    /**
+     * Add membership of this layer.
+     * @param layer an integer from 0 to 31.
+     */
+    fun enable(layer: Int)
+
+    /**
+     * Toggle membership of layer.
+     * @layer - an integer from 0 to 31.
+     */
+    fun toggle(layer: Int)
+
+    /**
+     * Remove membership of this layer.
+     * @layer - an integer from 0 to 31.
+     */
+    fun disable(layer: Int)
+
+    /**
+     * Returns true if this and the passed layers object are members of the same set of layers.
+     * @param layers a Layers object
+     */
+    fun test(layers: Layers): Boolean
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Object3D.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Object3D.kt
new file mode 100644
index 00000000..c8b6e2a2
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Object3D.kt
@@ -0,0 +1,328 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+
+package info.laht.threekt.core
+
+import info.laht.threekt.math.*
+
+/**
+ * This is the base class for most objects in three.js and provides a set of properties and methods for manipulating objects in 3D space.
+ *
+ * Note that this can be used for grouping objects via the .add( object ) method which adds the object as a child, however it is better to use Group for this.
+ */
+open external class Object3D {
+
+    companion object {
+        val DefaultUp: Vector3
+        val DefaultMatrixAutoUpdate: Boolean
+    }
+
+    /**
+     * readonly – Unique number for this object instance.
+     */
+    val id: Int
+
+    /**
+     * UUID of this object instance. This gets automatically assigned, so this shouldn't be edited.
+     */
+    val uuid: String
+
+    /**
+     * Optional name of the object (doesn't need to be unique). Default is an empty string.
+     */
+    var name: String
+
+    /**
+     * Object's parent in the scene graph.
+     */
+    val parent: Object3D?
+    /**
+     * Array with object's children. See Group for info on manually grouping objects.
+     */
+    val children: Array<Object3D>
+
+    /**
+     * This is used by the lookAt method, for example, to determine the orientation of the result.
+     * Default is Object3D.DefaultUp - that is, ( 0, 1, 0 ).
+     */
+    val up: Vector3
+
+    /**
+     * A Vector3 representing the object's local position. Default is (0, 0, 0).
+     */
+    val position: Vector3
+    /**
+     * Object's local rotation (see Euler angles), in radians.
+     */
+    val rotation: Euler
+    /**
+     * Object's local rotation as a Quaternion.
+     */
+    val quaternion: Quaternion
+    /**
+     * The object's local # .scale . Default is Vector3( 1, 1, 1 ).
+     */
+    val scale: Vector3
+    /**
+     * This is passed to the shader and used to calculate the position of the object.
+     */
+    val modelViewMatrix: Matrix4
+    /**
+     * This is passed to the shader and used to calculate lighting for the object.
+     * It is the transpose of the inverse of the upper left 3x3 sub-matrix of this object's modelViewMatrix.
+     *
+     * The reason for this special matrix is that simply using the modelViewMatrix could result in a non-unit
+     * length of normals (on scaling) or in a non-perpendicular direction (on non-uniform scaling).
+     *
+     * On the other hand the translation part of the modelViewMatrix is not relevant for the calculation of normals.
+     * Thus a Matrix3 is sufficient.
+     */
+    val normalMatrix: Matrix3
+
+    /**
+     * The local transform matrix.
+     */
+    var matrix: Matrix4
+    /**
+     * The global transform of the object. If the Object3D has no parent, then it's identical to the local transform .matrix.
+     */
+    var matrixWorld: Matrix4
+
+    /**
+     * When this is set, it calculates the matrix of position, (rotation or quaternion) and scale every frame and
+     * also recalculates the matrixWorld property. Default is Object3D.DefaultMatrixAutoUpdate (true).
+     */
+    var matrixAutoUpdate: Boolean
+    /**
+     * When this is set, it calculates the matrixWorld in that frame and resets this property to false. Default is false.
+     */
+    var matrixWorldNeedsUpdate: Boolean
+
+    var layers: Layers
+    /**
+     * Object gets rendered if true. Default is true.
+     */
+    var visible: Boolean
+
+    /**
+     * Whether the object gets rendered into shadow map. Default is false.
+     */
+    var castShadow: Boolean
+    /**
+     * Whether the material receives shadows. Default is false.
+     */
+    var receiveShadows: Boolean
+
+    /**
+     * When this is set, it checks every frame if the object is in the frustum of the camera before rendering the object.
+     * Otherwise the object gets renderered every frame even if it isn't visible. Default is true.
+     */
+    var frustrumCulled: Boolean
+    /**
+     * This value allows the default rendering order of scene graph objects to be overridden although opaque and transparent objects remain sorted independently.
+     * Sorting is from lowest to highest renderOrder. Default value is 0.
+     */
+    var renderOrder: Int
+
+    /**
+     * An object that can be used to store custom data about the Object3D.
+     * It should not hold references to functions as these will not be cloned.
+     */
+    var userData: Map<String, Any>
+
+    /**
+     * An optional callback that is executed immediately before the Object3D is rendered.
+     * This function is called with the following parameters: renderer, scene, camera, geometry, material, group.
+     */
+    var onBeforeRender: () -> Unit
+    var onAfterRender: () -> Unit
+
+    /**
+     * Applies the matrix transform to the object and updates the object's position, rotation and scale.
+     */
+    fun applyMatrix(matrix: Matrix4)
+
+    /**
+     * Applies the rotation represented by the quaternion to the object.
+     */
+    fun applyQuaternion(q: Quaternion)
+
+    fun setRotationFromAxisAngle(axis: Vector3, angle: Number)
+    fun setRotationFromEuler(euler: Euler)
+    fun setRotationFromMatrix(m: Matrix3)
+    fun setRotationFromQuaternion(q: Quaternion)
+    fun rotateOnAxis(axis: Vector3, angle: Number)
+    fun rotateOnWorldAxis(axis: Vector3, angle: Double)
+    fun rotateX(angle: Number)
+    fun rotateY(angle: Number)
+    fun rotateZ(angle: Number)
+    /**
+     * Translate an object by distance along an axis in object space. The axis is assumed to be normalized.
+     * @param axis A normalized vector in object space.
+     * @param distance The distance to translate.
+     */
+    fun translateOnAxis(axis: Vector3, distance: Number)
+
+    /**
+     * Translates object along x axis by distance units.
+     */
+    fun translateX(distance: Number)
+
+    /**
+     * Translates object along y axis by distance units.
+     */
+    fun translateY(distance: Number)
+
+    /**
+     * Translates object along z axis by distance units.
+     */
+    fun translateZ(distance: Number)
+
+    /**
+     * Converts the vector from local space to world space.
+     * @param vector A vector representing a position in local (object) space.
+     */
+    fun localToWorld(vector: Vector3): Vector3
+
+    /**
+     *
+     * Updates the vector from world space to local space.
+     * @param vector A world vector.
+     */
+    fun worldToLocal(vector: Vector3): Vector3
+
+    /**
+     * Rotates the object to face a point in world space.
+     * This method does not support objects with rotated and/or translated parent(s).
+     * @param v A vector representing a position in world space.
+     */
+    fun lookAt(v: Vector3)
+
+    /**
+     * Rotates the object to face a point in world space.
+     * This method does not support objects with rotated and/or translated parent(s).
+     * @param x the x component of the world space position.
+     * @param y the y component of the world space position.
+     * @param z the z component of the world space position.
+     */
+    fun lookAt(x: Number, y: Number, z: Number)
+
+    /**
+     * Adds object as child of this object. An arbitrary number of objects may be added.
+     */
+    fun add(`object`: Object3D)
+
+    /**
+     * Removes object as child of this object. An arbitrary number of objects may be removed.
+     */
+    fun remove(`object`: Object3D)
+
+    /**
+     * Searches through the object's children and returns the first with a matching id.
+     * Note that ids are assigned in chronological order: 1, 2, 3, ..., incrementing by one for each new object.
+     * @param id Unique number of the object instance
+     */
+    fun getObjectById(id: Int): Object3D?
+
+    /**
+     * Searches through the object's children and returns the first with a matching name.
+     * Note that for most objects the # .name is an empty string by default. You will have to set
+     * it manually to make use of this method.
+     * @param name String to match to the children's Object3D.name property.
+     */
+    fun getObjectByName(name: String): Object3D?
+
+    fun getObjectByProperty(name: String, value: dynamic): Object3D?
+    /**
+     * Returns a vector representing the position of the object in world space.
+     */
+    fun getWorldPosition(optionalTarget: Vector3 = definedExternally): Vector3
+
+    /**
+     * Returns a quaternion representing the rotation of the object in world space.
+     */
+    fun getWorldQuaternion(optionalTarget: Quaternion = definedExternally): Quaternion
+
+    /**
+     * Returns the euler angles representing the rotation of the object in world space.
+     */
+    fun getWorldRotation(optionalTarget: Euler = definedExternally): Euler
+
+    /**
+     *
+    Returns a vector of the scaling factors applied to the object for each axis in world space.
+     */
+    fun getWorldScale(optionalTarget: Vector3 = definedExternally): Vector3
+
+    /**
+     * Returns a vector representing the direction of object's positive z-axis in world space
+     */
+    open fun getWorldDirection(optionalTarget: Vector3 = definedExternally): Vector3
+
+    /**
+     * Abstract (empty) method to get intersections between a casted ray and this object.
+     * Subclasses such as Mesh, Line, and Points implement this method in order to use raycasting.
+     */
+    open fun raycast()
+
+    /**
+     * Executes the callback on this object and all descendants.
+     */
+    fun traverse(callback: (Object3D) -> Unit)
+
+    /**
+     * Like traverse, but the callback will only be executed for visible objects.
+     * Descendants of invisible objects are not traversed.
+     */
+    fun traverseVisible(callback: (Object3D) -> Unit)
+
+    /**
+     * Executes the callback on all ancestors.
+     */
+    fun traverseAncestors(callback: (Object3D) -> Unit)
+
+    /**
+     * Update the local transform
+     */
+    fun updateMatrix()
+
+    /**
+     * Update the global transform of the object and its children.
+     */
+    open fun updateMatrixWorld(force: Boolean = definedExternally)
+
+    /**
+     * Convert the object to JSON format.
+     */
+    fun toJSON(meta: String = definedExternally): Any
+
+    open fun clone(recursive: Boolean = definedExternally): Object3D
+    open fun copy(source: Object3D, recursive: Boolean = definedExternally): Object3D
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Raycaster.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Raycaster.kt
new file mode 100644
index 00000000..2e2944af
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Raycaster.kt
@@ -0,0 +1,69 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.core
+
+import info.laht.threekt.cameras.Camera
+import info.laht.threekt.math.Ray
+import info.laht.threekt.math.Vector2
+import info.laht.threekt.math.Vector3
+
+external interface Params {
+    var Mesh: dynamic
+    var Line: dynamic
+    var LOD: dynamic
+    var Points: dynamic
+    var Sprite: dynamic
+}
+
+external interface Intersect {
+    var distance: Double
+    var distanceToRay: Double?
+    var point: Vector3
+    var index: Int
+    var face: Face3?
+    var faceIndex: Int?
+    var `object`: Object3D
+}
+
+external class Raycaster() {
+
+    constructor(origin: Vector3, direction: Vector3, near: Number, far: Number)
+
+    var ray: Ray
+    var near: Double
+    var far: Double
+
+    fun set(origin: Vector3, direction: Vector3): Raycaster
+
+    fun setFromCamera(coord: Vector2, camera: Camera)
+
+    fun intersectObject(object3D: Object3D, recursive: Boolean): Array<Intersect>
+
+    fun intersectObjects(objects: List<Object3D>, recursive: Boolean): Array<Intersect>
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Uniform.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Uniform.kt
new file mode 100644
index 00000000..a92cdf2a
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/core/Uniform.kt
@@ -0,0 +1,39 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.core
+
+external class Uniform {
+
+    constructor(value: dynamic)
+
+    var value: dynamic
+
+    fun clone(): Uniform
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/Detector.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/Detector.kt
new file mode 100644
index 00000000..716e5d74
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/Detector.kt
@@ -0,0 +1,42 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.external
+
+import org.w3c.dom.Element
+
+external object Detector {
+
+    val webgl: Boolean
+    val canvas: Boolean
+    val workers: Boolean
+    val fileapi: Boolean
+
+    fun getWebGLErrorMessage(): Element
+    fun addGetWebGLMessage(parameters: dynamic)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/ImprovedNoise.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/ImprovedNoise.kt
new file mode 100644
index 00000000..bc380022
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/ImprovedNoise.kt
@@ -0,0 +1,34 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.external
+
+external object ImprovedNoise {
+
+    fun noise(x: Double, y: Double, z: Double): Double
+
+}
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/SimplexNoise.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/SimplexNoise.kt
new file mode 100644
index 00000000..f8ab5a82
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/SimplexNoise.kt
@@ -0,0 +1,33 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.external
+
+external object SimplexNoise {
+
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/controls/FlyControls.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/controls/FlyControls.kt
new file mode 100644
index 00000000..11e25207
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/controls/FlyControls.kt
@@ -0,0 +1,51 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three/examples/jsm/controls/FlyControls.js")
+@file:JsNonModule
+
+package info.laht.threekt.external.controls
+
+import info.laht.threekt.core.Object3D
+import org.w3c.dom.Node
+
+external class FlyControls(`object`: Object3D, domElement: Node = definedExternally) {
+
+    var `object`: Object3D
+    var domElement: Node
+
+    // API
+
+    var movementSpeed: Double
+    var rollSpeed: Double
+
+    var dragToLook: Boolean
+    var autoForward: Boolean
+
+
+    fun update(delta: Number)
+
+    fun dispose()
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/controls/OrbitControls.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/controls/OrbitControls.kt
new file mode 100644
index 00000000..db7f2ac9
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/controls/OrbitControls.kt
@@ -0,0 +1,110 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three/examples/jsm/controls/OrbitControls.js")
+@file:JsNonModule
+
+package info.laht.threekt.external.controls
+
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.math.Vector3
+import org.w3c.dom.Node
+
+/**
+ *  This set of controls performs orbiting, dollying (zooming), and panning.
+ *  Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
+ *
+ *  Orbit - left mouse / touch: one finger move
+ *  Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
+ *  Pan - right mouse, or arrow keys / touch: three finger swipe
+ */
+
+external class OrbitControls(`object`: Object3D, domElement: Node = definedExternally) {
+
+    var `object`: Object3D
+
+    var domElement: Node
+
+    var enabled: Boolean
+
+    var target: Vector3
+
+    var minDistance: Double
+    var maxDistance: Double
+
+    var minZoom: Double
+    var maxZoom: Double
+
+    /**
+     * How far you can orbit vertically, lower limit.
+     * In radians
+     */
+    var minPolarAngle: Double
+    /**
+     * How far you can orbit vertically, upper limit.
+     * In radians
+     */
+    var maxPolarAngle: Double
+
+    var minAzimuthAngle: Double
+    var maxAzimuthAngle: Double
+
+    var enableDamping: Boolean
+    var dampingFactor: Double
+
+    var enableZoom: Boolean
+    var zoomSpeed: Double
+
+    var enableRotate: Boolean
+    var rotateSpeed: Double
+
+    var enablePan: Boolean
+    var keyPanSpeed: Double
+
+    var autoRotate: Boolean
+    var autoRotateSpeed: Double
+
+    var enableKeys: Boolean
+
+    interface Keys {
+        var LEFT: Int
+        var UP: Int
+        var RIGHT: Int
+        var BOTTOM: Int
+    }
+
+    var keys: Keys
+
+    fun getPolarAngle(): Double
+
+    fun getAzimutAngle(): Double
+
+    fun saveState()
+
+    fun reset()
+
+    fun update()
+
+    fun dispose()
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/controls/TrackballControls.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/controls/TrackballControls.kt
new file mode 100644
index 00000000..b128553e
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/controls/TrackballControls.kt
@@ -0,0 +1,60 @@
+@file:Suppress(
+    "INTERFACE_WITH_SUPERCLASS",
+    "OVERRIDING_FINAL_MEMBER",
+    "RETURN_TYPE_MISMATCH_ON_OVERRIDE",
+    "CONFLICTING_OVERLOADS",
+    "EXTERNAL_DELEGATION",
+    "NESTED_CLASS_IN_EXTERNAL_INTERFACE"
+)
+@file:JsModule("three/examples/jsm/controls/TrackballControls.js")
+@file:JsNonModule
+
+package info.laht.threekt.external.controls
+
+import info.laht.threekt.cameras.Camera
+import info.laht.threekt.core.EventDispatcher
+import info.laht.threekt.math.Vector3
+import org.w3c.dom.HTMLElement
+import org.w3c.dom.Node
+
+external interface `T$0` {
+    var left: Number
+    var top: Number
+    var width: Number
+    var height: Number
+}
+
+external open class TrackballControls(
+    `object`: Camera,
+    domElement: Node = definedExternally /* null */
+) : EventDispatcher {
+    open var `object`: Camera
+    open var domElement: HTMLElement
+    open var enabled: Boolean
+    open var screen: `T$0`
+    open var rotateSpeed: Number
+    open var zoomSpeed: Number
+    open var panSpeed: Number
+    open var noRotate: Boolean
+    open var noZoom: Boolean
+    open var noPan: Boolean
+    open var noRoll: Boolean
+    open var staticMoving: Boolean
+    open var dynamicDampingFactor: Number
+    open var minDistance: Number
+    open var maxDistance: Number
+    open var keys: Array<Number>
+    open var target: Vector3
+    open var position0: Vector3
+    open var target0: Vector3
+    open var up0: Vector3
+    open fun update(): Unit
+    open fun reset(): Unit
+    open fun dispose(): Unit
+    open fun checkDistances(): Unit
+    open fun zoomCamera(): Unit
+    open fun panCamera(): Unit
+    open fun rotateCamera(): Unit
+    open fun handleResize(): Unit
+    open fun handleEvent(event: Any): Unit
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/controls/TransformControls.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/controls/TransformControls.kt
new file mode 100644
index 00000000..0a1c7a43
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/controls/TransformControls.kt
@@ -0,0 +1,47 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three/examples/jsm/controls/TransformControls.js")
+@file:JsNonModule
+
+package info.laht.threekt.external.controls
+
+import info.laht.threekt.core.Object3D
+import org.w3c.dom.Node
+
+external class TransformControls(`object`: Object3D, domElement: Node = definedExternally) : Object3D {
+
+    var `object`: Object3D
+    var domElement: Node
+
+    fun setSpace(space: String)
+    fun setTranslationSnap(snap: Number)
+    fun setRotationSnap(snap: Number)
+    fun setMode(mode: String)
+    fun setSize(size: Number)
+
+    fun update()
+    fun addEventListener(event: String, listener: () -> Unit)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/exporters/OBJExporter.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/exporters/OBJExporter.kt
new file mode 100644
index 00000000..36eefa9f
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/exporters/OBJExporter.kt
@@ -0,0 +1,36 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three/examples/jsm/exporters/OBJExporter.js")
+@file:JsNonModule
+
+package info.laht.threekt.external.exporters
+
+import info.laht.threekt.core.Object3D
+
+external class OBJExporter {
+
+    fun parse(`object`: Object3D): String
+
+}
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/exporters/STLExporter.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/exporters/STLExporter.kt
new file mode 100644
index 00000000..4c6e3fb1
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/exporters/STLExporter.kt
@@ -0,0 +1,43 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three/examples/jsm/exporters/STLExporter.js")
+@file:JsNonModule
+
+package info.laht.threekt.external.exporters
+
+import info.laht.threekt.core.Object3D
+import org.khronos.webgl.DataView
+
+external class STLExporter {
+
+    fun parse(scene: Object3D): String
+
+}
+
+external class STLBinaryExporter {
+
+    fun parse(scene: Object3D): DataView
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/geometries/ConvexGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/geometries/ConvexGeometry.kt
new file mode 100644
index 00000000..cbc0fbb5
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/geometries/ConvexGeometry.kt
@@ -0,0 +1,11 @@
+@file:JsModule("three/examples/jsm/geometries/ConvexGeometry.js")
+@file:JsNonModule
+
+package info.laht.threekt.external.geometries
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.math.Vector3
+
+external class ConvexGeometry(points: Array<Vector3>) : BufferGeometry
+
+external class ConvexBufferGeometry(points: Array<Vector3>) : BufferGeometry
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/libs/GUIParams.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/libs/GUIParams.kt
new file mode 100644
index 00000000..13d08a29
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/libs/GUIParams.kt
@@ -0,0 +1,21 @@
+package info.laht.threekt.external.libs
+
+/**
+ * @param name The name of this GUI
+ * @param load JSON object representing the saved state of this GUI
+ * @param auto default true
+ * @param parent The GUI I'm nested in
+ * @param closed If true, starts closed
+ * @param closeOnTop If true, close/open button shows on top of the GUI
+ * @param width
+ */
+data class GUIParams(
+    var name: String? = undefined,
+    var auto: Boolean? = undefined,
+    var load: dynamic = undefined,
+    var parent: dat.GUI? = undefined,
+    var closed: Boolean? = undefined,
+    var closeOnTop: Boolean? = undefined,
+    var autoPlace: Boolean? = undefined,
+    var width: Int? = undefined
+)
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/libs/Stats.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/libs/Stats.kt
new file mode 100644
index 00000000..a6c2e86f
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/libs/Stats.kt
@@ -0,0 +1,41 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three/examples/jsm/libs/stats.module.js")
+@file:JsNonModule
+
+package info.laht.threekt.external.libs
+
+import org.w3c.dom.Node
+
+/**
+ * https://github.com/mrdoob/stats.js/
+ */
+external class Stats {
+
+    val dom: Node
+
+    fun update()
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/libs/datgui.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/libs/datgui.kt
new file mode 100644
index 00000000..c3496ea0
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/libs/datgui.kt
@@ -0,0 +1,154 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+@file:JsModule("three/examples/jsm/libs/dat.gui.module.js")
+@file:JsNonModule
+
+package info.laht.threekt.external.libs
+
+import org.w3c.dom.Element
+
+/**
+ * https://github.com/dataarts/dat.gui/blob/master/src/dat/gui/val js
+ */
+external class dat {
+
+    class GUI(
+        params: GUIParams = definedExternally
+    ) {
+
+        companion object {
+
+            val CLASS_AUTO_PLACE: String
+            val CLASS_AUTO_PLACE_CONTAINER: String
+            val CLASS_MAIN: String
+            val CLASS_CONTROLLER_ROW: String
+            val CLASS_TOO_TALL: String
+            val CLASS_CLOSED: String
+            val CLASS_CLOSE_BUTTON: String
+            val CLASS_CLOSE_TOP: String
+            val CLASS_CLOSE_BOTTOM: String
+            val CLASS_DRAG: String
+
+            val DEFAULT_WIDTH: Int
+            val TEXT_CLOSED: String
+            val TEXT_OPEN: String
+
+            fun toggleHide()
+        }
+
+        val domElement: Element
+        val parent: GUI
+        val scrollable: Boolean
+        val autoPlace: Boolean
+        val closeOnTop: Boolean
+        var preset: String
+        var width: Number
+        var name: String
+        var closed: Boolean
+        val load: dynamic
+        var useLocalStorage: Boolean
+
+        fun add(`object`: dynamic, property: String, vararg args: dynamic): Controller
+
+        fun addColor(`object`: dynamic, property: String): ColorController
+
+        fun destroy()
+
+        fun addFolder(name: String): GUI
+
+        fun open()
+
+        fun close()
+
+        fun onResize()
+
+        fun remember(`object`: dynamic)
+
+        fun getRoot(): GUI
+
+        fun getSaveObject(): dynamic
+
+        fun save()
+
+        fun saveAs(presetName: String)
+
+        fun revert(gui: GUI = definedExternally)
+
+        fun listen(controller: Controller)
+
+        fun updateDisplay(controller: Controller)
+
+    }
+
+}
+
+external interface Controller {
+
+    val initialValue: dynamic
+    val domElement: Element
+
+    val `object`: dynamic
+    val property: String
+
+    fun onChange(fnc: () -> Unit)
+    fun onFinishChange(fnc: () -> Unit)
+    fun setValue(newValue: dynamic): Controller
+    fun getValue(): dynamic
+    fun updateDisplay(): Controller
+    fun isModified(): Boolean
+
+}
+
+external interface StringController : Controller
+
+external interface BooleanController : Controller {
+
+    val __checkbox: Element
+    val __prev: dynamic
+
+}
+
+external interface NumberController : Controller {
+
+    val __min: Number
+    val __max: Number
+    val __step: Number
+    val __impliedStep: Number?
+    val __precision: Number?
+
+    fun min(minValue: Number): NumberController
+    fun max(maxValue: Number): NumberController
+    fun step(step: Number): NumberController
+
+}
+
+external interface NumberControllerSlider : NumberController
+external interface NumberControllerBox : NumberController
+
+external interface ColorController : Controller
+
+external interface OptionController : Controller {
+    val __select: Element
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/BabylonLoader.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/BabylonLoader.kt
new file mode 100644
index 00000000..2eae2988
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/BabylonLoader.kt
@@ -0,0 +1,55 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.external.loaders
+
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.loaders.LoadingManager
+import org.w3c.xhr.XMLHttpRequest
+
+external class BabylonLoader(
+    manager: LoadingManager = definedExternally
+) {
+
+    /**
+     * Begin loading from url and call onLoad with the parsed response content.
+     */
+    fun load(
+        url: String,
+        onLoad: (Object3D) -> Unit,
+        onProgress: (XMLHttpRequest) -> Unit = definedExternally,
+        onError: (dynamic) -> Unit = definedExternally
+    )
+
+    /**
+     * Parse a JSON structure and return an object or a scene.
+     * Found objects are converted to Mesh with a BufferGeometry and a default MeshPhongMaterial.
+     * Lights are parsed accordingly.
+     */
+    fun parse(json: String): Object3D
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/GLTFLoader.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/GLTFLoader.kt
new file mode 100644
index 00000000..e353372e
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/GLTFLoader.kt
@@ -0,0 +1,61 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.external.loaders
+
+import info.laht.threekt.animation.AnimationClip
+import info.laht.threekt.cameras.Camera
+import info.laht.threekt.loaders.LoadingManager
+import info.laht.threekt.scenes.Scene
+import org.khronos.webgl.ArrayBuffer
+import org.w3c.xhr.XMLHttpRequest
+
+external interface GLTFOnLoadCallback {
+    val animations: Array<AnimationClip>
+    val scene: Scene
+    val scenes: Array<Scene>
+    val cameras: Array<Camera>
+}
+
+/**
+ * A loader for loading glTF 2.0 resource.
+ * glTF (GL Transmission Format) is an open format specification for efficient delivery
+ * and loading of 3D content. Assets may be provided either in JSON (.gltf) or binary (.glb) format.
+ * External files store textures (.jpg, .png, ...) and additional binary data (.bin).
+ * A glTF asset may deliver one or more scenes, including meshes, materials, textures, skins,
+ * skeletons, morph targets, animations, lights, and/or cameras.
+ */
+external class GLTFLoader(
+    manager: LoadingManager = definedExternally
+) {
+
+    /**
+     * Begin loading from url and call the callback function with the parsed response content.
+     */
+    fun load(
+        url: String,
+        onLoad: (GLTFOnLoadCallback) -> Unit,
+        onProgress: (XMLHttpRequest) -> Unit = definedExternally,
+        onError: (dynamic) -> Unit = definedExternally
+    )
+
+    /**
+     * Set the base path for additional resources.
+     */
+    fun setPath(path: String)
+
+    fun setCrossOrigin(value: String)
+
+    /**
+     * Parse a glTF-based ArrayBuffer and fire onLoad callback when complete.
+     * The argument to onLoad will be an object that contains loaded parts: .scene, .scenes, .cameras, and .animations.
+     */
+    fun parse(data: ArrayBuffer, path: String, onLoad: (GLTFOnLoadCallback) -> Unit, onError: (dynamic) -> Unit)
+
+    /**
+     * Parse a glTF-based JSON String and fire onLoad callback when complete.
+     * The argument to onLoad will be an object that contains loaded parts: .scene, .scenes, .cameras, and .animations.
+     */
+    fun parse(data: String, path: String, onLoad: (GLTFOnLoadCallback) -> Unit, onError: (dynamic) -> Unit)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/LoaderSupport.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/LoaderSupport.kt
new file mode 100644
index 00000000..de1bafcd
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/LoaderSupport.kt
@@ -0,0 +1,41 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.external.loaders
+
+external object LoaderSupport {
+
+    object LoaderBase
+    object Validator
+    object ConsoleLogger
+    object Callbacks
+    object LoadedMeshUserOverride
+    object ResourceDescriptor
+    object PrepData
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/MTLLoader.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/MTLLoader.kt
new file mode 100644
index 00000000..9af877f5
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/MTLLoader.kt
@@ -0,0 +1,53 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.external.loaders
+
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.loaders.LoadingManager
+import org.w3c.xhr.XMLHttpRequest
+
+external class MTLLoader(
+    loadingManager: LoadingManager = definedExternally
+) {
+
+    fun load(
+        url: String,
+        onLoad: (Object3D) -> Unit,
+        onProgress: (XMLHttpRequest) -> Unit = definedExternally,
+        onError: () -> Unit = definedExternally
+    )
+
+    fun setTexturePath(path: String)
+    fun setBaseUrl(path: String)
+    fun setCrossOrigin(value: String)
+
+    fun parse(text: String): MaterialCreator
+
+}
+
+external class MaterialCreator(baseUrl: String = definedExternally)
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/OBJLoader.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/OBJLoader.kt
new file mode 100644
index 00000000..ff4f2150
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/OBJLoader.kt
@@ -0,0 +1,57 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.external.loaders
+
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.loaders.LoadingManager
+import info.laht.threekt.objects.Mesh
+import org.w3c.xhr.XMLHttpRequest
+
+/**
+ * A loader for loading a .obj resource.
+ * The OBJ file format is a simple data-format that represents 3D geometry in a human redeable format as,
+ * the position of each vertex,the UV position of each texture coordinate vertex, vertex normals,
+ * and the faces that make each polygon defined as a list of vertices, and texture vertices.
+ */
+external class OBJLoader(
+    manager: LoadingManager = definedExternally
+) {
+
+    fun load(
+        url: String,
+        onLoad: (Mesh) -> Unit,
+        onProgress: (XMLHttpRequest) -> Unit = definedExternally,
+        onError: (dynamic) -> Unit = definedExternally
+    )
+
+    fun setPath(value: String)
+
+    fun parse(text: String): Object3D
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/OBJLoader2.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/OBJLoader2.kt
new file mode 100644
index 00000000..009e5e81
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/OBJLoader2.kt
@@ -0,0 +1,74 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.external.loaders
+
+import info.laht.threekt.loaders.LoadingManager
+import info.laht.threekt.objects.Mesh
+import org.w3c.xhr.XMLHttpRequest
+
+external interface Detail {
+    var loaderRootNode: Mesh
+    var modelName: String
+    var instanceNo: Int
+}
+
+external interface OBJ2OnLoadCallback {
+    var detail: Detail
+}
+
+external interface LoaderProxy {
+    fun load(
+        url: String,
+        onLoad: (OBJ2OnLoadCallback) -> Unit,
+        onProgress: (XMLHttpRequest) -> Unit = definedExternally,
+        onError: (dynamic) -> Unit = definedExternally,
+        onMeshAlter: () -> Unit = definedExternally,
+        useAsync: Boolean = definedExternally
+    )
+}
+
+external class OBJLoader2(
+    manager: LoadingManager = definedExternally,
+    logger: LoaderSupport.ConsoleLogger = definedExternally
+) : LoaderProxy {
+
+    companion object {
+        val OBJLOADER2_VERSION: String
+        val LoaderBase: LoaderSupport.LoaderBase
+        val Validator: LoaderSupport.Validator
+    }
+
+    override fun load(
+        url: String,
+        onLoad: (OBJ2OnLoadCallback) -> Unit,
+        onProgress: (XMLHttpRequest) -> Unit,
+        onError: (dynamic) -> Unit,
+        onMeshAlter: () -> Unit,
+        useAsync: Boolean
+    )
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/STLLoader.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/STLLoader.kt
new file mode 100644
index 00000000..707fdc0c
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/loaders/STLLoader.kt
@@ -0,0 +1,46 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.external.loaders
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Object3D
+import org.w3c.xhr.XMLHttpRequest
+
+external class STLLoader {
+
+    fun load(
+        url: String,
+        onLoad: (BufferGeometry) -> Unit,
+        onProgress: (XMLHttpRequest) -> Unit = definedExternally,
+        onError: () -> Unit = definedExternally
+    )
+
+    fun parse(data: String): Object3D
+    fun parse(data: ByteArray): Object3D
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/objects/Sky.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/objects/Sky.kt
new file mode 100644
index 00000000..47ad39ef
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/objects/Sky.kt
@@ -0,0 +1,32 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.external.objects
+
+import info.laht.threekt.objects.Mesh
+
+external class Sky : Mesh
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/objects/Water.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/objects/Water.kt
new file mode 100644
index 00000000..9ad3f043
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/objects/Water.kt
@@ -0,0 +1,32 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.external.objects
+
+import info.laht.threekt.objects.Mesh
+
+external class Water(width: Int, height: Int, options: WaterOptions = definedExternally) : Mesh
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/objects/WaterOptions.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/objects/WaterOptions.kt
new file mode 100644
index 00000000..74434846
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/external/objects/WaterOptions.kt
@@ -0,0 +1,47 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+package info.laht.threekt.external.objects
+
+import info.laht.threekt.math.Vector3
+import info.laht.threekt.textures.Texture
+
+data class WaterOptions(
+
+    val textureWidth: Int? = undefined,
+    val textureHeight: Int? = undefined,
+
+    val clipBias: Number? = undefined,
+    val alpha: Number? = undefined,
+    val time: Number? = undefined,
+    val waterNormals: Texture? = undefined,
+    val sunDirection: Vector3? = undefined,
+    val sunColor: Int? = undefined,
+    val waterColor: Int? = undefined,
+    val eye: Vector3? = undefined,
+    val distortionScale: Number? = undefined,
+    val side: Int? = undefined,
+    val fog: Boolean? = undefined
+
+)
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/SceneUtils.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/SceneUtils.kt
new file mode 100644
index 00000000..fb4338fd
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/SceneUtils.kt
@@ -0,0 +1,44 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.materials.Material
+import info.laht.threekt.objects.Group
+import info.laht.threekt.scenes.Scene
+
+/**
+ * A class containing useful utility functions for scene manipulation.
+ */
+external object SceneUtils {
+
+    /**
+     * Creates a new Group that contains a new mesh for each material defined in materials. Beware that this is not the same as an array of materials which defines multiple materials for 1 mesh.
+     * This is mostly useful for objects that need both a material and a wireframe implementation.
+     * @param geometry The geometry for the set of materials.
+     * @param materials The materials for the object.
+     */
+    fun createMultiMaterialObject(geometry: BufferGeometry, materials: List<Material>): Group
+
+    /**
+     * Detaches the object from the parent and adds it back to the scene without moving in worldspace. B
+     * eware that to do this the matrixWorld needs to be updated, this can be done by calling the updateMatrixWorld method on the parent object.
+     * @param child The object to remove from the parent
+     * @param parent The scene to attach the object on.
+     * @param scene The parent to detach the object from.
+     */
+    fun detach(child: Object3D, parent: Object3D, scene: Scene)
+
+    /**
+     * Attaches the object to the parent without the moving the object in the worldspace.
+     * Beware that to do this the matrixWorld needs to be updated, this can be done by calling the updateMatrixWorld method on the parent object.
+     *
+     * @param child The object to remove from the parent
+     * @param parent The scene to attach the object on.
+     * @param scene The parent to detach the object from.
+     */
+    fun attach(child: Object3D, parent: Object3D, scene: Scene)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/Curve.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/Curve.kt
new file mode 100644
index 00000000..f5a8ced6
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/Curve.kt
@@ -0,0 +1,35 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras.core
+
+
+external abstract class Curve<E> {
+
+    var arcLengthDivisions: Int
+
+    fun getPoint(t: Double, optionalTarget: E = definedExternally): E
+
+    fun getPointAt(u: Double, optionalTarget: E = definedExternally): E
+
+    fun getPoints(divisions: Int): Array<E>
+
+    fun getSpacedPoints(divisions: Int): Array<E>
+
+    fun getLength(): Double
+
+    fun updateArcLengths()
+
+    fun getUtoTmapping(u: Double, distance: Double): Double
+
+    fun getTangent(t: Double): E
+
+    fun getTangentAt(u: Double): E
+
+    fun computeFrenetFrames(segments: Int, closed: Boolean = definedExternally)
+
+    open fun clone(): Curve<E>
+
+    fun copy(source: Curve<E>): Curve<E>
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/CurvePath.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/CurvePath.kt
new file mode 100644
index 00000000..18ae2165
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/CurvePath.kt
@@ -0,0 +1,22 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras.core
+
+
+open external class CurvePath<E> : Curve<E> {
+
+    var curves: List<Curve<E>>
+
+    var autoClose: Boolean
+
+    fun add(curve: Curve<E>)
+
+    fun closePath()
+
+    fun getPoint(t: Double)
+
+    override fun clone(): CurvePath<E>
+
+    fun copy(source: CurvePath<E>): CurvePath<E>
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/Path.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/Path.kt
new file mode 100644
index 00000000..7b944a7c
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/Path.kt
@@ -0,0 +1,12 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras.core
+
+import info.laht.threekt.math.Vector2
+
+open external class Path : CurvePath<Vector2> {
+
+    var currentPoint: Vector2
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/Shape.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/Shape.kt
new file mode 100644
index 00000000..0b584f1f
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/Shape.kt
@@ -0,0 +1,8 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras.core
+
+import info.laht.threekt.math.Vector2
+
+external class Shape(points: Array<Vector2>) : Path
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/ShapePath.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/ShapePath.kt
new file mode 100644
index 00000000..bd6e69b9
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/core/ShapePath.kt
@@ -0,0 +1,6 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras.core
+
+external class ShapePath
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/ArcCurve.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/ArcCurve.kt
new file mode 100644
index 00000000..a6f2d172
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/ArcCurve.kt
@@ -0,0 +1,20 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras.curves
+
+external class ArcCurve(
+    aX: Number = definedExternally,
+    aY: Number = definedExternally,
+    xRadius: Number = definedExternally,
+    yRadius: Number = definedExternally,
+    aStartAngle: Number = definedExternally,
+    aEndAngle: Number = definedExternally,
+    aClockwise: Number = definedExternally
+) : EllipseCurve {
+
+    override fun clone(): ArcCurve
+    fun copy(curve: ArcCurve): ArcCurve
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/CatmullRomCurve3.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/CatmullRomCurve3.kt
new file mode 100644
index 00000000..93a5d931
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/CatmullRomCurve3.kt
@@ -0,0 +1,24 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras.curves
+
+import info.laht.threekt.extras.core.Curve
+import info.laht.threekt.math.Vector3
+
+
+external class CatmullRomCurve3(
+    points: Array<Vector3> = definedExternally,
+    closed: Boolean = definedExternally,
+    curveType: String = definedExternally,
+    tension: Double = definedExternally
+) : Curve<Vector3> {
+
+    var points: Array<Vector3>
+    var closed: Boolean
+    var curveType: String
+    var tension: Double
+
+    override fun clone(): CatmullRomCurve3
+    fun copy(curve: CatmullRomCurve3): CatmullRomCurve3
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/EllipseCurve.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/EllipseCurve.kt
new file mode 100644
index 00000000..d3ead4c5
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/EllipseCurve.kt
@@ -0,0 +1,37 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras.curves
+
+import info.laht.threekt.extras.core.Curve
+import info.laht.threekt.math.Vector2
+
+open external class EllipseCurve(
+    aX: Number = definedExternally,
+    aY: Number = definedExternally,
+    xRadius: Number = definedExternally,
+    yRadius: Number = definedExternally,
+    aStartAngle: Number = definedExternally,
+    aEndAngle: Number = definedExternally,
+    aClockwise: Boolean = definedExternally,
+    aRotation: Number = definedExternally
+
+) : Curve<Vector2> {
+
+    var aX: Double
+    var aY: Double
+
+    var xRadius: Double
+    var yRadius: Double
+
+    var aStartAngle: Double
+    var aEndAngle: Double
+
+    var aClockwise: Boolean
+
+    var aRotation: Double
+
+    override fun clone(): EllipseCurve
+    fun copy(curve: EllipseCurve): EllipseCurve
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/LineCurve.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/LineCurve.kt
new file mode 100644
index 00000000..ca9dc41b
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/LineCurve.kt
@@ -0,0 +1,17 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras.curves
+
+import info.laht.threekt.extras.core.Curve
+import info.laht.threekt.math.Vector2
+
+external class LineCurve(
+    v1: Vector2 = definedExternally,
+    v2: Vector2 = definedExternally
+) : Curve<Vector2> {
+
+    override fun clone(): LineCurve
+    fun copy(curve: LineCurve): LineCurve
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/LineCurve3.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/LineCurve3.kt
new file mode 100644
index 00000000..90218d60
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/LineCurve3.kt
@@ -0,0 +1,18 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras.curves
+
+import info.laht.threekt.extras.core.Curve
+import info.laht.threekt.math.Vector3
+
+external class LineCurve3(
+    v1: Vector3 = definedExternally,
+    v2: Vector3 = definedExternally
+) : Curve<Vector3> {
+
+    override fun clone(): LineCurve3
+    fun copy(curve3: LineCurve3): LineCurve3
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/QuadricBezierCurve.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/QuadricBezierCurve.kt
new file mode 100644
index 00000000..aa7b2a95
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/QuadricBezierCurve.kt
@@ -0,0 +1,21 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras.curves
+
+import info.laht.threekt.extras.core.Curve
+import info.laht.threekt.math.Vector2
+
+external class QuadricBezierCurve : Curve<Vector2> {
+
+    constructor(
+        v0: Vector2 = definedExternally,
+        v1: Vector2 = definedExternally,
+        v2: Vector2 = definedExternally
+    )
+
+    override fun clone(): QuadricBezierCurve
+    fun copy(curve: QuadricBezierCurve3): QuadricBezierCurve
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/QuadricBezierCurve3.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/QuadricBezierCurve3.kt
new file mode 100644
index 00000000..b4b30426
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/QuadricBezierCurve3.kt
@@ -0,0 +1,21 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras.curves
+
+import info.laht.threekt.extras.core.Curve
+import info.laht.threekt.math.Vector3
+
+external class QuadricBezierCurve3 : Curve<Vector3> {
+
+    constructor(
+        v0: Vector3 = definedExternally,
+        v1: Vector3 = definedExternally,
+        v2: Vector3 = definedExternally
+    )
+
+    override fun clone(): QuadricBezierCurve3
+    fun copy(curve: QuadricBezierCurve3): QuadricBezierCurve3
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/SplineCurve.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/SplineCurve.kt
new file mode 100644
index 00000000..df3fb8cd
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/extras/curves/SplineCurve.kt
@@ -0,0 +1,18 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.extras.curves
+
+import info.laht.threekt.extras.core.Curve
+import info.laht.threekt.math.Vector2
+
+external class SplineCurve(
+    points: Array<Vector2> = definedExternally
+) : Curve<Vector2> {
+
+    var points: Array<Vector2>
+
+    override fun clone(): SplineCurve
+    fun copy(curve: SplineCurve): SplineCurve
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/BoxGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/BoxGeometry.kt
new file mode 100644
index 00000000..6cf5d5a7
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/BoxGeometry.kt
@@ -0,0 +1,27 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.geometries
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Geometry
+
+
+external class BoxGeometry(
+    width: Number,
+    height: Number,
+    depth: Number,
+    widthSegments: Int = definedExternally,
+    heightSegments: Int = definedExternally,
+    depthSegments: Int = definedExternally
+) : Geometry
+
+
+external class BoxBufferGeometry(
+    width: Number,
+    height: Number,
+    depth: Number,
+    widthSegments: Int = definedExternally,
+    heightSegments: Int = definedExternally,
+    depthSegments: Int = definedExternally
+) : BufferGeometry
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/ConeGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/ConeGeometry.kt
new file mode 100644
index 00000000..ae143fa8
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/ConeGeometry.kt
@@ -0,0 +1,27 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.geometries
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Geometry
+
+external class ConeGeometry(
+    radius: Number = definedExternally,
+    height: Number = definedExternally,
+    radialSegments: Int = definedExternally,
+    heightSegments: Int = definedExternally,
+    openEnded: Boolean = definedExternally,
+    thetaStart: Boolean = definedExternally,
+    thetaLength: Boolean = definedExternally
+) : Geometry
+
+external class ConeBufferGeometry(
+    radius: Number = definedExternally,
+    height: Number = definedExternally,
+    radialSegments: Int = definedExternally,
+    heightSegments: Int = definedExternally,
+    openEnded: Boolean = definedExternally,
+    thetaStart: Boolean = definedExternally,
+    thetaLength: Boolean = definedExternally
+) : BufferGeometry
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/CylinderGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/CylinderGeometry.kt
new file mode 100644
index 00000000..a4801453
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/CylinderGeometry.kt
@@ -0,0 +1,29 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.geometries
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Geometry
+
+external class CylinderGeometry(
+    radiusTop: Number,
+    radiusBottom: Number,
+    height: Number,
+    radialSegments: Int = definedExternally,
+    heightSegments: Int = definedExternally,
+    openEnded: Boolean = definedExternally,
+    thetaStart: Number = definedExternally,
+    thetaLength: Number = definedExternally
+) : Geometry
+
+external class CylinderBufferGeometry(
+    radiusTop: Number,
+    radiusBottom: Number,
+    height: Number,
+    radialSegments: Int = definedExternally,
+    heightSegments: Int = definedExternally,
+    openEnded: Boolean = definedExternally,
+    thetaStart: Number = definedExternally,
+    thetaLength: Number = definedExternally
+) : BufferGeometry
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/EdgesGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/EdgesGeometry.kt
new file mode 100644
index 00000000..8e6568da
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/EdgesGeometry.kt
@@ -0,0 +1,11 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.geometries
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Geometry
+
+external class EdgesGeometry(geometry: Geometry, thresholdAngle: Int = definedExternally) : BufferGeometry {
+    constructor(geometry: BufferGeometry, thresholdAngle: Int = definedExternally)
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/ExtrudedGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/ExtrudedGeometry.kt
new file mode 100644
index 00000000..ab17c116
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/ExtrudedGeometry.kt
@@ -0,0 +1,92 @@
+@file:Suppress(
+    "INTERFACE_WITH_SUPERCLASS",
+    "OVERRIDING_FINAL_MEMBER",
+    "RETURN_TYPE_MISMATCH_ON_OVERRIDE",
+    "CONFLICTING_OVERLOADS",
+    "EXTERNAL_DELEGATION"
+)
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.geometries
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Geometry
+import info.laht.threekt.extras.core.Shape
+import info.laht.threekt.math.Vector2
+
+external interface ExtrudeGeometryOptions {
+    var curveSegments: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+    var steps: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+    var depth: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+    var bevelEnabled: Boolean?
+        get() = definedExternally
+        set(value) = definedExternally
+    var bevelThickness: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+    var bevelSize: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+    var bevelOffset: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+    var bevelSegments: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+    var extrudePath: Any?
+        get() = definedExternally
+        set(value) = definedExternally
+    var UVGenerator: UVGenerator?
+        get() = definedExternally
+        set(value) = definedExternally
+}
+
+external interface UVGenerator {
+    fun generateTopUV(
+        geometry: ExtrudeBufferGeometry,
+        vertices: Array<Number>,
+        indexA: Number,
+        indexB: Number,
+        indexC: Number
+    ): Array<Vector2>
+
+    fun generateSideWallUV(
+        geometry: ExtrudeBufferGeometry,
+        vertices: Array<Number>,
+        indexA: Number,
+        indexB: Number,
+        indexC: Number,
+        indexD: Number
+    ): Array<Vector2>
+}
+
+external open class ExtrudeBufferGeometry : BufferGeometry {
+    constructor(shapes: Shape, options: ExtrudeGeometryOptions?)
+    constructor(shapes: Array<Shape>, options: ExtrudeGeometryOptions?)
+
+    open fun addShapeList(shapes: Array<Shape>, options: Any? = definedExternally)
+    open fun addShape(shape: Shape, options: Any? = definedExternally)
+
+    companion object {
+        var WorldUVGenerator: UVGenerator
+    }
+}
+
+external open class ExtrudeGeometry : Geometry {
+    constructor(shapes: Shape, options: ExtrudeGeometryOptions?)
+    constructor(shapes: Array<Shape>, options: ExtrudeGeometryOptions?)
+
+    open fun addShapeList(shapes: Array<Shape>, options: Any? = definedExternally)
+    open fun addShape(shape: Shape, options: Any? = definedExternally)
+
+    companion object {
+        var WorldUVGenerator: UVGenerator
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/PlaneGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/PlaneGeometry.kt
new file mode 100644
index 00000000..ad758af4
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/PlaneGeometry.kt
@@ -0,0 +1,25 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.geometries
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Geometry
+
+external class PlaneGeometry(
+
+    width: Number,
+    height: Number,
+    widthSegments: Int = definedExternally,
+    heightSegments: Int = definedExternally
+
+) : Geometry
+
+external class PlaneBufferGeometry(
+
+    width: Number,
+    height: Number,
+    widthSegments: Int = definedExternally,
+    heightSegments: Int = definedExternally
+
+) : BufferGeometry
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/SphereGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/SphereGeometry.kt
new file mode 100644
index 00000000..8117ff4c
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/SphereGeometry.kt
@@ -0,0 +1,27 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.geometries
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Geometry
+
+external class SphereGeometry(
+    radius: Number,
+    widthSegments: Int = definedExternally,
+    heightSegments: Int = definedExternally,
+    phiStart: Number = definedExternally,
+    phiLength: Number = definedExternally,
+    thetaStart: Number = definedExternally,
+    thetaLength: Number = definedExternally
+) : Geometry
+
+external class SphereBufferGeometry(
+    radius: Number,
+    widthSegments: Int = definedExternally,
+    heightSegments: Int = definedExternally,
+    phiStart: Number = definedExternally,
+    phiLength: Number = definedExternally,
+    thetaStart: Number = definedExternally,
+    thetaLength: Number = definedExternally
+) : BufferGeometry
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/TextBufferGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/TextBufferGeometry.kt
new file mode 100644
index 00000000..ca9f93b3
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/TextBufferGeometry.kt
@@ -0,0 +1,43 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.geometries
+
+
+external interface TextGeometryParameters {
+    var font: Any?
+        get() = definedExternally
+        set(value) = definedExternally
+    var size: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+    var height: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+    var curveSegments: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+    var bevelEnabled: Boolean?
+        get() = definedExternally
+        set(value) = definedExternally
+    var bevelThickness: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+    var bevelSize: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+    var bevelOffset: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+    var bevelSegments: Number?
+        get() = definedExternally
+        set(value) = definedExternally
+}
+
+external class TextBufferGeometry(text: String, parameters: TextGeometryParameters? = definedExternally) : ExtrudeBufferGeometry {
+    val parameters: TextGeometryParameters
+}
+
+external class TextGeometry(text: String, parameters: TextGeometryParameters? = definedExternally) : ExtrudeGeometry {
+    val parameters: TextGeometryParameters
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/TorusGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/TorusGeometry.kt
new file mode 100644
index 00000000..7406afb3
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/TorusGeometry.kt
@@ -0,0 +1,23 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.geometries
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Geometry
+
+external class TorusGeometry(
+    radius: Number = definedExternally,
+    tube: Number = definedExternally,
+    radialSegments: Int = definedExternally,
+    tubularSegments: Int = definedExternally,
+    arc: Number = definedExternally
+) : Geometry
+
+external class TorusBufferGeometry(
+    radius: Number = definedExternally,
+    tube: Number = definedExternally,
+    radialSegments: Int = definedExternally,
+    tubularSegments: Int = definedExternally,
+    arc: Number = definedExternally
+) : BufferGeometry
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/TubeGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/TubeGeometry.kt
new file mode 100644
index 00000000..38bc560a
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/TubeGeometry.kt
@@ -0,0 +1,46 @@
+package info.laht.threekt.geometries
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Geometry
+import info.laht.threekt.extras.core.Curve
+import info.laht.threekt.math.Vector3
+
+/**
+ * Creates a tube that extrudes along a 3d curve.
+ */
+external class TubeGeometry(
+
+    path: Curve<Vector3>,
+    tubularSegments: Int = definedExternally,
+    radius: Number = definedExternally,
+    radiusSegments: Int = definedExternally,
+    closed: Boolean = definedExternally
+
+) : Geometry {
+
+    var tangents: Array<Vector3>
+    var normals: Array<Vector3>
+    var binormals: Array<Vector3>
+
+}
+
+/**
+ * Creates a tube that extrudes along a 3d curve.
+ */
+external class TubeBufferGeometry(
+
+    path: Curve<Vector3>,
+    tubularSegments: Int = definedExternally,
+    radius: Number = definedExternally,
+    radiusSegments: Int = definedExternally,
+    closed: Boolean = definedExternally
+
+) : BufferGeometry {
+
+    val parameters: dynamic
+
+    val tangents: Array<Vector3>
+    val normals: Array<Vector3>
+    val binormals: Array<Vector3>
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/WireframeGeometry.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/WireframeGeometry.kt
new file mode 100644
index 00000000..4c0a72ee
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/geometries/WireframeGeometry.kt
@@ -0,0 +1,17 @@
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.geometries
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Geometry
+
+/**
+ * This can be used as a helper object to view a Geometry object as a wireframe.
+ */
+external class WireframeGeometry : BufferGeometry {
+
+    constructor(geometry: Geometry)
+    constructor(geometry: BufferGeometry)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/ArrowHelper.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/ArrowHelper.kt
new file mode 100644
index 00000000..ea1764dd
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/ArrowHelper.kt
@@ -0,0 +1,54 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.helpers
+
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.math.Color
+import info.laht.threekt.math.Vector3
+import info.laht.threekt.objects.Line
+import info.laht.threekt.objects.Mesh
+
+external class ArrowHelper(
+    dir: Vector3,
+    origin: Vector3,
+    length: Number,
+    color: Int = definedExternally,
+    headLength: Number = definedExternally,
+    headWidth: Number = definedExternally
+) : Object3D {
+
+    var line: Line
+
+    var cone: Mesh
+
+    fun setDirection(dir: Vector3)
+    fun setLength(length: Number, headLength: Number, headWidth: Number)
+
+    fun setColor(color: Color)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/AxesHelper.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/AxesHelper.kt
new file mode 100644
index 00000000..d4b515be
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/AxesHelper.kt
@@ -0,0 +1,34 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.helpers
+
+import info.laht.threekt.objects.LineSegments
+
+external class AxesHelper(
+    size: Int = definedExternally
+) : LineSegments
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/Box3Helper.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/Box3Helper.kt
new file mode 100644
index 00000000..27aef631
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/Box3Helper.kt
@@ -0,0 +1,49 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.helpers
+
+import info.laht.threekt.math.Box3
+import info.laht.threekt.objects.LineSegments
+
+/**
+ * Helper object to visualize a Box3.
+ *
+ * @param box the Box3 to show.
+ * @param color (optional) the box's color. Default is 0xffff00.
+ */
+external class Box3Helper(
+    box: Box3,
+    color: Int = definedExternally
+) : LineSegments {
+
+    /**
+     * The Box3 being visualized.
+     */
+    var box: Box3
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/CameraHelper.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/CameraHelper.kt
new file mode 100644
index 00000000..6b199f3f
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/CameraHelper.kt
@@ -0,0 +1,43 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.helpers
+
+import info.laht.threekt.cameras.Camera
+import info.laht.threekt.objects.LineSegments
+
+external class CameraHelper(
+    camera: Camera
+) : LineSegments {
+
+
+    var camera: Camera
+
+    fun update()
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/GridHelper.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/GridHelper.kt
new file mode 100644
index 00000000..0d987ae5
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/GridHelper.kt
@@ -0,0 +1,38 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.helpers
+
+import info.laht.threekt.objects.LineSegments
+
+external class GridHelper(
+    size: Int = definedExternally,
+    divisions: Int = definedExternally,
+    color1: Int = definedExternally,
+    color2: Int = definedExternally
+) : LineSegments
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/HemisphereLightHelper.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/HemisphereLightHelper.kt
new file mode 100644
index 00000000..af7333d5
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/helpers/HemisphereLightHelper.kt
@@ -0,0 +1,51 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.helpers
+
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.lights.HemiSphereLight
+import info.laht.threekt.lights.Light
+
+/**
+ * Creates a visual aid consisting of a spherical Mesh for a HemisphereLight.
+ *
+ * @param light The light being visualized.
+ * @param size The size of the mesh used to visualize the light.
+ * @param color (optional) if this is not the set the helper will take the color of the light.
+ */
+external class HemisphereLightHelper(
+    light: HemiSphereLight,
+    size: Number,
+    color: Int = definedExternally
+) : Object3D {
+
+    var light: Light
+
+    fun dispose()
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/ktutils.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/ktutils.kt
new file mode 100644
index 00000000..a0ef343e
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/ktutils.kt
@@ -0,0 +1,9 @@
+@file:Suppress("FunctionName")
+
+package info.laht.threekt
+
+import info.laht.threekt.renderers.WebGLRenderer
+import info.laht.threekt.renderers.WebGLRendererParams
+
+fun WebGLRenderer(builder: WebGLRendererParams.() -> Unit): WebGLRenderer =
+    WebGLRenderer(WebGLRendererParams().apply(builder))
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/AmbientLight.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/AmbientLight.kt
new file mode 100644
index 00000000..0d2cae66
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/AmbientLight.kt
@@ -0,0 +1,39 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.lights
+
+/**
+ * This light globally illuminates all objects in the scene equally.
+ *
+ * This light cannot be used to cast shadows as it does not have a direction.
+ */
+
+external class AmbientLight(
+    color: Int = definedExternally,
+    intensity: Number = definedExternally
+) : Light
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/DirectionalLight.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/DirectionalLight.kt
new file mode 100644
index 00000000..f85d3e24
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/DirectionalLight.kt
@@ -0,0 +1,41 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.lights
+
+import info.laht.threekt.core.Object3D
+
+external class DirectionalLight(
+    color: Int = definedExternally,
+    intensity: Number = definedExternally
+) : Light {
+
+    var target: Object3D
+
+    var shadow: DirectionalLightShadow
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/DirectionalLightShadow.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/DirectionalLightShadow.kt
new file mode 100644
index 00000000..e2886e0b
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/DirectionalLightShadow.kt
@@ -0,0 +1,32 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.lights
+
+external class DirectionalLightShadow : LightShadow {
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/HemiSphereLight.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/HemiSphereLight.kt
new file mode 100644
index 00000000..727a36a1
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/HemiSphereLight.kt
@@ -0,0 +1,47 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.lights
+
+import info.laht.threekt.math.Color
+
+/**
+ * A light source positioned directly above the scene, with color fading from the sky color to the ground color.
+ *
+ * This light cannot be used to cast shadows.
+ */
+external class HemiSphereLight(
+    skyColor: Int = definedExternally,
+    groundColor: Int = definedExternally,
+    intensity: Number = definedExternally
+) : Light {
+
+    var groundColor: Color
+
+    fun copy(light: HemiSphereLight): HemiSphereLight
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/Light.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/Light.kt
new file mode 100644
index 00000000..6ffd9a2d
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/Light.kt
@@ -0,0 +1,59 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.lights
+
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.math.Color
+
+/**
+ * Abstract base class for lights - all other light types inherit the properties and methods described here.
+ */
+open external class Light(
+    color: Int = definedExternally,
+    intensity: Number = definedExternally
+) : Object3D {
+
+    /**
+     * Color of the light. Defaults to a new Color set to white, if not passed in the constructor.
+     */
+    var color: Color
+    /**
+     * The light's intensity, or strength.
+     * In physically correct mode, the product of color * intensity is interpreted as luminous intensity measured in candela.
+     * Default - 1.0.
+     */
+    var intensity: Double
+
+    var receiveShadow: Boolean?
+
+    /**
+     * Copies the value of color and intensity from the source light into this one.
+     */
+    fun copy(source: Light): Light
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/LightShadow.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/LightShadow.kt
new file mode 100644
index 00000000..ef62b843
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/LightShadow.kt
@@ -0,0 +1,48 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.lights
+
+import info.laht.threekt.cameras.Camera
+import info.laht.threekt.math.Matrix4
+import info.laht.threekt.math.Vector2
+
+open external class LightShadow(camera: Camera) {
+
+    var camera: Camera
+
+    var bias: Double
+    var radius: Double
+
+    var mapSize: Vector2
+
+    var matrix: Matrix4
+
+    fun clone(): LightShadow
+    fun copy(source: LightShadow): LightShadow
+    fun toJSON(): String
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/PointLight.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/PointLight.kt
new file mode 100644
index 00000000..6a708e58
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/PointLight.kt
@@ -0,0 +1,43 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.lights
+
+external class PointLight(
+    color: Int = definedExternally,
+    intensity: Number = definedExternally
+) : Light {
+
+    var distance: Double
+    var decay: Double
+
+    var shadow: LightShadow
+
+    fun copy(source: PointLight): PointLight
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/SpotLight.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/SpotLight.kt
new file mode 100644
index 00000000..70c14e6a
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/SpotLight.kt
@@ -0,0 +1,54 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.lights
+
+import info.laht.threekt.core.Object3D
+
+external class SpotLight(
+    color: Int = definedExternally,
+    intensity: Number = definedExternally,
+    distance: Number = definedExternally,
+    angle: Number = definedExternally,
+    penumbra: Number = definedExternally,
+    decay: Number = definedExternally
+) : Light {
+
+    var target: Object3D
+
+    var power: Double
+
+    var distance: Double
+    var angle: Double
+    var penumbra: Double
+    var decay: Double
+
+    var shadow: SpotLightShadow
+
+    fun copy(source: SpotLight): SpotLight
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/SpotLightShadow.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/SpotLightShadow.kt
new file mode 100644
index 00000000..8d8e052f
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/lights/SpotLightShadow.kt
@@ -0,0 +1,34 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.lights
+
+external class SpotLightShadow : LightShadow {
+
+    fun update(light: SpotLight)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/Cache.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/Cache.kt
new file mode 100644
index 00000000..1424d8e7
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/Cache.kt
@@ -0,0 +1,44 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.loaders
+
+external object Cache {
+
+    var enabled: Boolean
+
+    var files: dynamic
+
+    fun add(key: String, file: dynamic)
+
+    fun get(key: String): dynamic
+
+    fun remove(key: String)
+
+    fun clear()
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/CompressedTextureLoader.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/CompressedTextureLoader.kt
new file mode 100644
index 00000000..889c5d18
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/CompressedTextureLoader.kt
@@ -0,0 +1,73 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.loaders
+
+import info.laht.threekt.textures.Texture
+import org.w3c.xhr.XMLHttpRequest
+
+/**
+ * Abstract base class for block based textures loader (dds, pvr, ...).
+ * This uses the FileLoader internally for loading files.
+ *
+ * @param manager The loadingManager for the loader to use. Default is THREE.DefaultLoadingManager.
+ */
+external class CompressedTextureLoader(
+    manager: LoadingManager = definedExternally
+) {
+
+    /**
+     * The loadingManager the loader is using. Default is DefaultLoadingManager.
+     */
+    var manager: LoadingManager
+    /**
+     * The base path from which files will be loaded. See .setPath. Default is undefined.
+     */
+    var path: String
+
+    /**
+     * Begin loading from url and pass the loaded texture to onLoad.
+     *
+     * @param url the path or URL to the file. This can also be a Data URI.
+     * @param onLoad Will be called when load completes. The argument will be the loaded texture.
+     * @param onProgress Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .total and .loaded bytes.
+     * @param onError Will be called when load errors.
+     */
+    fun load(
+        url: String,
+        onLoad: (Texture) -> Unit,
+        onProgress: (XMLHttpRequest) -> Unit = definedExternally,
+        onError: (dynamic) -> Unit = definedExternally
+    )
+
+    /**
+     * Set the base path or URL from which to load files.
+     * This can be useful if you are loading many textures from the same directory.
+     */
+    fun setPath(path: String)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/ImageLoader.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/ImageLoader.kt
new file mode 100644
index 00000000..ade47d72
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/ImageLoader.kt
@@ -0,0 +1,80 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.loaders
+
+import org.w3c.dom.Element
+import org.w3c.xhr.XMLHttpRequest
+
+/**
+ * A loader for loading an Image. This uses the FileLoader internally
+ * for loading files, and is used internally by the CubeTextureLoader, ObjectLoader and TextureLoader.
+ *
+ * @param manager The loadingManager for the loader to use. Default is THREE.DefaultLoadingManager.
+ *
+ */
+external class ImageLoader(
+    manager: LoadingManager = definedExternally
+) {
+
+    /**
+     * If set, assigns the crossOrigin attribute of the image to the value of crossOrigin,
+     * prior to starting the load. Default is undefined.
+     */
+    var crossOrigin: String?
+
+    /**
+     * The base path from which files will be loaded. See .setPath. Default is undefined.
+     */
+    var path: String
+
+    /**
+     * Begin loading from url and return the image object that will contain the data..
+     *
+     * @param url the path or URL to the file. This can also be a Data URI.
+     * @param onLoad Will be called when load completes. The argument will be the loaded image.
+     * @param onProgress Will be called while load progresses. The argument will be the progress event.
+     * @param onError Will be called when load errors.
+     */
+    fun load(
+        url: String,
+        onLoad: (Element) -> Unit,
+        onProgress: (XMLHttpRequest) -> Unit = definedExternally,
+        onError: (dynamic) -> Unit = definedExternally
+    )
+
+    /**
+     * Set the .crossOrigin attribute.
+     */
+    fun setCrossOrigin(value: String)
+
+    /**
+     * Set the base path or URL from which to load files. This can be useful if you are loading many models from the same directory.
+     */
+    fun setPath(path: String)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/JSONLoader.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/JSONLoader.kt
new file mode 100644
index 00000000..db38edb6
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/JSONLoader.kt
@@ -0,0 +1,84 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.loaders
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.materials.Material
+import org.w3c.xhr.XMLHttpRequest
+
+/**
+ * A loader for loading objects in JSON format. This uses the FileLoader internally for loading files.
+ *
+ * @param manager The loadingManager for the loader to use. Default is THREE.DefaultLoadingManager.
+ */
+external class JSONLoader(
+    manager: LoadingManager = definedExternally
+) {
+
+    /**
+     * The loadingManager the loader is using. Default is DefaultLoadingManager.
+     */
+    var manager: LoadingManager
+    /**
+     * Whether the XMLHttpRequest uses credentials. Default is false.
+     */
+    var withCredentials: Boolean
+
+    /**
+     * Begin loading from url and pass the JSON to onLoad.
+     * @param url the path or URL to the file. This can also be a Data URI..
+     * @param onLoad Will be called when load completes. The argument will be the loaded text response.
+     * @param onProgress Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .total and .loaded bytes.
+     * @param onError Will be called when load errors.
+     */
+    fun load(
+        url: String,
+        onLoad: (Object3D) -> Unit,
+        onProgress: (XMLHttpRequest) -> Unit = definedExternally,
+        onError: (dynamic) -> Unit = definedExternally
+    )
+
+    /**
+     * Set the base path or URL from which to load files. This can be useful if you are loading many files from the same directory.
+     */
+    fun setTexturePath(value: String)
+
+    interface ParsedObject {
+        val geometry: BufferGeometry
+        val materials: Array<Material>
+    }
+
+    /**
+     * Parse a JSON structure and return an object containing the parsed geometry and materials.
+     * @param json JSON object to parse.
+     * @param texturePath Base path for textures.
+     */
+    fun parse(json: Any, texturePath: String): ParsedObject
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/Loader.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/Loader.kt
new file mode 100644
index 00000000..2d60ee93
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/Loader.kt
@@ -0,0 +1,46 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.loaders
+
+/**
+ * Base class for implementing loaders.
+ */
+external class Loader {
+
+    object Handlers {
+        fun add(regex: String, loader: Loader)
+        fun get(file: dynamic): Loader
+    }
+
+    var onLoadStart: () -> Unit
+    var onLoadProgress: () -> Unit
+    var onLoadComplete: () -> Unit
+
+    var crossOrigin: String?
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/LoadingManager.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/LoadingManager.kt
new file mode 100644
index 00000000..ebf5d2bc
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/LoadingManager.kt
@@ -0,0 +1,49 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.loaders
+
+external object DefaultLoadingManager : LoadingManager
+
+/**
+ * Handles and keeps track of loaded and pending data. A default global instance of this class is created and
+ * used by loaders if not supplied manually - see DefaultLoadingManager.
+ *
+ * In general that should be sufficient, however there are times when it can be useful to have
+ * seperate loaders - for example if you want to show seperate loading bars for objects and textures.
+ */
+open external class LoadingManager(
+    onLoad: () -> Unit,
+    onProgress: () -> Unit = definedExternally,
+    onError: () -> Unit = definedExternally
+) {
+
+    var onStart: () -> Unit
+    var onLoad: () -> Unit
+    var onProgress: () -> Unit
+    var onError: () -> Unit
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/MaterialLoader.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/MaterialLoader.kt
new file mode 100644
index 00000000..ef30c71f
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/MaterialLoader.kt
@@ -0,0 +1,47 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.loaders
+
+import info.laht.threekt.materials.Material
+import info.laht.threekt.textures.Texture
+import org.w3c.xhr.XMLHttpRequest
+
+external class MaterialLoader {
+
+    fun load(
+        url: String,
+        onLoad: (Material) -> Unit,
+        onProgress: (XMLHttpRequest) -> Unit = definedExternally,
+        onError: (dynamic) -> Unit = definedExternally
+    )
+
+    fun parse(json: String): Material
+
+    fun setTextures(textures: Map<String, Texture>)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/TextureLoader.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/TextureLoader.kt
new file mode 100644
index 00000000..5d57ab88
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/loaders/TextureLoader.kt
@@ -0,0 +1,84 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.loaders
+
+import info.laht.threekt.textures.Texture
+import org.w3c.xhr.XMLHttpRequest
+
+/**
+ * Class for loading a texture. This uses the ImageLoader internally for loading files.
+ */
+external class TextureLoader {
+
+    constructor(manager: LoadingManager = definedExternally)
+
+    /**
+     * If set, assigns the crossOrigin attribute of the image to the value of crossOrigin,
+     * prior to starting the load. Default is undefined.
+     */
+    var crossOrigin: String?
+
+    /**
+     * The loadingManager the loader is using. Default is DefaultLoadingManager.
+     */
+    var manager: LoadingManager
+
+    /**
+     * The base path from which files will be loaded. See .setPath. Default is undefined.
+     */
+    var path: String?
+
+    /**
+     * Begin loading from the given URL and pass the fully loaded texture to onLoad.
+     * The method also returns a new texture object which can directly be used for material creation.
+     * If you do it this way, the texture may pop up in your scene once the respective loading process is finished.
+     *
+     * @param url the path or URL to the file. This can also be a Data URI.
+     * @param onLoad Will be called when load completes. The argument will be the loaded texture.
+     * @param onProgress Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .total and .loaded bytes.
+     * @param onError Will be called when load errors.
+     */
+    fun load(
+        url: String,
+        onLoad: (Texture) -> Unit,
+        onProgress: (XMLHttpRequest) -> Unit = definedExternally,
+        onError: (dynamic) -> Unit = definedExternally
+    ): Texture
+
+    /**
+     * Set the .crossOrigin attribute.
+     */
+    fun setCrossOrigin(value: String)
+
+    /**
+     * Set the base path or URL from which to load files. This can be useful if you are loading many models from the same directory.
+     */
+    fun setPath(path: String)
+
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/LineBasicMaterial.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/LineBasicMaterial.kt
new file mode 100644
index 00000000..308e5a52
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/LineBasicMaterial.kt
@@ -0,0 +1,44 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+import info.laht.threekt.math.Color
+
+
+open external class LineBasicMaterial : Material {
+
+    var color: Color
+
+    var linewidth: Double
+    var linecap: String
+    var linejoin: String
+
+    override fun clone(): LineBasicMaterial
+    fun copy(material: LineBasicMaterial): LineBasicMaterial
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/LineDashedMaterial.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/LineDashedMaterial.kt
new file mode 100644
index 00000000..79ad5ada
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/LineDashedMaterial.kt
@@ -0,0 +1,39 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+external class LineDashedMaterial : LineBasicMaterial {
+
+    var scale: Double
+    var dashSize: Double
+    var gapSize: Double
+
+    override fun clone(): LineDashedMaterial
+    fun copy(lineDashedMaterial: LineDashedMaterial): LineDashedMaterial
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/Material.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/Material.kt
new file mode 100644
index 00000000..3950c963
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/Material.kt
@@ -0,0 +1,130 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+@JsName("Material")
+open external class Material {
+
+    /**
+     * Unique number for this material instance.
+     */
+    val id: Int
+
+    var uuid: String
+    /**
+     * Optional name of the object (doesn't need to be unique). Default is an empty string.
+     */
+    var name: String
+    var type: String
+
+    /**
+     * Whether the material is affected by fog. Default is true.
+     */
+    var fog: Boolean
+    var lights: Boolean
+
+    var blending: Int
+    var side: Int
+    var flatShading: Boolean
+    var vertexColors: Int
+
+    /**
+     * Double in the range of 0.0 - 1.0 indicating how transparent the material is. A value of 0.0 indicates fully transparent, 1.0 is fully opaque.
+    If the material's # .transparent property is not set to true, the material will remain fully opaque and this value will only affect its color.
+    Default is 1.0.
+     */
+    var opacity: Double
+    var transparent: Boolean
+
+    var blendSrc: Int
+    /**
+     * Blending destination. Default is OneMinusSrcAlphaFactor. See the destination factors constants for all possible values.
+    The material's # .blending must be set to CustomBlending for this to have any effect.
+     */
+    var blendDst: Int
+    /**
+     * Blending equation to use when applying blending. Default is AddEquation. See the blending equation constants for all possible values.
+    The material's # .blending must be set to CustomBlending for this to have any effect.
+     */
+    var blendEquation: Int
+    var blendSrcAlpha: Int
+    /**
+     * The tranparency of the .blendDst. Default is null.
+     */
+    var blendDstAlpha: Int?
+    var blendEquationAlpha: Int
+
+
+    var depthFunc: Int
+    var depthTest: Boolean
+    var depthWrite: Boolean
+
+    var colorWrite: Boolean
+
+    var precision: String?
+
+    /**
+     * Sets the polygon offset factor. Default is 0.
+     */
+    var polygonOffset: Boolean
+    var polygonOffsetFactor: Number
+    /**
+     * Sets the polygon offset units. Default is 0.
+     */
+    var polygonOffsetUnits: Number
+
+    var dithering: Boolean
+
+    /**
+     * Sets the alpha value to be used when running an alpha test.
+     * The material will not be renderered if the opacity is lower than this value. Default is 0.
+     */
+    var alphaTest: Double
+    var premultipliedAlpha: Boolean
+
+    var overdraw: Double
+
+    var visible: Boolean
+
+    var userData: Map<String, Any>
+
+    /**
+     * Specifies that the material needs to be updated at the WebGL level. Set it to true if you made changes that need to be reflected in WebGL.
+    This property is automatically set to true when instancing a new material.
+     */
+    var needsUpdate: Boolean
+
+
+    fun toJSON(meta: String = definedExternally): String
+
+    open fun clone(): Material
+    fun copy(material: Material): Material
+
+    fun dispose()
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshBasicMaterial.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshBasicMaterial.kt
new file mode 100644
index 00000000..96eae5e0
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshBasicMaterial.kt
@@ -0,0 +1,67 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+import info.laht.threekt.math.Color
+import info.laht.threekt.textures.Texture
+
+
+external class MeshBasicMaterial : Material {
+
+    var color: Color
+
+    var map: Texture?
+
+    var lightMap: Texture?
+    var lightMapIntensity: Double
+
+    var aoMap: Texture
+    var aoMapIntensity: Double
+
+    var specularMap: Texture?
+
+    var alphaMap: Texture?
+
+    var envMap: Texture?
+    var combine: Int
+    var reflectivity: Double
+    var refractionRatio: Double
+
+    var wireframe: Boolean
+    var wireframeLinewidth: Double
+    var wireframeLinecap: String
+    var wireframeLinejoin: String
+
+    var skinning: Boolean
+    var morphTargets: Boolean
+
+
+    override fun clone(): MeshBasicMaterial
+    fun copy(source: MeshBasicMaterial): MeshBasicMaterial
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshDepthMaterial.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshDepthMaterial.kt
new file mode 100644
index 00000000..185dce93
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshDepthMaterial.kt
@@ -0,0 +1,55 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+import info.laht.threekt.textures.Texture
+
+external class MeshDepthMaterial : Material {
+
+    var depthPacking: Int
+
+    var skinning: Boolean
+    var morphTargets: Boolean
+
+    var map: Texture?
+
+    var alphaMap: Texture?
+
+    var displacementMap: Texture?
+    var displacementScale: Double
+    var displacementBias: Double
+
+    var wireframe: Boolean
+    var wireframeLinewidth: Double
+
+
+    override fun clone(): MeshDepthMaterial
+    fun copy(material: MeshDepthMaterial): MeshDepthMaterial
+
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshLambertMaterial.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshLambertMaterial.kt
new file mode 100644
index 00000000..dcd0670a
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshLambertMaterial.kt
@@ -0,0 +1,70 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+import info.laht.threekt.math.Color
+import info.laht.threekt.textures.Texture
+
+external class MeshLambertMaterial : Material {
+
+    var color: Color
+
+    var map: Texture?
+
+    var lightMap: Texture?
+    var lightMapIntensity: Double
+
+    var aoMap: Texture?
+    var aoMapIntensity: Double
+
+    var emissive: Color
+    var emissiveIntensity: Double
+    var emissiveMap: Texture?
+
+    var specularMap: Texture?
+
+    var alphaMap: Texture?
+
+    var envMap: Texture?
+    var combine: Int
+    var reflectivity: Double
+    var refractionRatio: Double
+
+    var wireframe: Boolean
+    var wireframeLinewidth: Double
+    var wireframeLinecap: String
+    var wireframeLinejoin: String
+
+    var skinning: Boolean
+    var morphTargets: Boolean
+    var morphNormals: Boolean
+
+    override fun clone(): MeshLambertMaterial
+    fun copy(material: MeshLambertMaterial): MeshLambertMaterial
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshNormalMaterial.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshNormalMaterial.kt
new file mode 100644
index 00000000..ea7c0960
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshNormalMaterial.kt
@@ -0,0 +1,56 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+import info.laht.threekt.math.Vector2
+import info.laht.threekt.textures.Texture
+
+external class MeshNormalMaterial : Material {
+
+    var bumpMap: Texture?
+    var bumpScale: Texture?
+
+    var normalMap: Texture?
+    var normalScale: Vector2
+
+    var displacementMap: Texture?
+    var displacementScale: Double
+    var displacementBias: Double
+
+    var wireframe: Boolean
+    var wireframeLinewidth: Double
+
+    var skinning: Boolean
+    var morphTargets: Boolean
+    var morphNormals: Boolean
+
+    override fun clone(): MeshNormalMaterial
+    fun copy(material: MeshNormalMaterial): MeshNormalMaterial
+
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshPhongMaterial.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshPhongMaterial.kt
new file mode 100644
index 00000000..693ba8b4
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshPhongMaterial.kt
@@ -0,0 +1,86 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+import info.laht.threekt.math.Color
+import info.laht.threekt.math.Vector2
+import info.laht.threekt.textures.Texture
+
+
+external class MeshPhongMaterial : Material {
+
+    var color: Color
+    var specular: Color
+    var shininess: Double
+
+    var map: Texture?
+
+    var lightMap: Texture?
+    var lightMapIntensity: Double
+
+    var aoMap: Texture?
+    var aoMapIntensity: Double
+
+    var emissive: Color
+    var emissiveIntensity: Double
+    var emissiveMap: Texture?
+
+    var bumpMap: Texture?
+    var bumpScale: Double
+
+    var normalMap: Texture?
+    var normalScale: Vector2
+
+    var displacementMap: Texture?
+    var displacementScale: Double
+    var displacementBias: Double
+
+    var specularMap: Texture?
+
+    var alphaMap: Texture?
+
+    var envMap: Texture?
+    var combine: Int
+    var reflectivity: Double
+    var refractionRatio: Double
+
+    var wireframe: Boolean
+    var wireframeLinewidth: Double
+    var wireframeLinecap: String
+    var wireframeLinejoin: String
+
+    var skinning: Boolean
+    var morphTargets: Boolean
+    var morphNormals: Boolean
+
+    override fun clone(): MeshPhongMaterial
+    fun copy(source: MeshPhongMaterial): MeshPhongMaterial
+
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshPhysicalMaterial.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshPhysicalMaterial.kt
new file mode 100644
index 00000000..42fef98f
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshPhysicalMaterial.kt
@@ -0,0 +1,41 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+external class MeshPhysicalMaterial : MeshStandardMaterial {
+
+    var reflectivity: Double
+
+    var clearCoat: Double
+    var clearCoatRoughness: Int
+
+    override fun clone(): MeshPhysicalMaterial
+    fun copy(source: MeshPhysicalMaterial): MeshPhysicalMaterial
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshStandardMaterial.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshStandardMaterial.kt
new file mode 100644
index 00000000..19b6901e
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/MeshStandardMaterial.kt
@@ -0,0 +1,86 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+import info.laht.threekt.math.Color
+import info.laht.threekt.math.Vector2
+import info.laht.threekt.textures.Texture
+
+open external class MeshStandardMaterial : Material {
+
+    var color: Color
+
+    var roughness: Double
+    var metalness: Double
+
+    var map: Texture?
+
+    var lightMap: Texture?
+    var lightMapIntensity: Double
+
+    var aoMap: Texture?
+    var aoMapIntensity: Double
+
+    var emissive: Color
+    var emissiveIntensity: Double
+    var emissiveMap: Texture?
+
+    var bumpMap: Texture?
+    var bumpScale: Double
+
+    var normalMap: Texture?
+    var normalScale: Vector2
+
+    var displacementMap: Texture?
+    var displacementScale: Double
+    var displacementBias: Double
+
+    var roughnessMap: Texture?
+
+    var metalnessMap: Texture?
+
+    var alphaMap: Texture?
+
+    var envMap: Texture?
+    var envMapIntensity: Double
+
+    var refractionRatio: Double
+
+    var wireframe: Boolean
+    var wireframeLinewidth: Double
+    var wireframeLinecap: String
+    var wireframeLinejoin: String
+
+    var skinning: Boolean
+    var morphTargets: Boolean
+    var morphNormals: Boolean
+
+    override fun clone(): MeshStandardMaterial
+    fun copy(meshBasicMaterial: MeshBasicMaterial): MeshBasicMaterial
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/PointsMaterial.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/PointsMaterial.kt
new file mode 100644
index 00000000..bb9c4bd8
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/PointsMaterial.kt
@@ -0,0 +1,45 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+import info.laht.threekt.math.Color
+import info.laht.threekt.textures.Texture
+
+external class PointsMaterial : Material {
+
+    var color: Color
+
+    var map: Texture?
+
+    var size: Number
+    var sizeAttentuation: Boolean
+
+    override fun clone(): PointsMaterial
+    fun copy(material: PointsMaterial): PointsMaterial
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/RawShaderMaterial.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/RawShaderMaterial.kt
new file mode 100644
index 00000000..2a096459
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/RawShaderMaterial.kt
@@ -0,0 +1,35 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+external class RawShaderMaterial : ShaderMaterial {
+
+    override fun clone(): RawShaderMaterial
+    fun copy(material: RawShaderMaterial): RawShaderMaterial
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/ShaderMaterial.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/ShaderMaterial.kt
new file mode 100644
index 00000000..016520eb
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/ShaderMaterial.kt
@@ -0,0 +1,65 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+open external class ShaderMaterial : Material {
+
+    var defines: dynamic
+    var uniforms: dynamic
+
+    var vertexShader: String
+    var fragmentShader: String
+    var linewidth: Double
+
+    var wireframe: Boolean
+    var wireframeLinewidth: Double
+
+    var clipping: Boolean
+
+    var skinning: Boolean
+    var morphTargets: Boolean
+    var morphNormals: Boolean
+
+
+    interface Extensions {
+        var derivatives: Boolean
+        var fragDepth: Boolean
+        var drawBuffers: Boolean
+        var shaderTextureLOD: Boolean
+    }
+
+
+    var extensions: Extensions
+
+    var index0AttributeName: String
+
+    override fun clone(): ShaderMaterial
+    fun copy(material: ShaderMaterial): ShaderMaterial
+
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/SpriteMaterial.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/SpriteMaterial.kt
new file mode 100644
index 00000000..32056537
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/materials/SpriteMaterial.kt
@@ -0,0 +1,44 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.materials
+
+import info.laht.threekt.math.Color
+import info.laht.threekt.textures.Texture
+
+external class SpriteMaterial : Material {
+
+    var color: Color
+
+    var map: Texture?
+
+    var rotation: Double
+
+    override fun clone(): SpriteMaterial
+    fun copy(material: SpriteMaterial): SpriteMaterial
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Box2.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Box2.kt
new file mode 100644
index 00000000..c00da8eb
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Box2.kt
@@ -0,0 +1,43 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+external class Box2(
+    min: Vector2 = definedExternally,
+    max: Vector2 = definedExternally
+) {
+
+    var min: Vector2
+    var max: Vector2
+
+    fun set(min: Vector2, max: Vector2): Box2
+
+    fun clone(): Box2
+    fun copy(box: Box2): Box2
+
+}
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Box3.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Box3.kt
new file mode 100644
index 00000000..a34622fa
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Box3.kt
@@ -0,0 +1,162 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+import info.laht.threekt.core.Object3D
+
+/**
+ * Represents a box or cube in 3D space. The main purpose of this is to represent the Minimum Bounding Boxes for objects.
+ *
+ * @param min (optional) Vector3 representing the lower (x, y, z) boundary of the box. Default is ( + Infinity, + Infinity, + Infinity ).
+ * @param max (optional) Vector3 representing the lower upper (x, y, z) boundary of the box. Default is ( - Infinity, - Infinity, - Infinity ).
+ */
+external class Box3(
+    min: Vector3 = definedExternally,
+    max: Vector3 = definedExternally
+) {
+
+    /**
+     * Vector3 representing the lower (x, y, z) boundary of the box.
+     * Default is ( + Infinity, + Infinity, + Infinity ).
+     */
+    var min: Vector3
+    /**
+     * Vector3 representing the lower upper (x, y, z) boundary of the box.
+     * Default is ( - Infinity, - Infinity, - Infinity ).
+     */
+    var max: Vector3
+
+    val isBox3: Boolean
+
+    /**
+     * Sets the lower and upper (x, y, z) boundaries of this box.
+     */
+    fun set(min: Vector3, max: Vector3): Box3
+
+    /**
+     * Sets the upper and lower bounds of this box to include all of the data in array.
+     * @param array An array of position data that the resulting box will envelop.
+     */
+    fun setFromArray(array: DoubleArray): Box3
+
+    fun setFromPoints(points: List<Vector3>): Box3
+
+    /**
+     * Centers this box on center and sets this box's width and height to the values specified in size.
+     * @param center - Desired center position of the box (Vector3).
+     * @param size - Desired x, y and z dimensions of the box (Vector3).
+     */
+    fun setFromCenterAndSize(center: Vector3, size: Vector3): Box3
+
+    /**
+     * Computes the world-axis-aligned bounding box of an Object3D (including its children),
+     * accounting for the object's, and children's, world transforms.
+     * @param `object` Object3D to compute the bounding box of.
+     */
+    fun setFromObject(`object`: Object3D): Box3
+
+    /**
+     * Makes this box empty.
+     */
+    fun makeEmpty(): Box3
+
+    /**
+     * Returns true if this box includes zero points within its bounds.
+    Note that a box with equal lower and upper bounds still includes one point, the one both bounds share.
+     */
+    fun isEmpty(): Boolean
+
+    fun getCenter(optionalTarget: Vector3 = definedExternally): Vector3
+
+    fun getSize(optionalTarget: Vector3 = definedExternally): Vector3
+
+    fun expandByPoint(point: Vector3): Box3
+
+    fun expandByVector(vector: Vector3): Box3
+
+    fun expandByScalar(scalar: Number): Box3
+
+    fun expandByObject(`object`: Object3D): Box3
+
+    fun containsPoint(point: Vector3): Boolean
+
+    fun containsBox(box: Box3): Boolean
+
+    fun intersectsBox(box: Box3): Boolean
+
+    fun intersectsSphere(sphere: Sphere): Boolean
+
+    fun intersectsPlane(plane: Plane): Boolean
+
+    fun clampPoint(point: Vector3, optionalTarget: Vector3 = definedExternally): Vector3
+
+    fun distanceToPoint(point: Vector3): Double
+
+    /**
+     * Gets a Sphere that bounds the box.
+     * @param optionalTarget (optional) if specified, the result will be copied into this Sphere, otherwise a new Sphere will be created.
+     */
+    fun getBoundingSphere(optionalTarget: Sphere = definedExternally): Sphere
+
+    fun intersect(box: Box3): Box3
+
+    /**
+     * Unions this box with box, setting the upper bound of this box to the greater of the two boxes'
+     * upper bounds and the lower bound of this box to the lesser of the two boxes' lower bounds.
+     * @param box Box that will be unioned with this box.
+     */
+    fun union(box: Box3): Box3
+
+    /**
+     * Transforms this Box3 with the supplied matrix.
+     * @param matrix The Matrix4 to apply
+     */
+    fun applyMatrix4(matrix: Matrix4): Box3
+
+    fun translate(offset: Vector3): Box3
+
+    /**
+     * Returns true if this box and box share the same lower and upper bounds.
+     * @param box  Box to compare with this one.
+     */
+    fun equals(box: Box3): Boolean
+
+    /**
+     * Returns a new Box3 with the same min and max as this one.
+     */
+    fun clone(): Box3
+
+    /**
+     * Copies the min and max from box to this box.
+     * @param box  Box3 to copy.
+     */
+    fun copy(box: Box3): Box3
+
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Color.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Color.kt
new file mode 100644
index 00000000..26a2a760
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Color.kt
@@ -0,0 +1,58 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+
+external class Color {
+
+    constructor()
+    constructor(string: String)
+    constructor(hex: Int)
+    constructor(color: Color)
+    constructor(r: Number, g: Number, b: Number)
+
+    var r: Double
+    var g: Double
+    var b: Double
+
+    fun set(value: Color): Color
+    fun set(value: Int): Color
+    fun set(value: String): Color
+
+    fun setScalar(scalar: Double): Color
+    fun setHex(hex: Int): Color
+    fun setRGB(r: Number, g: Number, b: Number): Color
+    fun setHSL(h: Number, s: Number, l: Number): Color
+
+    fun clone(): Color
+    fun copy(color: Color): Color
+
+    fun getHex(): Int
+    fun getHexString(): String
+
+}
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/ColorConstants.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/ColorConstants.kt
new file mode 100644
index 00000000..34475bd1
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/ColorConstants.kt
@@ -0,0 +1,203 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+
+package info.laht.threekt.math
+
+object ColorConstants {
+
+    val aliceblue = 0xF0F8FF
+    val antiquewhite = 0xFAEBD7
+    val aqua = 0x00FFFF
+    val aquamarine = 0x7FFFD4
+    val azure = 0xF0FFFF
+
+    val beige = 0xF5F5DC
+    val bisque = 0xFFE4C4
+    val black = 0x000000
+    val blanchedalmond = 0xFFEBCD
+    val blue = 0x0000FF
+    val blueviolet = 0x8A2BE2
+
+    val brown = 0xA52A2A
+    val burlywood = 0xDEB887
+    val cadetblue = 0x5F9EA0
+    val chartreuse = 0x7FFF00
+    val chocolate = 0xD2691E
+    val coral = 0xFF7F50
+
+    val cornflowerblue = 0x6495ED
+    val cornsilk = 0xFFF8DC
+    val crimson = 0xDC143C
+    val cyan = 0x00FFFF
+    val darkblue = 0x00008B
+    val darkcyan = 0x008B8B
+
+    val darkgoldenrod = 0xB8860B
+    val darkgray = 0xA9A9A9
+    val darkgreen = 0x006400
+    val darkgrey = 0xA9A9A9
+    val darkkhaki = 0xBDB76B
+    val darkmagenta = 0x8B008B
+
+    val darkolivegreen = 0x556B2F
+    val darkorange = 0xFF8C00
+    val darkorchid = 0x9932CC
+    val darkred = 0x8B0000
+    val darksalmon = 0xE9967A
+    val darkseagreen = 0x8FBC8F
+
+    val darkslateblue = 0x483D8B
+    val darkslategray = 0x2F4F4F
+    val darkslategrey = 0x2F4F4F
+    val darkturquoise = 0x00CED1
+    val darkviolet = 0x9400D3
+
+    val deeppink = 0xFF1493
+    val deepskyblue = 0x00BFFF
+    val dimgray = 0x696969
+    val dimgrey = 0x696969
+    val dodgerblue = 0x1E90FF
+    val firebrick = 0xB22222
+
+    val floralwhite = 0xFFFAF0
+    val forestgreen = 0x228B22
+    val fuchsia = 0xFF00FF
+    val gainsboro = 0xDCDCDC
+    val ghostwhite = 0xF8F8FF
+    val gold = 0xFFD700
+
+    val goldenrod = 0xDAA520
+    val gray = 0x808080
+    val green = 0x008000
+    val greenyellow = 0xADFF2F
+    val grey = 0x808080
+    val honeydew = 0xF0FFF0
+    val hotpink = 0xFF69B4
+
+    val indianred = 0xCD5C5C
+    val indigo = 0x4B0082
+    val ivory = 0xFFFFF0
+    val khaki = 0xF0E68C
+    val lavender = 0xE6E6FA
+    val lavenderblush = 0xFFF0F5
+    val lawngreen = 0x7CFC00
+
+    val lemonchiffon = 0xFFFACD
+    val lightblue = 0xADD8E6
+    val lightcoral = 0xF08080
+    val lightcyan = 0xE0FFFF
+    val lightgoldenrodyellow = 0xFAFAD2
+    val lightgray = 0xD3D3D3
+
+    val lightgreen = 0x90EE90
+    val lightgrey = 0xD3D3D3
+    val lightpink = 0xFFB6C1
+    val lightsalmon = 0xFFA07A
+    val lightseagreen = 0x20B2AA
+    val lightskyblue = 0x87CEFA
+
+    val lightslategray = 0x778899
+    val lightslategrey = 0x778899
+    val lightsteelblue = 0xB0C4DE
+    val lightyellow = 0xFFFFE0
+    val lime = 0x00FF00
+    val limegreen = 0x32CD32
+
+    val linen = 0xFAF0E6
+    val magenta = 0xFF00FF
+    val maroon = 0x800000
+    val mediumaquamarine = 0x66CDAA
+    val mediumblue = 0x0000CD
+    val mediumorchid = 0xBA55D3
+
+    val mediumpurple = 0x9370DB
+    val mediumseagreen = 0x3CB371
+    val mediumslateblue = 0x7B68EE
+    val mediumspringgreen = 0x00FA9A
+    val mediumturquoise = 0x48D1CC
+
+    val mediumvioletred = 0xC71585
+    val midnightblue = 0x191970
+    val mintcream = 0xF5FFFA
+    val mistyrose = 0xFFE4E1
+    val moccasin = 0xFFE4B5
+    val navajowhite = 0xFFDEAD
+
+    val navy = 0x000080
+    val oldlace = 0xFDF5E6
+    val olive = 0x808000
+    val olivedrab = 0x6B8E23
+    val orange = 0xFFA500
+    val orangered = 0xFF4500
+    val orchid = 0xDA70D6
+
+    val palegoldenrod = 0xEEE8AA
+    val palegreen = 0x98FB98
+    val paleturquoise = 0xAFEEEE
+    val palevioletred = 0xDB7093
+    val papayawhip = 0xFFEFD5
+    val peachpuff = 0xFFDAB9
+    val
+            peru = 0xCD853F
+    val pink = 0xFFC0CB
+    val plum = 0xDDA0DD
+    val powderblue = 0xB0E0E6
+    val purple = 0x800080
+    val rebeccapurple = 0x663399
+    val red = 0xFF0000
+    val rosybrown = 0xBC8F8F
+
+    val royalblue = 0x4169E1
+    val saddlebrown = 0x8B4513
+    val salmon = 0xFA8072
+    val sandybrown = 0xF4A460
+    val seagreen = 0x2E8B57
+    val seashell = 0xFFF5EE
+
+    val sienna = 0xA0522D
+    val silver = 0xC0C0C0
+    val skyblue = 0x87CEEB
+    val slateblue = 0x6A5ACD
+    val slategray = 0x708090
+    val slategrey = 0x708090
+    val snow = 0xFFFAFA
+
+    val springgreen = 0x00FF7F
+    val steelblue = 0x4682B4
+    val tan = 0xD2B48C
+    val teal = 0x008080
+    val thistle = 0xD8BFD8
+    val tomato = 0xFF6347
+    val turquoise = 0x40E0D0
+
+    val violet = 0xEE82EE
+    val wheat = 0xF5DEB3
+    val white = 0xFFFFFF
+    val whitesmoke = 0xF5F5F5
+    val yellow = 0xFFFF00
+    val yellowgreen = 0x9ACD32
+
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Cylindrical.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Cylindrical.kt
new file mode 100644
index 00000000..9e0cd8ba
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Cylindrical.kt
@@ -0,0 +1,46 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+external class Cylindrical(
+    radius: Number,
+    theta: Number,
+    y: Number
+) {
+
+    var radius: Double
+    var theta: Double
+    var y: Double
+
+    fun set(radius: Number, theta: Number, y: Number): Cylindrical
+    fun clone(): Cylindrical
+    fun copy(cylindrical: Cylindrical): Cylindrical
+    fun setFromVector3(vector3: Vector3): Cylindrical
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Euler.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Euler.kt
new file mode 100644
index 00000000..5b8dc1ce
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Euler.kt
@@ -0,0 +1,74 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+
+external class Euler(
+    x: Number = definedExternally,
+    y: Number = definedExternally,
+    z: Number = definedExternally,
+    order: String = definedExternally
+) {
+
+    companion object {
+        val RotationOrders: Array<String>
+        var DefaultOrder: String
+    }
+
+    var x: Double
+    var y: Double
+    var z: Double
+
+    var order: String
+
+    fun set(x: Number, y: Number, z: Number, order: String = definedExternally): Euler
+
+    fun clone(): Euler
+    fun copy(euler: Euler): Euler
+
+    fun setFromRotationMatrix(m: Matrix4, order: String = definedExternally, update: Boolean = definedExternally): Euler
+
+    fun setFromQuaternion(q: Quaternion, order: String = definedExternally, update: Boolean = definedExternally)
+
+    fun setFromVector3(v: Vector3, order: String = definedExternally): Euler
+
+    fun reorder(order: String): Euler
+
+    fun equals(euler: Euler): Boolean
+
+    fun fromArray(array: DoubleArray): Euler
+
+    fun toArray(array: DoubleArray = definedExternally, offset: Int = definedExternally): DoubleArray
+
+    fun toVector3(optionalResult: Vector3 = definedExternally): Vector3
+
+    fun onChange(callback: () -> Unit)
+
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Frustrum.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Frustrum.kt
new file mode 100644
index 00000000..cce6a0bc
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Frustrum.kt
@@ -0,0 +1,43 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+external class Frustrum(
+    p0: Plane = definedExternally,
+    p1: Plane = definedExternally,
+    p2: Plane = definedExternally,
+    p3: Plane = definedExternally,
+    p4: Plane = definedExternally
+) {
+
+    fun set(p0: Plane, p1: Plane, p2: Plane, p3: Plane, p4: Plane): Frustrum
+
+    fun clone(): Frustrum
+    fun copy(frustrum: Frustrum): Frustrum
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Line3.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Line3.kt
new file mode 100644
index 00000000..6bb1b4e2
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Line3.kt
@@ -0,0 +1,60 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+external class Line3(
+    start: Vector3 = definedExternally,
+    end: Vector3 = definedExternally
+) {
+
+    var start: Vector3
+    var end: Vector3
+
+    fun set(start: Vector3, end: Vector3): Line3
+
+    fun clone(): Line3
+    fun copy(line: Line3): Line3
+
+    fun getCenter(optionalTarget: Vector3 = definedExternally): Vector3
+
+    fun delta(optionalTarget: Vector3): Vector3
+
+    fun distanceSq(): Double
+
+    fun distance(): Double
+
+    fun at(t: Number, optionalTarget: Vector3): Vector3
+
+    fun closestPointToPointParameter(point: Vector3, clampToLine: Boolean = definedExternally): Double
+
+    fun closestPointToPoint(point: Vector3, clampToLine: Boolean, optionalTarget: Vector3 = definedExternally): Vector3
+
+    fun applyMatrix4(matrix: Matrix4): Matrix4
+
+    fun equals(line: Line3): Boolean
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Math.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Math.kt
new file mode 100644
index 00000000..9bae9dba
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Math.kt
@@ -0,0 +1,52 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+
+external class Math {
+
+    companion object {
+
+        val DEG2RAD: Double
+        val RAD2DEG: Double
+
+        fun generateUUID(): String
+
+        fun clamp(value: Int, min: Int, max: Int): Int
+        fun clamp(value: Double, min: Double, max: Double): Double
+
+        fun mapLinear(x: Double, a1: Double, a2: Double, b1: Double, b2: Double): Double
+
+        fun lerp(x: Double, y: Double, t: Double): Double
+
+        fun degToRad(deegrees: Double): Double
+        fun radToDeg(radians: Double): Double
+
+    }
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Matrix3.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Matrix3.kt
new file mode 100644
index 00000000..6f31380b
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Matrix3.kt
@@ -0,0 +1,82 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+import info.laht.threekt.core.BufferAttribute
+
+external class Matrix3 {
+
+    var elements: DoubleArray
+
+    fun set(
+        n11: Number, n12: Number, n13: Number,
+        n21: Number, n22: Number, n23: Number,
+        n31: Number, n32: Number, n33: Number
+    ): Matrix3
+
+    fun identity(): Matrix3
+
+    fun clone(): Matrix3
+    fun copy(m: Matrix3): Matrix3
+
+    fun setFromMatrix4(m: Matrix4): Matrix3
+
+    fun applyToBufferAttribute(attribute: BufferAttribute)
+
+    fun multiply(m: Matrix3): Matrix3
+
+    fun premultiply(m: Matrix3): Matrix3
+
+    fun multiplyMatrices(a: Matrix3, b: Matrix3): Matrix3
+
+    fun multiplyScalar(s: Number): Matrix3
+
+    fun determinant(): Double
+
+    fun getInverse(matrix: Matrix3, throwOnDegenerate: Boolean = definedExternally): Matrix3
+
+    fun transpose(): Matrix3
+
+    fun getNormalMatrix(matrix4: Matrix4): Matrix3
+
+    fun transposeIntoArray(r: DoubleArray): Matrix3
+
+    fun setUvTransform(tx: Number, ty: Number, sx: Number, sy: Number, rotation: Number, cx: Number, cy: Number)
+
+    fun scale(sx: Number, sy: Number): Matrix3
+
+    fun rotate(theta: Number): Matrix3
+    fun translate(tx: Number, ty: Number): Matrix3
+
+    fun equals(matrix: Matrix3): Boolean
+
+    fun fromArray(array: DoubleArray, offset: Int = definedExternally): Matrix3
+
+    fun toArray(array: DoubleArray = definedExternally, offset: Int = definedExternally): DoubleArray
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Matrix4.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Matrix4.kt
new file mode 100644
index 00000000..49ed3bfe
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Matrix4.kt
@@ -0,0 +1,178 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+import info.laht.threekt.core.BufferGeometry
+
+/**
+ * A class representing a 4x4 matrix.
+ *
+ * The most common use of a 4x4 matrix in 3D computer graphics is as a Transformation Matrix. For an introduction to transformation matrices as used in WebGL, check out this tutorial.
+ *
+ * This allows a Vector3 representing a point in 3D space to undergo transformations such as translation, rotation, shear, scale, reflection, orthogonal or perspective projection and so on, by being multiplied by the matrix. This is known as	applying the matrix to the vector.
+ *
+ * Every Object3D has three associated Matrix4s:
+ * Object3D.matrix: This stores the local transform of the object.
+ * Object3D.matrixWorld: The global or world transform of the object. This is the object's transformation relative to its parent. If the object has no parent, then this is identical to the local transform.
+ * Object3D.modelViewMatrix: This represents the object's transformation relative to the camera's coordinate system. An object's modelViewMatrix is the object's matrixWorld pre-multiplied by the camera's matrixWorldInverse.
+ * Cameras have two additional Matrix4s:
+ * Camera.matrixWorldInverse: The view matrix - the inverse of the Camera's matrixWorld.
+ * Camera.projectionMatrix: Represents the information how to project the scene to clip space.
+ * Note: Object3D.normalMatrix is not a Matrix4, but a Matrix3.
+ */
+external class Matrix4 {
+
+    /**
+     * A column-major list of matrix values.
+     */
+    val elements: DoubleArray
+
+    /**
+     * Creates and initializes the Matrix4 to the 4x4 identity matrix.
+     */
+    constructor()
+
+    fun set(
+        n11: Number, n12: Number, n13: Number, n14: Number,
+        n21: Number, n22: Number, n23: Number, n24: Number,
+        n31: Number, n32: Number, n33: Number, n34: Number,
+        n41: Number, n42: Number, n43: Number, n44: Number
+    )
+
+    /**
+     * Resets this matrix to the identity matrix.
+     */
+    fun identity(): Matrix4
+
+    /**
+     * Creates a new Matrix4 with identical elements to this one.
+     */
+    fun clone(): Matrix4
+
+    /**
+     * Copies the elements of matrix m into this matrix.
+     */
+    fun copy(m: Matrix4): Matrix4
+
+    /**
+     * Copies the translation component of the supplied matrix m into this matrix's translation component.
+     */
+    fun copyPosition(m: Matrix4): Matrix4
+
+    fun extractBasis(xAxis: Vector3, yAxis: Vector3, zAxis: Vector3): Matrix4
+
+    /**
+     * Set this to the basis matrix consisting of the three provided basis vectors
+     */
+    fun makeBasis(xAxis: Vector3, yAxis: Vector3, zAxis: Vector3): Matrix4
+
+    fun extractRotation(m: Matrix4): Matrix4
+
+    fun makeRotationFromEuler(euler: Euler): Matrix4
+
+    fun makeRotationFromQuaternion(q: Quaternion): Quaternion
+
+    fun lookAt(eye: Vector3, target: Vector3, up: Vector3): Matrix4
+
+    /**
+     * Post-multiplies this matrix by m.
+     */
+    fun multiply(m: Matrix4): Matrix4
+
+    /**
+     * Pre-multiplies this matrix by m.
+     */
+    fun premultiply(m: Matrix4): Matrix4
+
+    /**
+     * Sets this matrix to a x b.
+     */
+    fun multiplyMatrices(a: Matrix4, b: Matrix4): Matrix4
+
+    /**
+     * Multiplies every component of the matrix by a scalar value s.
+     */
+    fun multiplyScalar(s: Double): Matrix4
+
+    fun applyToBufferAttribute(attribute: BufferGeometry)
+
+    fun determinant(): Double
+
+    fun transpose(): Matrix4
+
+    fun setPosition(v: Vector3): Matrix4
+
+    /**
+     * Set this matrix to the inverse of the passed matrix m, using the method outlined here.
+     * If throwOnDegenerate is not set and the matrix is not invertible, set this to the 4x4 identity matrix.
+     *
+     * @m the matrix to take the inverse of.
+     * @param throwOnDegenerate (optional) If true, throw an error if the matrix is degenerate (not invertible).
+     */
+    fun getInverse(m: Matrix4, throwOnDegenerate: Boolean = definedExternally)
+
+    /**
+     * Multiplies the columns of this matrix by vector v.
+     */
+    fun scale(v: Vector3): Matrix4
+
+    /**
+     * Gets the maximum scale value of the 3 axes.
+     */
+    fun getMaxScaleOnAxis(): Double
+
+    fun makeTranslation(x: Double, y: Double, z: Double): Matrix4
+
+    fun makeRotationX(theta: Double): Matrix4
+
+    fun makeRotationY(theta: Double): Matrix4
+
+    fun makeRotationZ(theta: Double): Matrix4
+
+    fun makeRotationAxis(axis: Vector3, angle: Double): Matrix4
+
+    fun makeScale(x: Double, y: Double, z: Double): Matrix4
+
+    fun makeShear(x: Double, y: Double, z: Double): Matrix4
+
+    fun compose(position: Vector3, quaternion: Vector3, scale: Vector3): Matrix4
+
+    fun decompose(position: Vector3, quaternion: Vector3, scale: Vector3): Matrix4
+
+    fun makePerspective(left: Int, right: Int, top: Int, bottom: Int, near: Double, far: Double): Matrix4
+
+    fun makeOrthographic(left: Int, right: Int, top: Int, bottom: Int, near: Double, far: Double): Matrix4
+
+    fun equals(matrix: Matrix4): Boolean
+
+    fun fromArray(array: DoubleArray, offset: Int = definedExternally): Matrix4
+
+    fun toArray(array: DoubleArray, offset: Int = definedExternally): DoubleArray
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Plane.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Plane.kt
new file mode 100644
index 00000000..f91c0fef
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Plane.kt
@@ -0,0 +1,44 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+external class Plane {
+
+    constructor()
+    constructor(normal: Vector3, constant: Double)
+
+    var normal: Vector3
+    var constant: Double
+
+    fun set(normal: Vector3, constant: Number)
+
+    fun clone(): Plane
+    fun copy(plane: Plane): Plane
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Quaternion.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Quaternion.kt
new file mode 100644
index 00000000..a3a0af8b
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Quaternion.kt
@@ -0,0 +1,86 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+
+external class Quaternion(
+    x: Number = definedExternally,
+    y: Number = definedExternally,
+    z: Number = definedExternally,
+    w: Number = definedExternally
+) {
+
+    companion object {
+        fun slerp(qa: Quaternion, qb: Quaternion, qm: Quaternion, t: Number): Quaternion
+        fun slerpFlat(
+            dst: DoubleArray,
+            dstOffset: Int,
+            src0: DoubleArray,
+            srcOffset0: Int,
+            src1: DoubleArray,
+            srcOffset1: Int,
+            t: Number
+        )
+    }
+
+    var x: Double
+    var y: Double
+    var z: Double
+    var w: Double
+
+    fun set(x: Number, y: Number, z: Number, w: Number)
+    fun clone(): Quaternion
+    fun copy(quaternion: Quaternion): Quaternion
+
+    fun setFromEuler(euler: Euler, update: Boolean = definedExternally)
+    fun setFromAxisAngle(axis: Vector3, angle: Number): Quaternion
+    fun setFromRotationMatrix(m: Matrix4): Quaternion
+    fun setFromUnitVectors(vFrom: Vector3, vTo: Vector3): Vector3
+
+    fun inverse(): Quaternion
+    fun conjugate(): Quaternion
+
+    fun dot(q: Quaternion): Double
+    fun lengthSq(): Double
+    fun length(): Double
+    fun normalize(): Quaternion
+
+    fun multiply(q: Quaternion): Quaternion
+    fun preMultiply(q: Quaternion): Quaternion
+    fun multiplyQuaternions(a: Quaternion, b: Quaternion): Quaternion
+
+    fun slerp(qb: Quaternion, t: Number): Quaternion
+
+    fun equals(quaternion: Quaternion): Boolean
+
+    fun fromArray(array: DoubleArray, offset: Int = definedExternally): Quaternion
+    fun toArray(array: DoubleArray = definedExternally, offset: Int = definedExternally): DoubleArray
+
+    fun onChange(callback: () -> Unit)
+
+}
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Ray.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Ray.kt
new file mode 100644
index 00000000..731a3d2b
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Ray.kt
@@ -0,0 +1,49 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+external class Ray {
+
+    constructor()
+    constructor(origin: Vector3, direction: Vector3)
+
+    var origin: Vector3
+    var direction: Vector3
+
+    fun set(origin: Vector3, direction: Vector3): Ray
+    fun clone(): Ray
+    fun copy(ray: Ray): Ray
+    fun at(t: Double, optionalTarget: Vector3 = definedExternally)
+    fun lookAt(v: Vector3): Ray
+    fun recast(t: Double): Ray
+    fun closestPointToPoint(point: Vector3, optionalTarget: Vector3 = definedExternally): Vector3
+    fun distanceToPoint(point: Vector3): Double
+    fun distanceSqToPoint(point: Vector3): Double
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Sphere.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Sphere.kt
new file mode 100644
index 00000000..cbbc24c4
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Sphere.kt
@@ -0,0 +1,61 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+external class Sphere {
+
+    constructor()
+    constructor(center: Vector3, radius: Number)
+
+    fun setFromPoints(points: Array<Vector3>, optionalCenter: Vector3 = definedExternally): Sphere
+
+    fun clone(): Sphere
+    fun copy(sphere: Sphere): Sphere
+
+    fun empty(): Boolean
+
+    fun containsPoint(point: Vector3): Boolean
+
+    fun distanceToPoint(point: Vector3): Double
+
+    fun intersectsSphere(sphere: Sphere): Boolean
+
+    fun intersectsBox(box: Box3): Boolean
+
+    fun clampPoint(point: Vector3, optionalTarget: Vector3 = definedExternally): Vector3
+
+    fun getBoundingBox(optionalTarget: Box3): Box3
+
+    fun applyMatrix4(matrix: Matrix4): Sphere
+
+    fun translate(offset: Vector3): Sphere
+
+    fun equals(sphere: Sphere): Boolean
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Spherical.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Spherical.kt
new file mode 100644
index 00000000..187dcd94
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Spherical.kt
@@ -0,0 +1,45 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+external class Spherical {
+
+    constructor()
+    constructor(radius: Number, phi: Number, theta: Number)
+
+    var radius: Double
+    var phi: Double
+    var theta: Double
+
+    fun set(radius: Double, phi: Double, theta: Double)
+    fun clone(): Spherical
+    fun copy(other: Spherical): Spherical
+    fun makeSafe(): Spherical
+    fun setFromVector3(vec3: Vector3): Spherical
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Triangle.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Triangle.kt
new file mode 100644
index 00000000..9dd99c52
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Triangle.kt
@@ -0,0 +1,67 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+external class Triangle(
+    a: Vector3 = definedExternally,
+    b: Vector3 = definedExternally,
+    c: Vector3 = definedExternally
+) {
+
+    var a: Vector3
+    var b: Vector3
+    var c: Vector3
+
+    companion object {
+        fun normal(a: Vector3, b: Vector3, c: Vector3, optionalTarget: Vector3 = definedExternally)
+        fun barycoordFromPoint(
+            point: Vector3,
+            a: Vector3,
+            b: Vector3,
+            c: Vector3,
+            optionalTarget: Vector3 = definedExternally
+        )
+
+        fun containsPoint(point: Vector3, a: Vector3, b: Vector3, c: Vector3)
+    }
+
+    fun set(a: Vector3, b: Vector3, c: Vector3): Triangle
+    fun setFromPointsAndIndices(points: Array<Vector3>, i0: Int, i1: Int, i2: Int): Triangle
+    fun clone(): Triangle
+    fun copy(source: Triangle): Triangle
+    fun area(): Double
+    fun midpoint(optionalTarget: Vector3 = definedExternally): Vector3
+    fun normal(optionalTarget: Vector3 = definedExternally): Vector3
+    fun plane(optionalTarget: Plane = definedExternally): Plane
+    fun barycoordFromPoint(point: Vector3, optionalTarget: Vector3 = definedExternally): Vector3
+    fun containsPoint(point: Vector3): Boolean
+    fun closestPointToPoint(point: Vector3, optionalTarget: Vector3 = definedExternally): Vector3
+
+    fun equals(triangle: Triangle): Boolean
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Vector2.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Vector2.kt
new file mode 100644
index 00000000..86049df0
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Vector2.kt
@@ -0,0 +1,130 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+external class Vector2(
+    x: Number = definedExternally,
+    y: Number = definedExternally
+) {
+
+    var x: Double
+    var y: Double
+
+    fun width(): Double
+    fun height(): Double
+
+    fun set(x: Number, y: Number): Vector2
+
+    fun setScalar(scalar: Number): Vector2
+
+    fun setX(x: Number): Vector2
+
+    fun setY(y: Number): Vector2
+
+    fun setComponent(index: Int, value: Number): Vector2
+
+    fun getComponent(index: Int): Double
+
+    fun clone(): Vector2
+
+    fun copy(v: Vector2): Vector2
+
+    fun add(v: Vector2): Vector2
+
+    fun addScalar(s: Number): Vector2
+    fun addVectors(a: Vector2, b: Vector2): Vector2
+
+    fun addScaledVector(v: Vector2, s: Number): Vector2
+    fun sub(v: Vector2): Vector2
+
+    fun subScalar(s: Number): Vector2
+
+    fun subVectors(a: Vector2, b: Vector2): Vector2
+
+    fun multiply(v: Vector2): Vector2
+
+    fun multiplyScalar(scalar: Number): Vector2
+    fun divide(v: Vector2): Vector2
+
+    fun divideScalar(scalar: Number): Vector2
+
+    fun applyMatrix3(m: Matrix3): Vector2
+
+    fun min(v: Vector2): Vector2
+
+    fun max(v: Vector2): Vector2
+
+    fun clamp(min: Vector2, max: Vector2): Vector2
+
+    fun clampScalar(minVal: Number, maxVal: Number): Vector2
+
+    fun clampLength(min: Vector2, max: Vector2): Vector2
+    fun floor(): Vector2
+
+    fun ceil(): Vector2
+
+    fun round(): Vector2
+    fun roundToZero(): Vector2
+
+    fun negate(): Vector2
+
+    fun dot(v: Vector2): Double
+
+    fun lengthSq(): Double
+
+    fun length(): Double
+
+    fun manhattanLength(): Double
+
+    fun normalize(): Vector2
+
+    fun angle(): Double
+
+    fun distanceTo(v: Vector2): Double
+
+    fun distanceToSquared(v: Vector2): Double
+
+    fun manhattanDistanceTo(v: Vector2): Double
+
+    fun setLength(length: Number): Vector2
+
+    fun lerp(v: Vector2, alpha: Number): Vector2
+
+    fun lerpVectors(v1: Vector2, v2: Vector2, alpha: Number): Vector2
+
+    fun equals(v: Vector2): Boolean
+
+    fun fromArray(array: DoubleArray, offset: Int): Vector2
+
+    fun toArray(array: DoubleArray = definedExternally, offset: Int): DoubleArray
+
+    fun fromBufferAttribute(attribute: dynamic, index: Int)
+
+    fun rotateAround(center: Vector2, angle: Number): Vector2
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Vector3.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Vector3.kt
new file mode 100644
index 00000000..85f1c74b
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Vector3.kt
@@ -0,0 +1,388 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+import info.laht.threekt.cameras.Camera
+
+/**
+ * Class representing a 3D vector. A 3D vector is an ordered triplet of numbers (labeled x, y, and z), which can be used to represent a number of things, such as:
+ * A point in 3D space.
+ * A direction and length in 3D space. In three.js the length will always be the Euclidean distance (straight-line distance) from (0, 0, 0) to (x, y, z) and the direction is also measured from (0, 0, 0) towards (x, y, z).
+ * Any arbitrary ordered triplet of numbers.
+ * There are other things a 3D vector can be used to represent, such as momentum vectors and so on, however these are the most common uses in three.js.
+ *
+ * @param x the x value of the vector. Default is 0.
+ * @param y the y value of the vector. Default is 0.
+ * @param z the z value of the vector. Default is 0.
+ */
+
+external open class Vector3(
+    x: Number = definedExternally,
+    y: Number = definedExternally,
+    z: Number = definedExternally
+) {
+
+    var x: Double
+    var y: Double
+    var z: Double
+
+    val isVector3: Boolean
+
+    /**
+     * Sets the x, y and z components of this vector.
+     */
+    fun set(x: Number, y: Number, z: Number)
+
+    /**
+     * Set the x, y and z values of this vector both equal to scalar.
+     */
+    fun setScalar(scalar: Number): Vector3
+
+    /**
+     * Replace this vector's x value with x.
+     */
+    fun setX(x: Number): Vector3
+
+    /**
+     * Replace this vector's y value with y.
+     */
+    fun setY(y: Number): Vector3
+
+    /**
+     * Replace this vector's z value with z.
+     */
+    fun setZ(z: Number): Vector3
+
+    /**
+     * If index equals 0 set x to value.
+     * If index equals 1 set y to value.
+     * If index equals 2 set z to value
+     * @param index 0, 1 or 2.
+     * @param value number
+     */
+    fun setComponent(index: Int, value: Number): Vector3
+
+    fun getComponent(index: Int): Double
+
+    /**
+     * Adds v to this vector.
+     */
+    fun add(v: Vector3): Vector3
+
+    /**
+     * Adds the scalar value s to this vector's x, y and z values.
+     */
+    fun addScalar(s: Number): Vector3
+
+    /**
+     * Sets this vector to a + b.
+     */
+    fun addVectors(a: Vector3, b: Vector3): Vector3
+
+    /**
+     * Adds the multiple of v and s to this vector.
+     */
+    fun addScaledVector(v: Vector3, s: Number): Vector3
+
+    /**
+     * Subtracts v from this vector.
+     */
+    fun sub(v: Vector3): Vector3
+
+    /**
+     * Subtracts s from this vector's x, y and z compnents.
+     */
+    fun subScalar(s: Number): Vector3
+
+    /**
+     * Sets this vector to a - b.
+     */
+    fun subVectors(a: Vector3, b: Vector3): Vector3
+
+    /**
+     * Multiplies this vector by v.
+     */
+    fun multiply(v: Vector3): Vector3
+
+    /**
+     * Multiplies this vector by scalar s.
+     */
+    fun multiplyScalar(scalar: Number): Vector3
+
+    /**
+     * Sets this vector equal to a x b.
+     */
+    fun multiplyVectors(a: Vector3, b: Vector3): Vector3
+
+    /**
+     * Applies euler transform to this vector by converting the Euler object to a Quaternion and applying.
+     */
+    fun applyEuler(euler: Euler): Vector3
+
+    /**
+     * Applies a rotation specified by an axis and an angle to this vector.
+     * @param axis A normalized Vector3.
+     * @param angle An angle in radians.
+     */
+    fun applyAxisAngle(axis: Vector3, angle: Number): Vector3
+
+    /**
+     * Multiplies this vector by m
+     */
+    fun applyMatrix3(m: Matrix3): Vector3
+
+    /**
+     * Multiplies this vector (with an implicit 1 in the 4th dimension) and m, and divides by perspective.
+     */
+    fun applyMatrix4(m: Matrix4): Vector3
+
+    /**
+     * Applies a Quaternion transform to this vector.
+     */
+    fun applyQuaternion(q: Quaternion): Vector3
+
+    /**
+     * Projects the vector with the camera.
+     * @param camera — camera to use in the projection.
+     */
+    fun project(camera: Camera): Vector3
+
+    /**
+     * Unprojects the vector with the camera's projection matrix.
+     * @param camera camera to use in the projection.
+     */
+    fun unproject(camera: Camera): Vector3
+
+    /**
+     * Transforms the direction of this vector by a matrix (the upper left 3 x 3 subset of a m)
+     * and then normalizes the result.
+     */
+    fun transformDirection(m: Matrix4): Vector3
+
+    fun divide(v: Vector3): Vector3
+    fun divideScalar(scalar: Double): Vector3
+    /**
+     * If this vector's x, y or z value is greater than v's x, y or z value, replace that value with the corresponding min value.
+     */
+    fun min(v: Vector3): Vector3
+
+    /**
+     * If this vector's x, y or z value is less than v's x, y or z value, replace that value with the corresponding max value.
+     */
+    fun max(v: Vector3): Vector3
+
+    /**
+     * If this vector's x, y or z value is greater than the max vector's x, y or z value, it is replaced by the corresponding value.
+     *
+     * If this vector's x, y or z value is less than the min vector's x, y or z value, it is replaced by the corresponding value.
+     */
+    fun clamp(min: Vector3, max: Vector3): Vector3
+
+    fun clampScalar(minVal: Number, maxVal: Number): Vector3
+    fun clampLength(min: Number, max: Number): Vector3
+    /**
+     * The components of the vector are rounded down to the nearest integer value.
+     */
+    fun floor(): Vector3
+
+    /**
+     * The x, y and z components of the vector are rounded up to the nearest integer value.
+     */
+    fun ceil(): Vector3
+
+    /**
+     * The components of the vector are rounded to the nearest integer value.
+     */
+    fun round(): Vector3
+
+    /**
+     * The components of the vector are rounded towards zero (up if negative, down if positive) to an integer value.
+     */
+    fun roundToZero(): Vector3
+
+    /**
+     * Inverts this vector - i.e. sets x = -x, y = -y and z = -z.
+     */
+    fun negate(): Vector3
+
+    /**
+     * Calculate the dot product of this vector and v.
+     */
+    fun dot(v: Vector3): Double
+
+    /**
+     * Computes the square of the Euclidean length (straight-line length) from (0, 0, 0) to (x, y, z).
+     * If you are comparing the lengths of vectors, you should compare the length squared instead as it
+     * is slightly more efficient to calculate.
+     */
+    fun lengthSq(): Double
+
+    /**
+     * Computes the Euclidean length (straight-line length) from (0, 0, 0) to (x, y, z).
+     */
+    fun length(): Double
+
+    /**
+     * Computes the Manhattan length of this vector.
+     */
+    fun manhattanLength(): Double
+
+    /**
+     * Convert this vector to a unit vector - that is, sets it equal to the vector with
+     * the same direction as this one, but length 1.
+     */
+    fun normalize(): Vector3
+
+    /**
+     * Set this vector to the vector with the same direction as this one, but length l.
+     */
+    fun setLength(length: Number): Vector3
+
+    /**
+     * Linearly interpolate between this vector and v, where alpha is the distance along
+     * the line - alpha = 0 will be this vector, and alpha = 1 will be v.
+     * @param v Vector3 to interpolate towards.
+     * @param alpha  interpolation factor in the closed interval [0, 1].
+     */
+    fun lerp(v: Vector3, alpha: Number): Vector3
+
+    /**
+     * Sets this vector to be the vector linearly interpolated between v1 and v2 where alpha is the distance along the line
+     * connecting the two vectors - alpha = 0 will be v1, and alpha = 1 will be v2.
+     * @param v1 the starting Vector3.
+     * @param v2 Vector3 to interpolate towards.
+     * @param alpha  interpolation factor in the closed interval [0, 1].
+     */
+    fun lerpVectors(v1: Vector3, v2: Vector3, alpha: Number): Vector3
+
+    /**
+     * Sets this vector to cross product of itself and v.
+     */
+    fun cross(v: Vector3): Vector3
+
+    /**
+     * Sets this vector to cross product of a and b.
+     */
+    fun crossVectors(a: Vector3, b: Vector3): Vector3
+
+    /**
+     * Projects this vector onto another vector.
+     */
+    fun projectOnVector(vector: Vector3): Vector3
+
+    /**
+     * Projects this vector onto a plane by subtracting this vector projected onto the plane's normal from this vector.
+     * @param planeNormal A vector representing a plane normal.
+     */
+    fun projectOnPlane(planeNormal: Vector3): Vector3
+
+    /**
+     * Reflect the vector off of plane orthogonal to normal. Normal is assumed to have unit length.
+     * @param normal the normal to the reflecting plane
+     */
+    fun reflect(normal: Vector3): Vector3
+
+    /**
+     * Returns the angle between this vector and vector v in radians.
+     */
+    fun angleTo(v: Vector3): Double
+
+    /**
+     * Computes the distance from this vector to v.
+     */
+    fun distanceTo(v: Vector3): Double
+
+    /**
+     * Computes the squared distance from this vector to v. If you are just comparing the distance with another distance,
+     * you should compare the distance squared instead as it is slightly more efficient to calculate.
+     */
+    fun distanceToSquared(v: Vector3): Double
+
+    /**
+     * Computes the Manhattan distance from this vector to v.
+     */
+    fun manhattanDistanceTo(v: Vector3): Double
+
+    /**
+     * Sets this vector from the spherical coordinates s.
+     */
+    fun setFromSpherical(s: Spherical): Vector3
+
+    /**
+     * Sets this vector from the cylindrical coordinates c.
+     */
+    fun setFromCylindrical(c: Cylindrical): Vector3
+
+    /**
+     * Sets this vector to the position elements of the transformation matrix m.
+     */
+    fun setFromMatrixPosition(m: Matrix4): Vector3
+
+    /**
+     * Sets this vector to the scale elements of the transformation matrix m.
+     */
+    fun setFromMatrixScale(m: Matrix4): Vector3
+
+    /**
+     * Sets this vector's x, y and z equal to the column of the matrix specified by the index.
+     */
+    fun setFromMatrixColumn(m: Matrix4, index: Int): Vector3
+
+    /**
+     * Sets this vector's x value to be array[ offset + 0 ], y value to be array[ offset + 1 ]
+     * and z value to be array[ offset + 2 ].
+     *
+     * @param array the source array.
+     * @param offset ( optional) offset into the array. Default is 0.
+     *
+     */
+    fun fromArray(array: DoubleArray, offset: Int = definedExternally): Vector3
+
+    fun toArray(array: DoubleArray = definedExternally, offset: Int = definedExternally): DoubleArray
+
+    /**
+     * Sets this vector's x, y and z values from the attribute.
+     */
+    fun fromBufferAttribute(attribute: dynamic, index: Int, offset: Int = definedExternally): Vector3
+
+    /**
+     * Checks for strict equality of this vector and v.
+     */
+    fun equals(v: Vector3): Boolean
+
+    /**
+     * Returns a new vector3 with the same x, y and z values as this one.
+     */
+    fun clone(): Vector3
+
+    /**
+     * Copies the values of the passed vector3's x, y and z properties to this vector3.
+     */
+    fun copy(v: Vector3): Vector3
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Vector4.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Vector4.kt
new file mode 100644
index 00000000..f017f4d4
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/Vector4.kt
@@ -0,0 +1,146 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.math
+
+external class Vector4(
+    x: Number = definedExternally,
+    y: Number = definedExternally,
+    z: Number = definedExternally,
+    w: Number = definedExternally
+) {
+
+    var x: Double
+    var y: Double
+    var z: Double
+    var w: Double
+
+    fun set(x: Number, y: Number, z: Number, w: Number): Vector4
+
+    /**
+     * If index equals 0 returns the x value.
+     * If index equals 1 returns the y value.
+     * If index equals 2 returns the z value.
+     * If index equals 3 returns the w value.
+     * @index 0, 1, 2 or 3.
+     */
+    fun getComponent(index: Int): Double
+
+    /**
+     * Adds v to this vector
+     */
+    fun add(v: Vector4): Vector4
+
+    /**
+     * ets this vector to a + b.
+     */
+    fun addVectors(a: Vector4, b: Vector4): Vector4
+
+    /**
+     * Adds the scalar value s to this vector's x, y, z and w values.
+     */
+    fun addScalar(s: Number): Vector4
+
+    /**
+     * Subtracts v from this vector.
+     */
+    fun sub(v: Vector4): Vector4
+
+    /**
+     * Sets this vector to a - b.
+     */
+    fun subVectors(a: Vector4, b: Vector4): Vector4
+
+
+    /**
+     * Subtracts s from this vector's x, y, z and w compnents.
+     */
+    fun subScalar(s: Number): Vector4
+
+    /**
+     * Inverts this vector - i.e. sets x = -x, y = -y, z = -z and w = -w.
+     */
+    fun negate(): Vector4
+
+    /**
+     * Converts this vector to a unit vector - that is, sets it equal to the vector with the same direction as this one, but length 1.
+     */
+    fun normalize(): Vector4
+
+    /**
+     * Computes the Euclidean length (straight-line length) from (0, 0, 0, 0) to (x, y, z, w).
+     */
+    fun length(): Double
+
+    /**
+     * Computes the Manhattan length of this vector.
+     */
+    fun manhattanLength(): Double
+
+    /**
+     * Computes the square of the Euclidean length (straight-line length) from (0, 0, 0, 0) to (x, y, z, w).
+     * If you are comparing the lengths of vectors, you should compare the length squared instead as it is slightly more efficient to calculate.
+     */
+    fun lengthSq(): Double
+
+    /**
+     * Multiplies this vector by 4 x 4 m.
+     */
+    fun applyMatrix4(m: Matrix4): Vector4
+
+    /**
+     * The x, y, z and w components of the vector are rounded up to the nearest integer value.
+     */
+    fun ceil(): Vector4
+
+    /**
+     * The components of the vector are rounded down to the nearest integer value.
+     */
+    fun floor(): Vector4
+
+    /**
+     * Calculates the dot product of this vector and v.
+     */
+    fun dot(v: Vector4): Vector4
+
+    /**
+     * Returns a new Vector4 with the same x, y, z and w values as this one.
+     */
+    fun clone(): Vector4
+
+
+    /**
+     * Copies the values of the passed Vector4's x, y, z and w properties to this Vector4.
+     */
+    fun copy(source: Vector4): Vector4
+
+    /**
+     * Checks for strict equality of this vector and v.
+     */
+    fun equals(v: Vector4): Boolean
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/operators.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/operators.kt
new file mode 100644
index 00000000..b30baf00
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/math/operators.kt
@@ -0,0 +1,46 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+package info.laht.threekt.math
+
+operator fun Vector3.unaryMinus() = this.clone().negate()
+operator fun Vector3.plusAssign(v: Vector3) = this.let { add(v); Unit }
+operator fun Vector3.plus(v: Vector3) = this.clone().add(v)
+operator fun Vector3.minusAssign(v: Vector3) = this.let { sub(v); Unit }
+operator fun Vector3.minus(v: Vector3) = this.clone().sub(v)
+operator fun Vector3.times(v: Vector3) = this.clone().multiply(v)
+operator fun Vector3.timesAssign(v: Vector3) = this.let { times(v); Unit }
+
+operator fun Vector4.unaryMinus() = this.clone().negate()
+operator fun Vector4.plusAssign(v: Vector4) = this.let { add(v); Unit }
+operator fun Vector4.plus(v: Vector4) = this.clone().add(v)
+operator fun Vector4.minusAssign(v: Vector4) = this.let { sub(v); Unit }
+operator fun Vector4.minus(v: Vector4) = this.clone().sub(v)
+
+operator fun Quaternion.times(q: Quaternion) = this.clone().multiply(q)
+operator fun Quaternion.timesAssign(q: Quaternion) = this.let { multiply(q); Unit }
+
+operator fun Matrix4.times(v: Vector3) = v.applyMatrix4(this).let { this.setPosition(it) }
+operator fun Matrix4.times(m: Matrix4) = this.clone().multiply(m)
+operator fun Matrix4.timesAssign(m: Matrix4) = this.let { multiply(m); Unit }
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Group.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Group.kt
new file mode 100644
index 00000000..e5420f29
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Group.kt
@@ -0,0 +1,33 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.objects
+
+import info.laht.threekt.core.Object3D
+
+external class Group : Object3D
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/LOD.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/LOD.kt
new file mode 100644
index 00000000..89e405ac
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/LOD.kt
@@ -0,0 +1,48 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.objects
+
+import info.laht.threekt.cameras.Camera
+import info.laht.threekt.core.Intersect
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.core.Raycaster
+
+
+external class LOD : Object3D {
+
+    fun copy(source: LOD): LOD
+
+    fun addLevel(`object`: Object3D, distance: Double)
+
+    fun getObjectForDistance(distance: Double): Object3D
+
+    fun raycast(raycaster: Raycaster, intercects: List<Intersect>)
+
+    fun update(camera: Camera)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Line.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Line.kt
new file mode 100644
index 00000000..e0a217bc
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Line.kt
@@ -0,0 +1,47 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.objects
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Intersect
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.core.Raycaster
+import info.laht.threekt.materials.Material
+
+
+open external class Line(geometry: BufferGeometry, material: Material) : Object3D {
+
+    var geometry: BufferGeometry
+    var material: Material
+
+    fun raycast(raycaster: Raycaster, intercects: List<Intersect>)
+
+    fun clone(): Line
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/LineLoop.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/LineLoop.kt
new file mode 100644
index 00000000..50aa390e
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/LineLoop.kt
@@ -0,0 +1,33 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.objects
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.materials.Material
+
+external class LineLoop(geometry: BufferGeometry, material: Material) : Line
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/LineSegments.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/LineSegments.kt
new file mode 100644
index 00000000..3925c7fb
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/LineSegments.kt
@@ -0,0 +1,37 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.objects
+
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Geometry
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.materials.Material
+
+open external class LineSegments(geometry: BufferGeometry, material: Material) : Object3D {
+    constructor(geometry: Geometry, material: Material)
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Mesh.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Mesh.kt
new file mode 100644
index 00000000..6c5b4555
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Mesh.kt
@@ -0,0 +1,49 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.objects
+
+import info.laht.threekt.core.*
+import info.laht.threekt.materials.Material
+
+
+open external class Mesh : Object3D {
+
+    constructor(geometry: Geometry, material: Material)
+    constructor(geometry: BufferGeometry, material: Material)
+
+    var geometry: dynamic
+    var material: Material
+
+    var drawMode: Int
+
+    fun copy(source: Mesh): Mesh
+    fun updateMorphTargets()
+    fun raycast(raycaster: Raycaster, intersects: List<Intersect>)
+    fun clone(): Mesh
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Points.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Points.kt
new file mode 100644
index 00000000..f296937a
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Points.kt
@@ -0,0 +1,44 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.objects
+
+import info.laht.threekt.core.Intersect
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.core.Raycaster
+import info.laht.threekt.materials.Material
+
+external class Points : Object3D {
+
+    var geometry: dynamic
+    var material: Material
+
+    fun raycast(raycaster: Raycaster, intercects: List<Intersect>)
+
+    fun clone(): Points
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Sprite.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Sprite.kt
new file mode 100644
index 00000000..60e2d0de
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/objects/Sprite.kt
@@ -0,0 +1,43 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.objects
+
+import info.laht.threekt.core.Intersect
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.core.Raycaster
+import info.laht.threekt.materials.Material
+
+external class Sprite(material: Material = definedExternally) : Object3D {
+
+    var material: Material
+
+    fun raycast(raycaster: Raycaster, intersects: List<Intersect>)
+
+    fun clone(): Sprite
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGL2Renderer.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGL2Renderer.kt
new file mode 100644
index 00000000..1c5208ad
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGL2Renderer.kt
@@ -0,0 +1,49 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.renderers
+
+import info.laht.threekt.cameras.Camera
+import info.laht.threekt.scenes.Scene
+
+external class WebGL2Renderer {
+
+    constructor(params: WebGL2RendererParams = definedExternally)
+
+    fun clear(
+        color: Boolean = definedExternally,
+        depth: Boolean = definedExternally,
+        stencil: Boolean = definedExternally
+    )
+
+    fun setPixelRatio(value: Number)
+    fun setSize(width: Int, height: Int, updateStyle: Boolean = definedExternally)
+    fun setViewPort(x: Int, y: Int, width: Int, height: Int)
+    fun render(scene: Scene, camera: Camera)
+    fun onContextLost(event: dynamic)
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGL2RendererParams.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGL2RendererParams.kt
new file mode 100644
index 00000000..a2ef9eaf
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGL2RendererParams.kt
@@ -0,0 +1,37 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+package info.laht.threekt.renderers
+
+import org.w3c.dom.Node
+
+data class WebGL2RendererParams(
+    val canvas: Node? = undefined,
+    val alpha: Boolean? = undefined,
+    val depth: Boolean? = undefined,
+    val stencil: Boolean? = undefined,
+    val antialias: Boolean? = undefined,
+    val premultipliedAlpha: Boolean? = undefined,
+    val preserveDrawingBuffer: Boolean? = undefined
+)
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGLRenderTarget.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGLRenderTarget.kt
new file mode 100644
index 00000000..08c44a36
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGLRenderTarget.kt
@@ -0,0 +1,60 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.renderers
+
+import info.laht.threekt.math.Vector4
+import info.laht.threekt.textures.Texture
+
+external class WebGLRenderTarget {
+
+    constructor(width: Int, height: Int, options: WebGLRenderTargetOptions = definedExternally)
+
+    var uuid: String
+
+    var widht: Int
+    var height: Int
+
+    var scissor: Vector4
+    var scissorTest: Boolean
+
+    var viewPort: Vector4
+
+    var texture: Texture
+
+    var depthBuffer: Boolean
+    var stencilBuffer: Boolean
+
+    fun setSize(width: Int, height: Int)
+
+    fun clone(): WebGLRenderTarget
+    fun copy(source: WebGLRenderTarget): WebGLRenderTarget
+
+    fun dispose()
+
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGLRenderTargetOptions.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGLRenderTargetOptions.kt
new file mode 100644
index 00000000..4ba8b941
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGLRenderTargetOptions.kt
@@ -0,0 +1,38 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+package info.laht.threekt.renderers
+
+data class WebGLRenderTargetOptions(
+    val wrapS: Int? = undefined,
+    val wrapT: Int? = undefined,
+    val magFilter: Int? = undefined,
+    val minFilter: Int? = undefined,
+    val format: Int? = undefined,
+    val type: Int? = undefined,
+    val anisotropy: Int? = undefined,
+    val encoding: Int? = undefined,
+    val depthBuffer: Boolean? = undefined,
+    val stencilBuffer: Boolean? = undefined
+)
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGLRenderer.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGLRenderer.kt
new file mode 100644
index 00000000..c46e941e
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGLRenderer.kt
@@ -0,0 +1,101 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.renderers
+
+import info.laht.threekt.cameras.Camera
+import info.laht.threekt.scenes.Scene
+import org.w3c.dom.Node
+
+
+external class WebGLRenderer(params: WebGLRendererParams = definedExternally) {
+    var domElement: Node
+
+    var autoClear: Boolean
+    var autoClearColor: Boolean
+    var autoClearDepth: Boolean
+    var autoClearStencil: Boolean
+
+    var sortObjects: Boolean
+
+    var gammaFactor: Double
+    var gammaInput: Boolean
+    var gammaOutput: Boolean
+
+    var physicallyCorrectLights: Boolean
+
+
+    var toneMapping: Int
+    var toneMappingExposure: Double;
+    var toneMappingWhitePoint: Double
+
+    var maxMorphTargets: Int
+    var maxMorphNormals: Int
+
+    interface Size {
+        val x: Int
+        val y: Int
+    }
+
+    fun clear(
+        color: Boolean = definedExternally,
+        depth: Boolean = definedExternally,
+        stencil: Boolean = definedExternally
+    )
+
+    fun clearColor()
+    fun clearDepth()
+    fun clearStencil()
+
+    fun getSize(): Size
+    fun setSize(width: Int, height: Int, updateStyle: Boolean = definedExternally)
+
+    /**
+     * Sets the clear alpha. Valid input is a float between 0.0 and 1.0.
+     */
+    fun setClearAlpha(alpha: Number)
+
+    /**
+     * Sets the clear color and opacity.
+     */
+    fun setClearColor(color: Int, alpha: Number)
+
+    /**
+     * Render a scene using a camera.
+     * The render is done to the renderTarget (if specified) or to the canvas as usual.
+     * If forceClear is true, the depth, stencil and color buffers will be cleared before rendering even if the renderer's autoClear property is false.
+     * Even with forceClear set to true you can prevent certain buffers being cleared by setting either the autoClearColor, autoClearStencil or autoClearDepth properties to false.
+     */
+    fun render(
+        scene: Scene,
+        camera: Camera,
+        renderTarget: dynamic = definedExternally,
+        forceClear: Boolean = definedExternally
+    )
+
+    fun setPixelRatio(value: Number)
+}
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGLRendererParams.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGLRendererParams.kt
new file mode 100644
index 00000000..e6800673
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/WebGLRendererParams.kt
@@ -0,0 +1,37 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+package info.laht.threekt.renderers
+
+import org.w3c.dom.Node
+
+data class WebGLRendererParams(
+    var canvas: Node? = undefined,
+    var alpha: Boolean? = undefined,
+    var depth: Boolean? = undefined,
+    var stencil: Boolean? = undefined,
+    var antialias: Boolean? = undefined,
+    var premultipliedAlpha: Boolean? = undefined,
+    var preserveDrawingBuffer: Boolean? = undefined
+)
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/shaders/ShaderChunk.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/shaders/ShaderChunk.kt
new file mode 100644
index 00000000..f70c7137
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/shaders/ShaderChunk.kt
@@ -0,0 +1,141 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.renderers.shaders
+
+external object ShaderChunk {
+    val alphamap_fragment: String
+    val alphamap_pars_fragment: String
+    val alphatest_fragment: String
+    val aomap_fragment: String
+    val aomap_pars_fragment: String
+    val begin_vertex: String
+    val beginnormal_vertex: String
+    val bsdfs: String
+    val bumpmap_pars_fragment: String
+    val clipping_planes_fragment: String
+    val clipping_planes_pars_fragment: String
+    val clipping_planes_pars_vertex: String
+    val clipping_planes_vertex: String
+    val color_fragment: String
+    val color_pars_fragment: String
+    val color_pars_vertex: String
+    val color_vertex: String
+    val common: String
+    val cube_uv_reflection_fragment: String
+    val defaultnormal_vertex: String
+    val displacementmap_pars_vertex: String
+    val displacementmap_vertex: String
+    val emissivemap_fragment: String
+    val emissivemap_pars_fragment: String
+    val encodings_fragment: String
+    val encodings_pars_fragment: String
+    val envmap_fragment: String
+    val envmap_pars_fragment: String
+    val envmap_pars_vertex: String
+    val envmap_vertex: String
+    val fog_vertex: String
+    val fog_pars_vertex: String
+    val fog_fragment: String
+    val fog_pars_fragment: String
+    val gradientmap_pars_fragment: String
+    val lightmap_fragment: String
+    val lightmap_pars_fragment: String
+    val lights_lambert_vertex: String
+    val lights_pars: String
+    val lights_phong_fragment: String
+    val lights_phong_pars_fragment: String
+    val lights_physical_fragment: String
+    val lights_physical_pars_fragment: String
+    val lights_template: String
+    val logdepthbuf_fragment: String
+    val logdepthbuf_pars_fragment: String
+    val logdepthbuf_pars_vertex: String
+    val logdepthbuf_vertex: String
+    val map_fragment: String
+    val map_pars_fragment: String
+    val map_particle_fragment: String
+    val map_particle_pars_fragment: String
+    val metalnessmap_fragment: String
+    val metalnessmap_pars_fragment: String
+    val morphnormal_vertex: String
+    val morphtarget_pars_vertex: String
+    val morphtarget_vertex: String
+    val normal_fragment: String
+    val normalmap_pars_fragment: String
+    val packing: String
+    val premultiplied_alpha_fragment: String
+    val project_vertex: String
+    val dithering_fragment: String
+    val dithering_pars_fragment: String
+    val roughnessmap_fragment: String
+    val roughnessmap_pars_fragment: String
+    val shadowmap_pars_fragment: String
+    val shadowmap_pars_vertex: String
+    val shadowmap_vertex: String
+    val shadowmask_pars_fragment: String
+    val skinbase_vertex: String
+    val skinning_pars_vertex: String
+    val skinning_vertex: String
+    val skinnormal_vertex: String
+    val specularmap_fragment: String
+    val specularmap_pars_fragment: String
+    val tonemapping_fragment: String
+    val tonemapping_pars_fragment: String
+    val uv_pars_fragment: String
+    val uv_pars_vertex: String
+    val uv_vertex: String
+    val uv2_pars_fragment: String
+    val uv2_pars_vertex: String
+    val uv2_vertex: String
+    val worldpos_vertex: String
+
+    val cube_frag: String
+    val cube_vert: String
+    val depth_frag: String
+    val depth_vert: String
+    val distanceRGBA_frag: String
+    val distanceRGBA_vert: String
+    val equirect_frag: String
+    val equirect_vert: String
+    val linedashed_frag: String
+    val linedashed_vert: String
+    val meshbasic_frag: String
+    val meshbasic_vert: String
+    val meshlambert_frag: String
+    val meshlambert_vert: String
+    val meshphong_frag: String
+    val meshphong_vert: String
+    val meshphysical_frag: String
+    val meshphysical_vert: String
+    val normal_frag: String
+    val normal_vert: String
+    val points_frag: String
+    val points_vert: String
+    val shadow_frag: String
+    val shadow_vert: String
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/shaders/ShaderLib.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/shaders/ShaderLib.kt
new file mode 100644
index 00000000..f168f740
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/shaders/ShaderLib.kt
@@ -0,0 +1,32 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.renderers.shaders
+
+external object ShaderLib {
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/shaders/UniformsUtil.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/shaders/UniformsUtil.kt
new file mode 100644
index 00000000..fb68d712
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/renderers/shaders/UniformsUtil.kt
@@ -0,0 +1,37 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.renderers.shaders
+
+import info.laht.threekt.core.Uniform
+
+external object UniformsUtil {
+
+    fun merge(uniforms: Array<Uniform>): dynamic
+    fun clone(uniforms_src: Uniform): dynamic
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/scenes/Fog.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/scenes/Fog.kt
new file mode 100644
index 00000000..c5682f36
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/scenes/Fog.kt
@@ -0,0 +1,45 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.scenes
+
+import info.laht.threekt.math.Color
+
+external class Fog {
+
+    var name: String
+    var color: Color
+
+    var near: Int
+    var far: Int
+
+    fun clone(): Fog
+
+    fun toJSON(): dynamic
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/scenes/FogExp2.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/scenes/FogExp2.kt
new file mode 100644
index 00000000..017fd34b
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/scenes/FogExp2.kt
@@ -0,0 +1,44 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.scenes
+
+import info.laht.threekt.math.Color
+
+external class FogExp2 {
+
+    constructor(color: Color)
+    constructor(color: Color, density: Number)
+
+    var color: Color
+    var density: Double
+
+    fun clone(): FogExp2
+    fun toJSON(): dynamic
+
+}
+
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/scenes/Scene.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/scenes/Scene.kt
new file mode 100644
index 00000000..16e5e3cd
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/scenes/Scene.kt
@@ -0,0 +1,62 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.scenes
+
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.materials.Material
+
+/**
+ * Scenes allow you to set up what and where is to be rendered by three.js.
+ * This is where you place objects, lights and cameras.
+ */
+external class Scene : Object3D {
+
+    /**
+     * A fog instance defining the type of fog that affects everything rendered in the scene. Default is null.
+     */
+    var fog: dynamic
+
+    /**
+     * If not null, it will force everything in the scene to be rendered with that material. Default is null.
+     */
+    var overideMaterial: Material
+
+    /**
+     * Default is true. If set, then the renderer checks every frame if the scene and its objects needs matrix updates.
+     * When it isn't, then you have to maintain all matrices in the scene yourself.
+     */
+    var autoUpdate: Boolean
+    /**
+     * If not null, sets the background used when rendering the scene, and is always rendered first.
+     * Can be set to a Color which sets the clear color, a Texture covering the canvas, or a CubeTexture. Default is null.
+     */
+    var background: dynamic
+
+    fun copy(source: Scene, recursive: Boolean = definedExternally): Scene
+
+}
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/textures/CompressedTexture.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/textures/CompressedTexture.kt
new file mode 100644
index 00000000..1d25e61d
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/textures/CompressedTexture.kt
@@ -0,0 +1,59 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.textures
+
+/**
+ * Creates a texture based on data in compressed form, for example from a DDS file.
+ *
+ * For use with the CompressedTextureLoader.
+ */
+external class CompressedTexture(
+    mipmaps: Array<dynamic>,
+    width: Int,
+    height: Int,
+    format: Int = definedExternally,
+    type: Int,
+    mapping: Int = definedExternally,
+    wrapS: Int = definedExternally,
+    wrapT: Int = definedExternally,
+    magFilter: Int = definedExternally,
+    minFilter: Int = definedExternally,
+    anisotropy: Int = definedExternally
+) : Texture {
+
+    /**
+     * False by default. Flipping textures does not work for compressed textures.
+     */
+    override var flipY: Boolean
+
+    /**
+     * False by default. Mipmaps can't be generated for compressed textures
+     */
+    override var generateMipmaps: Boolean
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/textures/CubeTexture.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/textures/CubeTexture.kt
new file mode 100644
index 00000000..b5eb6e89
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/textures/CubeTexture.kt
@@ -0,0 +1,47 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.textures
+
+import org.w3c.dom.Element
+
+external class CubeTexture(
+    image: Element = definedExternally,
+    mapping: Int = definedExternally,
+    wrapS: Int = definedExternally,
+    wrapT: Int = definedExternally,
+    magFilter: Int = definedExternally,
+    minFilter: Int = definedExternally,
+    format: Int = definedExternally,
+    type: Int = definedExternally,
+    anisotropy: Int = definedExternally,
+    encoding: Int = definedExternally
+) : Texture {
+
+    var images: Array<Element>
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/textures/DepthTexture.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/textures/DepthTexture.kt
new file mode 100644
index 00000000..0ce9a308
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/textures/DepthTexture.kt
@@ -0,0 +1,41 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.textures
+
+external class DepthTexture(
+    width: Int,
+    height: Int,
+    type: Int,
+    mapping: Int = definedExternally,
+    wrapS: Int = definedExternally,
+    wrapT: Int = definedExternally,
+    magFilter: Int = definedExternally,
+    minFilter: Int = definedExternally,
+    anisotropy: Int = definedExternally,
+    format: Int = definedExternally
+) : Texture
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/textures/Texture.kt b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/textures/Texture.kt
new file mode 100644
index 00000000..b936c2f5
--- /dev/null
+++ b/dataforge-vis-spatial/src/jsMain/kotlin/info/laht/threekt/textures/Texture.kt
@@ -0,0 +1,238 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2017-2018 Lars Ivar Hatledal
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING  FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+@file:JsModule("three")
+@file:JsNonModule
+
+package info.laht.threekt.textures
+
+import info.laht.threekt.math.Matrix3
+import info.laht.threekt.math.Vector2
+import org.w3c.dom.Element
+
+/**
+ * Create a texture to apply to a surface or as a reflection or refraction map.
+ */
+open external class Texture(
+    image: Element = definedExternally,
+    mapping: Int = definedExternally,
+    wrapS: Int = definedExternally,
+    wrapT: Int = definedExternally,
+    magFilter: Int = definedExternally,
+    minFilter: Int = definedExternally,
+    format: Int = definedExternally,
+    type: Int = definedExternally,
+    anisotropy: Int = definedExternally,
+    encoding: Int = definedExternally
+) {
+
+    companion object {
+        var DEFAULT_IMAGE: Element?
+        var DEFAULT_MAPPING: Int
+    }
+
+
+    /**
+     * This starts at 0 and counts how many times # .needsUpdate is set to true.
+     */
+    var version: Int
+
+    /**
+     * Readonly - unique number for this texture instance.
+     */
+    val id: Int
+
+    /**
+     * UUID of this object instance. This gets automatically assigned, so this shouldn't be edited.
+     */
+    val uuid: String
+
+    /**
+     * Optional name of the object (doesn't need to be unique). Default is an empty string.
+     */
+    var name: String
+    /**
+     * An image object, typically created using the TextureLoader.load method. This can be any image (e.g., PNG, JPG, GIF, DDS)
+     * or video (e.g., MP4, OGG/OGV) type supported by three.js.
+     *
+     * To use video as a texture you need to have a playing HTML5 video element as a source for your texture image and
+     * continuously update this texture as long as video is playing - the VideoTexture class handles this automatically.
+     */
+    var image: Element
+
+    /**
+     * Array of user-specified mipmaps (optional).
+     */
+    var mipmaps: Array<Element>
+
+    /**
+     * How the image is applied to the object. An object type of THREE.UVMapping is the default, where the U,V coordinates are used to apply the map.
+    See the texture constants page for other mapping types.
+     */
+    var mapping: Int
+
+    /**
+     * This defines how the texture is wrapped horizontally and corresponds to U in UV mapping.
+     * The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels.
+     * The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.
+     * See the texture constants page for details.
+     */
+    var wrapS: Int
+    /**
+     * This defines how the texture is wrapped vertically and corresponds to V in UV mapping.
+     * The same choices are available as for # .wrapS .
+
+     * NOTE: tiling of images in textures only functions if image dimensions are powers
+     * of two (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) in terms of pixels.
+     * Individual dimensions need not be equal, but each must be a power of two. This is a limitation of WebGL, not three.js.
+     */
+    var wrapT: Int
+
+    /**
+     * How the texture is sampled when a texel covers more than one pixel.
+     * The default is THREE.LinearFilter, which takes the four closest texels and bilinearly interpolates among them.
+     * The other option is THREE.NearestFilter, which uses the value of the closest texel.
+     * See the texture constants page for details.
+     */
+    var magFilter: Int
+    /**
+     * How the texture is sampled when a texel covers less than one pixel.
+     * The default is THREE.LinearMipMapLinearFilter, which uses mipmapping and a trilinear filter.
+     *
+     * See the texture constants page for all possible choices.
+     */
+    var minFilter: Int
+
+    /**
+     * The number of samples taken along the axis through the pixel that has the highest density of texels.
+     * By default, this value is 1. A higher value gives a less blurry result than a basic mipmap, at the cost of more texture samples being used.
+     * Use renderer.getMaxAnisotropy() to find the maximum valid anisotropy value for the GPU; this value is usually a power of 2.
+     */
+    var anisotropy: Int
+
+    /**
+     * The default is THREE.RGBAFormat, although the TextureLoader will automatically set this to THREE.RGBFormat for JPG images.
+     *
+     * See the texture constants page for details of other formats.
+     */
+    var format: Int
+    /**
+     * This must correspond to the .format. The default is THREE.UnsignedByteType, which will be used for most texture formats.
+     *
+     * See the texture constants page for details of other formats.
+     */
+    var type: Int
+
+    /**
+     * How much a single repetition of the texture is offset from the beginning, in each direction U and V.
+     * Typical range is 0.0 to 1.0. _Note:_ The offset property is a convenience modifier and only affects the Texture's application
+     * to the first set of UVs on a model. If the Texture is used as a map requiring additional UV sets
+     * (e.g. the aoMap or lightMap of most stock materials), those UVs must be manually assigned to achieve the desired offset.
+     */
+    var offset: Vector2
+    /**
+     * How many times the texture is repeated across the surface, in each direction U and V.
+     * If repeat is set greater than 1 in either direction, the corresponding Wrap parameter should
+     * also be set to THREE.RepeatWrapping or THREE.MirroredRepeatWrapping to achieve the desired tiling effect.
+     * _Note:_ The repeat property is a convenience modifier and only affects the Texture's application to the
+     * first set of UVs on a model. If the Texture is used as a map requiring additional UV sets
+     * (e.g. the aoMap or lightMap of most stock materials), those UVs must be manually assigned to
+     * achieve the desired repetiton.
+     */
+    var repeat: Vector2
+    /**
+     * Indicates where the center of rotation is.
+     * To rotate around the center point set this value to (0.5, 0.5). Default value is (0.0, 0.0).
+     */
+    var center: Vector2
+    /**
+     * How much the texture is rotated around the center point, in radians. Postive values are counter-clockwise. Default is 0.
+     */
+    var rotation: Double
+
+    /**
+     * Whether to update the texture's uv-transform # .matrix based on the .offset , .repeat , and .rotation settings.
+     * True by default. Set this to false if you are specifying the uv-transform matrix directly.
+     */
+    var matrixAutoUpdate: Boolean
+    /**
+     * The uv-transform matrix for the texture. Updated by the renderer from the texture properties .offset, .repeat, and .rotation
+     * when the texture's .matrixAutoUpdate property is true.
+     * When .matrixAutoUpdate property is false, this matrix may be set manually. Default is the indentity matrix.
+     */
+    var matrix: Matrix3
+
+    /**
+     * Whether to generate mipmaps (if possible) for a texture. True by default.
+     * Set this to false if you are creating mipmaps manually.
+     */
+    open var generateMipmaps: Boolean
+    /**
+     * False by default, which is the norm for PNG images.
+     * Set to true if the RGB values have been stored premultiplied by alpha.
+     */
+    var premultiplyAlpha: Boolean
+    /**
+     * True by default. Flips the image's Y axis to match the WebGL texture coordinate space
+     */
+    open var flipY: Boolean
+    /**
+     * 4 by default. Specifies the alignment requirements for the start of each pixel row in memory.
+     * The allowable values are 1 (byte-alignment), 2 (rows aligned to even-numbered bytes),
+     * 4 (word-alignment), and 8 (rows start on double-word boundaries).
+     *
+     * See glPixelStorei for more information.
+     */
+    var unpackAlignment: Int
+
+
+    /**
+     * THREE.LinearEncoding is the default. See the texture constants page for details of other formats.
+     *
+     * Note that ff this value is changed on a texture after the material has been used, it is necessary to
+     * trigger a Material.needsUpdate for this value to be realized in the shader.
+     */
+    var encoding: Int
+
+    /**
+     * Set this to true to trigger an update next time the texture is used. Particularly important for setting the wrap mode.
+     */
+    var needsUpdate: Boolean
+
+    /**
+     * Call EventDispatcher.dispatchEvent with a 'dispose' event type.
+     */
+    fun dispose()
+
+    /**
+     * Transform the uv based on the value of this texture's .repeat, .offset, .wrapS, .wrapT and .flipY properties.
+     */
+    fun transformUv(uv: Vector2)
+
+    fun clone(): Texture
+    fun copy(texture: Texture): Texture
+
+    fun toJSON(meta: String): dynamic
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/Canvas3D.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/Canvas3D.kt
deleted file mode 100644
index 211c0d41..00000000
--- a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/Canvas3D.kt
+++ /dev/null
@@ -1,166 +0,0 @@
-package hep.dataforge.vis.spatial.fx
-
-import hep.dataforge.vis.spatial.World.CAMERA_FAR_CLIP
-import hep.dataforge.vis.spatial.World.CAMERA_INITIAL_DISTANCE
-import hep.dataforge.vis.spatial.World.CAMERA_INITIAL_X_ANGLE
-import hep.dataforge.vis.spatial.World.CAMERA_INITIAL_Y_ANGLE
-import hep.dataforge.vis.spatial.World.CAMERA_INITIAL_Z_ANGLE
-import hep.dataforge.vis.spatial.World.CAMERA_NEAR_CLIP
-import javafx.event.EventHandler
-import javafx.scene.*
-import javafx.scene.input.KeyCode
-import javafx.scene.input.KeyEvent
-import javafx.scene.input.MouseEvent
-import javafx.scene.input.ScrollEvent
-import javafx.scene.paint.Color
-import org.fxyz3d.utils.CameraTransformer
-import tornadofx.*
-
-class Canvas3D : Fragment() {
-    val world: Group = Group()
-
-    private val camera = PerspectiveCamera().apply {
-        nearClip = CAMERA_NEAR_CLIP
-        farClip = CAMERA_FAR_CLIP
-        translateZ = CAMERA_INITIAL_DISTANCE
-    }
-
-    private val cameraShift = CameraTransformer().apply {
-        val cameraFlip = CameraTransformer()
-        cameraFlip.children.add(camera)
-        cameraFlip.setRotateZ(180.0)
-        children.add(cameraFlip)
-    }
-
-    val translationXProperty get() = cameraShift.t.xProperty()
-    var translateX by translationXProperty
-    val translationYProperty get() = cameraShift.t.yProperty()
-    var translateY by translationYProperty
-    val translationZProperty get() = cameraShift.t.zProperty()
-    var translateZ by translationZProperty
-
-    private val cameraRotation = CameraTransformer().apply {
-        children.add(cameraShift)
-        ry.angle = CAMERA_INITIAL_Y_ANGLE
-        rx.angle = CAMERA_INITIAL_X_ANGLE
-        rz.angle = CAMERA_INITIAL_Z_ANGLE
-    }
-
-    val rotationXProperty get() = cameraRotation.rx.angleProperty()
-    var angleX by rotationXProperty
-    val rotationYProperty get() = cameraRotation.ry.angleProperty()
-    var angleY by rotationYProperty
-    val rotationZProperty get() = cameraRotation.rz.angleProperty()
-    var angleZ by rotationZProperty
-
-
-    override val root = borderpane {
-        center = SubScene(
-            Group(world, cameraRotation).apply { DepthTest.ENABLE },
-            1024.0,
-            768.0,
-            true,
-            SceneAntialiasing.BALANCED
-        ).apply {
-            fill = Color.GREY
-            this.camera = this@Canvas3D.camera
-            id = "canvas"
-            handleKeyboard(this)
-            handleMouse(this)
-        }
-    }
-
-
-    private fun handleKeyboard(scene: SubScene) {
-        scene.onKeyPressed = EventHandler<KeyEvent> { event ->
-            if (event.isControlDown) {
-                when (event.code) {
-                    KeyCode.Z -> {
-                        cameraShift.t.x = 0.0
-                        cameraShift.t.y = 0.0
-                        camera.translateZ = CAMERA_INITIAL_DISTANCE
-                        cameraRotation.ry.angle = CAMERA_INITIAL_Y_ANGLE
-                        cameraRotation.rx.angle = CAMERA_INITIAL_X_ANGLE
-                    }
-//                    KeyCode.X -> axisGroup.isVisible = !axisGroup.isVisible
-//                    KeyCode.S -> snapshot()
-//                    KeyCode.DIGIT1 -> pixelMap.filterKeys { it.getLayerNumber() == 1 }.values.forEach {
-//                        toggleTransparency(
-//                            it
-//                        )
-//                    }
-//                    KeyCode.DIGIT2 -> pixelMap.filterKeys { it.getLayerNumber() == 2 }.values.forEach {
-//                        toggleTransparency(
-//                            it
-//                        )
-//                    }
-//                    KeyCode.DIGIT3 -> pixelMap.filterKeys { it.getLayerNumber() == 3 }.values.forEach {
-//                        toggleTransparency(
-//                            it
-//                        )
-//                    }
-                    else -> {
-                    }//do nothing
-                }
-            }
-        }
-    }
-
-    private fun handleMouse(scene: SubScene) {
-
-        var mousePosX: Double = 0.0
-        var mousePosY: Double = 0.0
-        var mouseOldX: Double = 0.0
-        var mouseOldY: Double = 0.0
-        var mouseDeltaX: Double = 0.0
-        var mouseDeltaY: Double = 0.0
-
-        scene.onMousePressed = EventHandler<MouseEvent> { me ->
-            mousePosX = me.sceneX
-            mousePosY = me.sceneY
-            mouseOldX = me.sceneX
-            mouseOldY = me.sceneY
-        }
-
-        scene.onMouseDragged = EventHandler<MouseEvent> { me ->
-            mouseOldX = mousePosX
-            mouseOldY = mousePosY
-            mousePosX = me.sceneX
-            mousePosY = me.sceneY
-            mouseDeltaX = mousePosX - mouseOldX
-            mouseDeltaY = mousePosY - mouseOldY
-
-            val modifier = when {
-                me.isControlDown -> CONTROL_MULTIPLIER
-                me.isShiftDown -> SHIFT_MULTIPLIER
-                else -> 1.0
-            }
-
-            if (me.isPrimaryButtonDown) {
-                cameraRotation.rz.angle =
-                    cameraRotation.rz.angle + mouseDeltaX * MOUSE_SPEED * modifier * ROTATION_SPEED
-                cameraRotation.rx.angle =
-                    cameraRotation.rx.angle + mouseDeltaY * MOUSE_SPEED * modifier * ROTATION_SPEED
-            } else if (me.isSecondaryButtonDown) {
-                cameraShift.t.x = cameraShift.t.x + mouseDeltaX * MOUSE_SPEED * modifier * TRACK_SPEED
-                cameraShift.t.y = cameraShift.t.y + mouseDeltaY * MOUSE_SPEED * modifier * TRACK_SPEED
-            }
-        }
-        scene.onScroll = EventHandler<ScrollEvent> { event ->
-            val z = camera.translateZ
-            val newZ = z + MOUSE_SPEED * event.deltaY * RESIZE_SPEED
-            camera.translateZ = newZ
-        }
-    }
-
-    companion object {
-        private const val AXIS_LENGTH = 2000.0
-        private const val CONTROL_MULTIPLIER = 0.1
-        private const val SHIFT_MULTIPLIER = 10.0
-        private const val MOUSE_SPEED = 0.1
-        private const val ROTATION_SPEED = 2.0
-        private const val TRACK_SPEED = 6.0
-        private const val RESIZE_SPEED = 50.0
-        private const val LINE_WIDTH = 3.0
-    }
-}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/DisplayObjectFXListener.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/DisplayObjectFXListener.kt
deleted file mode 100644
index b0d3089e..00000000
--- a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/DisplayObjectFXListener.kt
+++ /dev/null
@@ -1,42 +0,0 @@
-package hep.dataforge.vis.spatial.fx
-
-import hep.dataforge.meta.*
-import hep.dataforge.names.Name
-import hep.dataforge.names.toName
-import hep.dataforge.vis.common.VisualObject
-import javafx.beans.binding.ObjectBinding
-import tornadofx.*
-
-/**
- * A caching binding collection for [VisualObject] properties
- */
-class DisplayObjectFXListener(val obj: VisualObject) {
-    private val binndings = HashMap<Name, ObjectBinding<MetaItem<*>?>>()
-
-    init {
-        obj.onPropertyChange(this) { name, _, _ ->
-            binndings[name]?.invalidate()
-        }
-    }
-
-    operator fun get(key: Name): ObjectBinding<MetaItem<*>?> {
-        return binndings.getOrPut(key) {
-            object : ObjectBinding<MetaItem<*>?>() {
-                override fun computeValue(): MetaItem<*>? = obj.getProperty(key)
-            }
-        }
-    }
-
-    operator fun get(key: String) = get(key.toName())
-}
-
-fun ObjectBinding<MetaItem<*>?>.value() = this.objectBinding { it.value }
-fun ObjectBinding<MetaItem<*>?>.string() = this.stringBinding { it.string }
-fun ObjectBinding<MetaItem<*>?>.number() = this.objectBinding { it.number }
-fun ObjectBinding<MetaItem<*>?>.double() = this.objectBinding { it.double }
-fun ObjectBinding<MetaItem<*>?>.float() = this.objectBinding { it.number?.toFloat() }
-fun ObjectBinding<MetaItem<*>?>.int() = this.objectBinding { it.int }
-fun ObjectBinding<MetaItem<*>?>.long() = this.objectBinding { it.long }
-fun ObjectBinding<MetaItem<*>?>.node() = this.objectBinding { it.node }
-
-fun <T> ObjectBinding<MetaItem<*>?>.transform(transform: (MetaItem<*>) -> T) = this.objectBinding { it?.let(transform) }
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FX3DOutput.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FX3DOutput.kt
deleted file mode 100644
index b910b17e..00000000
--- a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FX3DOutput.kt
+++ /dev/null
@@ -1,50 +0,0 @@
-package hep.dataforge.vis.spatial.fx
-
-import hep.dataforge.context.Context
-import hep.dataforge.meta.Meta
-import hep.dataforge.output.Output
-import hep.dataforge.vis.common.VisualObject
-import hep.dataforge.vis.spatial.Box
-import hep.dataforge.vis.spatial.VisualGroup3D
-import javafx.scene.Group
-import javafx.scene.Node
-import org.fxyz3d.shapes.primitives.CuboidMesh
-import tornadofx.*
-
-/**
- * https://github.com/miho/JCSG for operations
- *
- */
-class FX3DOutput(override val context: Context) : Output<VisualObject> {
-    val canvas by lazy { Canvas3D() }
-
-
-    private fun buildNode(obj: VisualObject): Node? {
-        val listener = DisplayObjectFXListener(obj)
-        val x = listener["pos.x"].float()
-        val y = listener["pos.y"].float()
-        val z = listener["pos.z"].float()
-        val center = objectBinding(x, y, z) {
-            org.fxyz3d.geometry.Point3D(x.value ?: 0f, y.value ?: 0f, z.value ?: 0f)
-        }
-        return when (obj) {
-            is VisualGroup3D -> Group(obj.map { buildNode(it) }).apply {
-                this.translateXProperty().bind(x)
-                this.translateYProperty().bind(y)
-                this.translateZProperty().bind(z)
-            }
-            is Box -> CuboidMesh(obj.xSize.toDouble(), obj.ySize.toDouble(), obj.zSize.toDouble()).apply {
-                this.centerProperty().bind(center)
-                this.materialProperty().bind(listener["color"].transform { it.material() })
-            }
-            else -> {
-                logger.error { "No renderer defined for ${obj::class}" }
-                null
-            }
-        }
-    }
-
-    override fun render(obj: VisualObject, meta: Meta) {
-        buildNode(obj)?.let { canvas.world.children.add(it) }
-    }
-}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FX3DPlugin.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FX3DPlugin.kt
new file mode 100644
index 00000000..288174ea
--- /dev/null
+++ b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FX3DPlugin.kt
@@ -0,0 +1,159 @@
+package hep.dataforge.vis.spatial.fx
+
+import hep.dataforge.context.*
+import hep.dataforge.meta.Meta
+import hep.dataforge.meta.boolean
+import hep.dataforge.provider.Type
+import hep.dataforge.vis.spatial.*
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_KEY
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_WIREFRAME_KEY
+import hep.dataforge.vis.spatial.fx.FX3DFactory.Companion.TYPE
+import javafx.scene.Group
+import javafx.scene.Node
+import javafx.scene.shape.CullFace
+import javafx.scene.shape.DrawMode
+import javafx.scene.shape.Shape3D
+import javafx.scene.text.Font
+import javafx.scene.text.Text
+import javafx.scene.transform.Rotate
+import org.fxyz3d.shapes.composites.PolyLine3D
+import org.fxyz3d.shapes.primitives.CuboidMesh
+import org.fxyz3d.shapes.primitives.SpheroidMesh
+import kotlin.collections.HashMap
+import kotlin.collections.component1
+import kotlin.collections.component2
+import kotlin.collections.find
+import kotlin.collections.map
+import kotlin.collections.mapNotNull
+import kotlin.collections.set
+import kotlin.math.PI
+import kotlin.reflect.KClass
+
+class FX3DPlugin : AbstractPlugin() {
+    override val tag: PluginTag get() = Companion.tag
+
+    private val objectFactories = HashMap<KClass<out VisualObject3D>, FX3DFactory<*>>()
+    private val compositeFactory = FXCompositeFactory(this)
+    private val proxyFactory = FXProxyFactory(this)
+
+    init {
+        //Add specialized factories here
+        objectFactories[Convex::class] = FXConvexFactory
+    }
+
+
+    @Suppress("UNCHECKED_CAST")
+    private fun findObjectFactory(type: KClass<out VisualObject3D>): FX3DFactory<VisualObject3D>? {
+        return (objectFactories[type] ?: context.content<FX3DFactory<*>>(TYPE).values.find { it.type == type })
+                as FX3DFactory<VisualObject3D>?
+    }
+
+    fun buildNode(obj: VisualObject3D): Node {
+        val binding = VisualObjectFXBinding(obj)
+        return when (obj) {
+            is Proxy -> proxyFactory(obj, binding)
+            is VisualGroup3D -> {
+                Group(obj.children.mapNotNull { (token, obj) ->
+                    (obj as? VisualObject3D)?.let {
+                        buildNode(it).apply {
+                            properties["name"] = token.toString()
+                        }
+                    }
+                })
+            }
+            is Composite -> compositeFactory(obj, binding)
+            is Box -> CuboidMesh(obj.xSize.toDouble(), obj.ySize.toDouble(), obj.zSize.toDouble())
+            is Sphere -> if (obj.phi == PI2 && obj.theta == PI.toFloat()) {
+                //use sphere for orb
+                SpheroidMesh(obj.detail ?: 16, obj.radius.toDouble(), obj.radius.toDouble())
+            } else {
+                FXShapeFactory(obj, binding)
+            }
+            is Label3D -> Text(obj.text).apply {
+                font = Font.font(obj.fontFamily, obj.fontSize)
+                x = -layoutBounds.width / 2
+                y = layoutBounds.height / 2
+            }
+            is PolyLine -> PolyLine3D(
+                obj.points.map { it.point },
+                obj.thickness.toFloat(),
+                obj.getProperty(Material3D.MATERIAL_COLOR_KEY)?.color()
+            ).apply {
+                this.meshView.cullFace = CullFace.FRONT
+            }
+            else -> {
+                //find specialized factory for this type if it is present
+                val factory: FX3DFactory<VisualObject3D>? = findObjectFactory(obj::class)
+                when {
+                    factory != null -> factory(obj, binding)
+                    obj is Shape -> FXShapeFactory(obj, binding)
+                    else -> error("Renderer for ${obj::class} not found")
+                }
+            }
+        }.apply {
+            translateXProperty().bind(binding[VisualObject3D.xPos].float(obj.x.toFloat()))
+            translateYProperty().bind(binding[VisualObject3D.yPos].float(obj.y.toFloat()))
+            translateZProperty().bind(binding[VisualObject3D.zPos].float(obj.z.toFloat()))
+            scaleXProperty().bind(binding[VisualObject3D.xScale].float(obj.scaleX.toFloat()))
+            scaleYProperty().bind(binding[VisualObject3D.yScale].float(obj.scaleY.toFloat()))
+            scaleZProperty().bind(binding[VisualObject3D.zScale].float(obj.scaleZ.toFloat()))
+
+            val rotateX = Rotate(0.0, Rotate.X_AXIS).apply {
+                angleProperty().bind(binding[VisualObject3D.xRotation].float(obj.rotationX.toFloat()).multiply(180.0 / PI))
+            }
+
+            val rotateY = Rotate(0.0, Rotate.Y_AXIS).apply {
+                angleProperty().bind(binding[VisualObject3D.yRotation].float(obj.rotationY.toFloat()).multiply(180.0 / PI))
+            }
+
+            val rotateZ = Rotate(0.0, Rotate.Z_AXIS).apply {
+                angleProperty().bind(binding[VisualObject3D.zRotation].float(obj.rotationZ.toFloat()).multiply(180.0 / PI))
+            }
+
+            when (obj.rotationOrder) {
+                RotationOrder.ZYX -> transforms.addAll(rotateZ, rotateY, rotateX)
+                RotationOrder.XZY -> transforms.addAll(rotateX, rotateZ, rotateY)
+                RotationOrder.YXZ -> transforms.addAll(rotateY, rotateX, rotateZ)
+                RotationOrder.YZX -> transforms.addAll(rotateY, rotateZ, rotateX)
+                RotationOrder.ZXY -> transforms.addAll(rotateZ, rotateX, rotateY)
+                RotationOrder.XYZ -> transforms.addAll(rotateX, rotateY, rotateZ)
+            }
+
+            if (this is Shape3D) {
+                materialProperty().bind(binding[MATERIAL_KEY].transform {
+                    it.material()
+                })
+
+                drawModeProperty().bind(binding[MATERIAL_WIREFRAME_KEY].transform {
+                    if (it.boolean == true) {
+                        DrawMode.LINE
+                    } else {
+                        DrawMode.FILL
+                    }
+                })
+            }
+        }
+    }
+
+    companion object : PluginFactory<FX3DPlugin> {
+        override val tag = PluginTag("visual.fx3D", PluginTag.DATAFORGE_GROUP)
+        override val type = FX3DPlugin::class
+        override fun invoke(meta: Meta, context: Context) = FX3DPlugin()
+    }
+}
+
+/**
+ * Builder and updater for three.js object
+ */
+@Type(TYPE)
+interface FX3DFactory<in T : VisualObject3D> {
+
+    val type: KClass<in T>
+
+    operator fun invoke(obj: T, binding: VisualObjectFXBinding): Node
+
+    companion object {
+        const val TYPE = "fx3DFactory"
+    }
+}
+
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXCanvas3D.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXCanvas3D.kt
new file mode 100644
index 00000000..1704eeb2
--- /dev/null
+++ b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXCanvas3D.kt
@@ -0,0 +1,86 @@
+package hep.dataforge.vis.spatial.fx
+
+import hep.dataforge.context.Context
+import hep.dataforge.context.ContextAware
+import hep.dataforge.meta.Meta
+import hep.dataforge.output.Renderer
+import hep.dataforge.vis.spatial.VisualObject3D
+import hep.dataforge.vis.spatial.specifications.CanvasSpec
+import javafx.application.Platform
+import javafx.beans.property.ObjectProperty
+import javafx.beans.property.SimpleObjectProperty
+import javafx.scene.*
+import javafx.scene.paint.Color
+import org.fxyz3d.scene.Axes
+import tornadofx.*
+
+class FXCanvas3D(val plugin: FX3DPlugin, val spec: CanvasSpec = CanvasSpec.empty()) :
+    Fragment(), Renderer<VisualObject3D>, ContextAware {
+
+    override val context: Context get() = plugin.context
+
+    val world = Group().apply {
+        //transforms.add(Rotate(180.0, Rotate.Z_AXIS))
+    }
+
+    val axes = Axes().also {
+        it.setHeight(spec.axes.size)
+        it.setRadius(spec.axes.width)
+        it.isVisible = spec.axes.visible
+        world.add(it)
+    }
+
+    val light = AmbientLight()
+
+    private val camera = PerspectiveCamera().apply {
+        nearClip = spec.camera.nearClip
+        farClip = spec.camera.farClip
+        fieldOfView = spec.camera.fov.toDouble()
+        this.add(light)
+    }
+
+    private val canvas = SubScene(
+        Group(world, camera).apply { DepthTest.ENABLE },
+        400.0,
+        400.0,
+        true,
+        SceneAntialiasing.BALANCED
+    ).also { scene ->
+        scene.fill = Color.GREY
+        scene.camera = camera
+    }
+
+    override val root = borderpane {
+        center = canvas
+    }
+
+    val controls = camera.orbitControls(canvas, spec.camera).also {
+        world.add(it.centerMarker)
+    }
+
+    val rootObjectProperty: ObjectProperty<VisualObject3D> = SimpleObjectProperty()
+    var rootObject: VisualObject3D? by rootObjectProperty
+
+    private val rootNodeProperty = rootObjectProperty.objectBinding {
+        it?.let { plugin.buildNode(it) }
+    }
+
+    init {
+        canvas.widthProperty().bind(root.widthProperty())
+        canvas.heightProperty().bind(root.heightProperty())
+        rootNodeProperty.addListener { _, oldValue: Node?, newValue: Node? ->
+            Platform.runLater {
+                if (oldValue != null) {
+                    world.children.remove(oldValue)
+                }
+                if (newValue != null) {
+                    world.children.add(newValue)
+                }
+            }
+        }
+    }
+
+    override fun render(obj: VisualObject3D, meta: Meta) {
+        rootObject = obj
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXCompositeFactory.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXCompositeFactory.kt
new file mode 100644
index 00000000..a4af60f6
--- /dev/null
+++ b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXCompositeFactory.kt
@@ -0,0 +1,70 @@
+package hep.dataforge.vis.spatial.fx
+
+import eu.mihosoft.jcsg.CSG
+import eu.mihosoft.jcsg.Polygon
+import eu.mihosoft.vvecmath.Vector3d
+import hep.dataforge.vis.spatial.Composite
+import hep.dataforge.vis.spatial.CompositeType
+import javafx.scene.Group
+import javafx.scene.Node
+import javafx.scene.shape.MeshView
+import javafx.scene.shape.TriangleMesh
+import javafx.scene.shape.VertexFormat
+import java.util.*
+import kotlin.collections.HashMap
+import kotlin.reflect.KClass
+
+private fun MeshView.toCSG(): CSG {
+    val mesh = this.mesh as TriangleMesh
+    if (mesh.vertexFormat != VertexFormat.POINT_TEXCOORD) error("Not POINT_TEXCOORD")
+    val polygons: MutableList<Polygon> = ArrayList()
+    val faces = mesh.faces
+    val points = mesh.points
+
+    val vectorCache = HashMap<Int, Vector3d>()
+    fun getVector(index: Int) = vectorCache.getOrPut(index) {
+        Vector3d.xyz(
+            points[3 * index].toDouble(),
+            points[3 * index + 1].toDouble(),
+            points[3 * index + 2].toDouble()
+        )
+    }
+
+    for (i in 0 until faces.size() / 6) {
+        val polygon = Polygon.fromPoints(
+            getVector(faces[6 * i]),
+            getVector(faces[6 * i + 2]),
+            getVector(faces[6 * i + 4])
+        )
+        polygons.add(polygon)
+    }
+
+    return CSG.fromPolygons(polygons)
+}
+
+class FXCompositeFactory(val plugin: FX3DPlugin) : FX3DFactory<Composite> {
+    override val type: KClass<in Composite>
+        get() = Composite::class
+
+    override fun invoke(obj: Composite, binding: VisualObjectFXBinding): Node {
+        val first = plugin.buildNode(obj.first) as? MeshView ?: error("Can't build node")
+        val second = plugin.buildNode(obj.second) as? MeshView ?: error("Can't build node")
+        val firstCSG = first.toCSG()
+        val secondCSG = second.toCSG()
+        val resultCSG = when (obj.compositeType) {
+            CompositeType.UNION -> firstCSG.union(secondCSG)
+            CompositeType.INTERSECT -> firstCSG.intersect(secondCSG)
+            CompositeType.SUBTRACT -> firstCSG.difference(secondCSG)
+        }
+        return resultCSG.toNode()
+    }
+}
+
+internal fun CSG.toNode(): Node {
+    val meshes = toJavaFXMesh().asMeshViews
+    return if (meshes.size == 1) {
+        meshes.first()
+    } else {
+        Group(meshes.map { it })
+    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXConvexFactory.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXConvexFactory.kt
new file mode 100644
index 00000000..aeeb2cac
--- /dev/null
+++ b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXConvexFactory.kt
@@ -0,0 +1,19 @@
+package hep.dataforge.vis.spatial.fx
+
+import eu.mihosoft.jcsg.PropertyStorage
+import eu.mihosoft.jcsg.ext.quickhull3d.HullUtil
+import eu.mihosoft.vvecmath.Vector3d
+import hep.dataforge.vis.spatial.Convex
+import javafx.scene.Node
+import kotlin.reflect.KClass
+
+
+object FXConvexFactory : FX3DFactory<Convex> {
+    override val type: KClass<in Convex> get() = Convex::class
+
+    override fun invoke(obj: Convex, binding: VisualObjectFXBinding): Node {
+        val hull = HullUtil.hull(obj.points.map { Vector3d.xyz(it.x, it.y, it.z) }, PropertyStorage())
+        return hull.toNode()
+    }
+
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/Materials.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXMaterials.kt
similarity index 62%
rename from dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/Materials.kt
rename to dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXMaterials.kt
index 626a3594..af8cb2ee 100644
--- a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/Materials.kt
+++ b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXMaterials.kt
@@ -5,14 +5,16 @@ import hep.dataforge.meta.double
 import hep.dataforge.meta.get
 import hep.dataforge.meta.int
 import hep.dataforge.values.ValueType
+import hep.dataforge.vis.common.Colors
+import hep.dataforge.vis.spatial.Material3D
 import javafx.scene.paint.Color
 import javafx.scene.paint.Material
 import javafx.scene.paint.PhongMaterial
 
-object Materials {
+object FXMaterials {
     val RED = PhongMaterial().apply {
         diffuseColor = Color.DARKRED
-        specularColor = Color.RED
+        specularColor = Color.WHITE
     }
 
     val WHITE = PhongMaterial().apply {
@@ -22,7 +24,7 @@ object Materials {
 
     val GREY = PhongMaterial().apply {
         diffuseColor = Color.DARKGREY
-        specularColor = Color.GREY
+        specularColor = Color.WHITE
     }
 
     val BLUE = PhongMaterial(Color.BLUE)
@@ -30,24 +32,25 @@ object Materials {
 
 /**
  * Infer color based on meta item
+ * @param opacity default opacity
  */
-fun MetaItem<*>.color(): Color {
+fun MetaItem<*>.color(opacity: Double = 1.0): Color {
     return when (this) {
-        is MetaItem.ValueItem -> if (this.value.type == ValueType.STRING) {
-            Color.web(this.value.string)
-        } else {
+        is MetaItem.ValueItem -> if (this.value.type == ValueType.NUMBER) {
             val int = value.number.toInt()
             val red = int and 0x00ff0000 shr 16
             val green = int and 0x0000ff00 shr 8
             val blue = int and 0x000000ff
-            Color.rgb(red, green, blue)
+            Color.rgb(red, green, blue, opacity)
+        } else {
+            Color.web(this.value.string)
         }
         is MetaItem.NodeItem -> {
             Color.rgb(
-                node["red"]?.int ?: 0,
-                node["green"]?.int ?: 0,
-                node["blue"]?.int ?: 0,
-                node["opacity"]?.double ?: 1.0
+                node[Colors.RED_KEY]?.int ?: 0,
+                node[Colors.GREEN_KEY]?.int ?: 0,
+                node[Colors.BLUE_KEY]?.int ?: 0,
+                node[Material3D.OPACITY_KEY]?.double ?: opacity
             )
         }
     }
@@ -58,11 +61,12 @@ fun MetaItem<*>.color(): Color {
  */
 fun MetaItem<*>?.material(): Material {
     return when (this) {
-        null -> Materials.GREY
+        null -> FXMaterials.GREY
         is MetaItem.ValueItem -> PhongMaterial(color())
         is MetaItem.NodeItem -> PhongMaterial().apply {
-            (node["color"]?: this@material).let { diffuseColor = it.color() }
-            node["specularColor"]?.let { specularColor = it.color() }
+            val opacity = node[Material3D.OPACITY_KEY].double ?: 1.0
+            diffuseColor = node[Material3D.COLOR_KEY]?.color(opacity) ?: Color.DARKGREY
+            specularColor = node[Material3D.SPECULAR_COLOR]?.color(opacity) ?: Color.WHITE
         }
     }
 }
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXProxyFactory.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXProxyFactory.kt
new file mode 100644
index 00000000..6cdb6610
--- /dev/null
+++ b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXProxyFactory.kt
@@ -0,0 +1,47 @@
+package hep.dataforge.vis.spatial.fx
+
+import hep.dataforge.names.Name
+import hep.dataforge.names.isEmpty
+import hep.dataforge.names.toName
+import hep.dataforge.vis.common.VisualObject
+import hep.dataforge.vis.spatial.Proxy
+import javafx.scene.Group
+import javafx.scene.Node
+import kotlin.reflect.KClass
+
+class FXProxyFactory(val plugin: FX3DPlugin) : FX3DFactory<Proxy> {
+    override val type: KClass<in Proxy> get() = Proxy::class
+
+    override fun invoke(obj: Proxy, binding: VisualObjectFXBinding): Node {
+        val template = obj.prototype
+        val node = plugin.buildNode(template)
+
+        obj.onPropertyChange(this) { name, _, _ ->
+            if (name.first()?.body == Proxy.PROXY_CHILD_PROPERTY_PREFIX) {
+                val childName = name.first()?.index?.toName() ?: error("Wrong syntax for proxy child property: '$name'")
+                val propertyName = name.cutFirst()
+                val proxyChild = obj[childName] ?: error("Proxy child with name '$childName' not found")
+                val child = node.findChild(childName) ?: error("Object child with name '$childName' not found")
+                child.updateProperty(proxyChild, propertyName)
+            }
+        }
+        return node
+    }
+}
+
+private fun Node.findChild(name: Name): Node? {
+    return if (name.isEmpty()) {
+        this
+    } else {
+        (this as? Group)
+            ?.children
+            ?.find { it.properties["name"] as String == name.first()?.toString() }
+            ?.findChild(name.cutFirst())
+    }
+}
+
+private fun Node.updateProperty(obj: VisualObject, propertyName: Name) {
+//    if (propertyName.startsWith(Material3D.MATERIAL_KEY)) {
+//        (this as? Shape3D)?.let { it.material = obj.getProperty(Material3D.MATERIAL_KEY).material() }
+//    }
+}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXShapeFactory.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXShapeFactory.kt
new file mode 100644
index 00000000..0dd58c45
--- /dev/null
+++ b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/FXShapeFactory.kt
@@ -0,0 +1,61 @@
+package hep.dataforge.vis.spatial.fx
+
+import hep.dataforge.meta.Meta
+import hep.dataforge.vis.spatial.GeometryBuilder
+import hep.dataforge.vis.spatial.Point3D
+import hep.dataforge.vis.spatial.Shape
+import javafx.scene.shape.Mesh
+import javafx.scene.shape.MeshView
+import javafx.scene.shape.TriangleMesh
+import javafx.scene.shape.VertexFormat
+import org.fxyz3d.geometry.Face3
+import kotlin.reflect.KClass
+
+object FXShapeFactory : FX3DFactory<Shape> {
+    override val type: KClass<in Shape> get() = Shape::class
+
+    override fun invoke(obj: Shape, binding: VisualObjectFXBinding): MeshView {
+        val mesh = FXGeometryBuilder().apply { obj.toGeometry(this) }.build()
+        return MeshView(mesh)
+    }
+}
+
+private class FXGeometryBuilder : GeometryBuilder<Mesh> {
+    val vertices = ArrayList<Point3D>()
+    val faces = ArrayList<Face3>()
+    private val vertexCache = HashMap<Point3D, Int>()
+
+    private fun append(vertex: Point3D): Int {
+        val index = vertexCache[vertex] ?: -1//vertices.indexOf(vertex)
+        return if (index > 0) {
+            index
+        } else {
+            vertices.add(vertex)
+            vertexCache[vertex] = vertices.size - 1
+            vertices.size - 1
+        }
+    }
+
+    override fun face(vertex1: Point3D, vertex2: Point3D, vertex3: Point3D, normal: Point3D?, meta: Meta) {
+        //adding vertices
+        val face = Face3(append(vertex1), append(vertex2), append(vertex3))
+        faces.add(face)
+    }
+
+    override fun build(): Mesh {
+        val mesh = TriangleMesh(VertexFormat.POINT_TEXCOORD)
+        vertices.forEach {
+            //TODO optimize copy
+            mesh.points.addAll(it.x.toFloat(), it.y.toFloat(), it.z.toFloat())
+        }
+
+        mesh.texCoords.addAll(0f, 0f)
+
+        faces.forEach {
+            mesh.faces.addAll(it.p0, 0, it.p1, 0, it.p2, 0)
+        }
+        return mesh
+    }
+
+}
+
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/OrbitControls.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/OrbitControls.kt
new file mode 100644
index 00000000..aaa90ee9
--- /dev/null
+++ b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/OrbitControls.kt
@@ -0,0 +1,179 @@
+package hep.dataforge.vis.spatial.fx
+
+import hep.dataforge.vis.spatial.specifications.CameraSpec
+import javafx.beans.InvalidationListener
+import javafx.beans.property.SimpleDoubleProperty
+import javafx.event.EventHandler
+import javafx.geometry.Point3D
+import javafx.scene.Camera
+import javafx.scene.Node
+import javafx.scene.SubScene
+import javafx.scene.input.MouseEvent
+import javafx.scene.input.ScrollEvent
+import javafx.scene.shape.Sphere
+import javafx.scene.transform.Rotate
+import javafx.scene.transform.Translate
+import tornadofx.*
+import kotlin.math.*
+
+
+class OrbitControls internal constructor(camera: Camera, canvas: SubScene, spec: CameraSpec) {
+
+    val distanceProperty = SimpleDoubleProperty(spec.distance)
+    var distance by distanceProperty
+
+    val azimuthProperty = SimpleDoubleProperty(spec.azimuth)
+    var azimuth by azimuthProperty
+
+    val zenithProperty = SimpleDoubleProperty(PI / 2 - spec.latitude)
+    var zenith by zenithProperty
+
+    val latitudeProperty = zenithProperty.unaryMinus().plus(PI / 2)
+    val latitude by latitudeProperty
+
+    val baseXProperty = SimpleDoubleProperty(0.0)
+    var x by baseXProperty
+    val baseYProperty = SimpleDoubleProperty(0.0)
+    var y by baseYProperty
+    val baseZProperty = SimpleDoubleProperty(0.0)
+    var z by baseZProperty
+
+    private val baseTranslate = Translate()
+
+//    val basePositionProperty: ObjectBinding<Point3D> =
+//        nonNullObjectBinding(baseXProperty, baseYProperty, baseZProperty) {
+//            Point3D(x, y, z)
+//        }
+//
+//    val basePosition by basePositionProperty
+
+    val centerMarker by lazy {
+        Sphere(10.0).also {
+            it.transforms.setAll(baseTranslate)
+        }
+    }
+
+    //private val center = Translate()
+
+    private val rx = Rotate(0.0, Rotate.X_AXIS)
+
+    private val ry = Rotate(0.0, Rotate.Y_AXIS)
+
+    private val translate = Translate()
+
+    //private val rz = Rotate(180.0, Rotate.Z_AXIS)
+
+
+    init {
+        camera.transforms.setAll(ry, rx, translate)
+        update()
+        val listener = InvalidationListener {
+            update()
+        }
+        distanceProperty.addListener(listener)
+        azimuthProperty.addListener(listener)
+        zenithProperty.addListener(listener)
+        baseXProperty.addListener(listener)
+        baseYProperty.addListener(listener)
+        baseZProperty.addListener(listener)
+
+        canvas.apply {
+//            center.xProperty().bind(widthProperty().divide(2))
+//            center.zProperty().bind(heightProperty().divide(2))
+            handleMouse()
+        }
+//        coordinateContainer?.vbox {
+//            label(distanceProperty.asString())
+//            label(azimuthProperty.asString())
+//            label(zenithProperty.asString())
+//        }
+    }
+
+    private fun update() {
+        val spherePosition = Point3D(
+            sin(zenith) * sin(azimuth),
+            cos(zenith),
+            sin(zenith) * cos(azimuth)
+        ).times(distance)
+        val basePosition = Point3D(x, y, z)
+        baseTranslate.x = x
+        baseTranslate.y = y
+        baseTranslate.z = z
+        //Create direction vector
+        val cameraPosition = basePosition + spherePosition
+        val camDirection: Point3D = (-spherePosition).normalize()
+
+        val xRotation = Math.toDegrees(asin(-camDirection.y))
+        val yRotation = Math.toDegrees(atan2(camDirection.x, camDirection.z))
+
+        rx.pivotX = cameraPosition.x
+        rx.pivotY = cameraPosition.y
+        rx.pivotZ = cameraPosition.z
+        rx.angle = xRotation
+
+        ry.pivotX = cameraPosition.x
+        ry.pivotY = cameraPosition.y
+        ry.pivotZ = cameraPosition.z
+        ry.angle = yRotation
+
+        translate.x = cameraPosition.x
+        translate.y = cameraPosition.y
+        translate.z = cameraPosition.z
+    }
+
+
+    private fun Node.handleMouse() {
+
+        var mousePosX = 0.0
+        var mousePosY = 0.0
+        var mouseOldX: Double
+        var mouseOldY: Double
+        var mouseDeltaX: Double
+        var mouseDeltaY: Double
+
+        onMousePressed = EventHandler<MouseEvent> { me ->
+            mousePosX = me.sceneX
+            mousePosY = me.sceneY
+            mouseOldX = me.sceneX
+            mouseOldY = me.sceneY
+        }
+
+        onMouseDragged = EventHandler<MouseEvent> { me ->
+            mouseOldX = mousePosX
+            mouseOldY = mousePosY
+            mousePosX = me.sceneX
+            mousePosY = me.sceneY
+            mouseDeltaX = mousePosX - mouseOldX
+            mouseDeltaY = mousePosY - mouseOldY
+
+            val modifier = when {
+                me.isControlDown -> CONTROL_MULTIPLIER
+                me.isShiftDown -> SHIFT_MULTIPLIER
+                else -> 1.0
+            }
+
+            if (me.isPrimaryButtonDown) {
+                azimuth = (azimuth - mouseDeltaX * MOUSE_SPEED * modifier * ROTATION_SPEED).coerceIn(0.0, 2 * PI)
+                zenith = (zenith - mouseDeltaY * MOUSE_SPEED * modifier * ROTATION_SPEED).coerceIn(0.0,PI)
+            } else if (me.isSecondaryButtonDown) {
+                x += MOUSE_SPEED * modifier * TRACK_SPEED * (mouseDeltaX * cos(azimuth) + mouseDeltaY * sin(azimuth))
+                z += MOUSE_SPEED * modifier * TRACK_SPEED * (-mouseDeltaX * sin(azimuth) + mouseDeltaY * cos(azimuth))
+            }
+        }
+        onScroll = EventHandler<ScrollEvent> { event ->
+            distance = max(1.0, distance - MOUSE_SPEED * event.deltaY * RESIZE_SPEED)
+        }
+    }
+
+    companion object {
+        private const val CONTROL_MULTIPLIER = 0.1
+        private const val SHIFT_MULTIPLIER = 10.0
+        private const val MOUSE_SPEED = 0.1
+        private const val ROTATION_SPEED = 0.02
+        private const val TRACK_SPEED = 20.0
+        private const val RESIZE_SPEED = 10.0
+    }
+}
+
+fun Camera.orbitControls(canvas: SubScene, spec: CameraSpec) =
+    OrbitControls(this, canvas, spec)
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/RendererDemoApp.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/RendererDemoApp.kt
deleted file mode 100644
index cd4bc32c..00000000
--- a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/RendererDemoApp.kt
+++ /dev/null
@@ -1,57 +0,0 @@
-package hep.dataforge.vis.spatial.fx
-
-import hep.dataforge.context.Global
-import hep.dataforge.meta.number
-import hep.dataforge.vis.spatial.*
-import javafx.scene.Parent
-import kotlinx.coroutines.GlobalScope
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.isActive
-import kotlinx.coroutines.launch
-import tornadofx.*
-import kotlin.random.Random
-
-
-class RendererDemoApp : App(RendererDemoView::class)
-
-
-class RendererDemoView : View() {
-    val renderer = FX3DOutput(Global)
-    override val root: Parent = borderpane {
-        center = renderer.canvas.root
-    }
-
-    lateinit var group: VisualGroup3D
-
-    init {
-
-        renderer.render {
-            group = group {
-                box(100,100,100)
-                box(100,100,100) {
-                    x = 110.0
-                }
-            }
-        }
-
-        var color by group.config.number(1530)
-
-        GlobalScope.launch {
-            val random = Random(111)
-            while (isActive) {
-                delay(1000)
-                color = random.nextInt(0, Int.MAX_VALUE)
-            }
-        }
-
-        renderer.canvas.apply {
-            angleY = -30.0
-            angleX = -15.0
-        }
-    }
-}
-
-
-fun main() {
-    launch<RendererDemoApp>()
-}
\ No newline at end of file
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/VisualObjectFXBinding.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/VisualObjectFXBinding.kt
new file mode 100644
index 00000000..faa7b843
--- /dev/null
+++ b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/fx/VisualObjectFXBinding.kt
@@ -0,0 +1,60 @@
+package hep.dataforge.vis.spatial.fx
+
+import hep.dataforge.meta.*
+import hep.dataforge.names.Name
+import hep.dataforge.names.startsWith
+import hep.dataforge.names.toName
+import hep.dataforge.vis.common.VisualObject
+import javafx.application.Platform
+import javafx.beans.binding.ObjectBinding
+import tornadofx.*
+
+/**
+ * A caching binding collection for [VisualObject] properties
+ */
+class VisualObjectFXBinding(val obj: VisualObject) {
+    private val bindings = HashMap<Name, ObjectBinding<MetaItem<*>?>>()
+
+    init {
+        obj.onPropertyChange(this) { name, _, _ ->
+            bindings.filter { it.key.startsWith(name) }.forEach { entry ->
+                Platform.runLater {
+                    entry.value.invalidate()
+                }
+            }
+//            var currentName = name
+//            while (!currentName.isEmpty()) {
+//                //recursively update all upper level bindings
+//                bindings[currentName]?.invalidate()
+//                currentName = currentName.cutLast()
+//            }
+        }
+    }
+
+    operator fun get(key: Name): ObjectBinding<MetaItem<*>?> {
+        return bindings.getOrPut(key) {
+            object : ObjectBinding<MetaItem<*>?>() {
+                override fun computeValue(): MetaItem<*>? = obj.getProperty(key)
+            }
+        }
+    }
+
+    operator fun get(key: String) = get(key.toName())
+}
+
+fun ObjectBinding<MetaItem<*>?>.value() = objectBinding { it.value }
+fun ObjectBinding<MetaItem<*>?>.string() = stringBinding { it.string }
+fun ObjectBinding<MetaItem<*>?>.number() = objectBinding { it.number }
+fun ObjectBinding<MetaItem<*>?>.double() = objectBinding { it.double }
+fun ObjectBinding<MetaItem<*>?>.float() = objectBinding { it.float }
+fun ObjectBinding<MetaItem<*>?>.int() = objectBinding { it.int }
+fun ObjectBinding<MetaItem<*>?>.long() = objectBinding { it.long }
+fun ObjectBinding<MetaItem<*>?>.node() = objectBinding { it.node }
+
+fun ObjectBinding<MetaItem<*>?>.string(default: String) = stringBinding { it.string ?: default }
+fun ObjectBinding<MetaItem<*>?>.double(default: Double) = doubleBinding { it.double ?: default }
+fun ObjectBinding<MetaItem<*>?>.float(default: Float) = floatBinding { it.float ?: default }
+fun ObjectBinding<MetaItem<*>?>.int(default: Int) = integerBinding { it.int ?: default }
+fun ObjectBinding<MetaItem<*>?>.long(default: Long) = longBinding { it.long ?: default }
+
+fun <T> ObjectBinding<MetaItem<*>?>.transform(transform: (MetaItem<*>) -> T) = objectBinding { it?.let(transform) }
diff --git a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/geometryJVM.kt b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/geometryJVM.kt
index 3e56de87..396d43b2 100644
--- a/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/geometryJVM.kt
+++ b/dataforge-vis-spatial/src/jvmMain/kotlin/hep/dataforge/vis/spatial/geometryJVM.kt
@@ -1,12 +1,49 @@
 package hep.dataforge.vis.spatial
 
-actual class Point2D actual constructor(x: Number, y: Number) {
-    actual var x = x.toDouble()
-    actual var y = y.toDouble()
+actual data class Point2D(actual var x: Double, actual var y: Double) {
+    actual constructor(x: Number, y: Number) : this(x.toDouble(), y.toDouble())
 }
 
-actual class Point3D actual constructor(x: Number, y: Number, z: Number) {
-    actual var x = x.toDouble()
-    actual var y = y.toDouble()
-    actual var z = z.toDouble()
+actual class Point3D(val point: org.fxyz3d.geometry.Point3D) {
+    actual constructor(x: Number, y: Number, z: Number) : this(
+        org.fxyz3d.geometry.Point3D(
+            x.toFloat(),
+            y.toFloat(),
+            z.toFloat()
+        )
+    )
+
+    actual var x: Double
+        inline get() = point.x.toDouble()
+        inline set(value) {
+            point.x = value.toFloat()
+        }
+
+    actual var y: Double
+        inline get() = point.y.toDouble()
+        inline set(value) {
+            point.y = value.toFloat()
+        }
+
+    actual var z: Double
+        inline get() = point.z.toDouble()
+        inline set(value) {
+            point.z = value.toFloat()
+        }
+
+    override fun equals(other: Any?): Boolean {
+        return this.point == (other as? hep.dataforge.vis.spatial.Point3D)?.point
+    }
+
+    override fun hashCode(): Int {
+        return point.hashCode()
+    }
+
+    override fun toString(): String {
+        return point.toString()
+    }
+}
+
+actual operator fun Point3D.plus(other: Point3D): Point3D {
+    return Point3D(point.add(other.point))
 }
\ No newline at end of file
diff --git a/demo/build.gradle.kts b/demo/build.gradle.kts
new file mode 100644
index 00000000..e69de29b
diff --git a/demo/gdml/build.gradle.kts b/demo/gdml/build.gradle.kts
new file mode 100644
index 00000000..67570e1d
--- /dev/null
+++ b/demo/gdml/build.gradle.kts
@@ -0,0 +1,39 @@
+import org.openjfx.gradle.JavaFXOptions
+
+plugins {
+    id("scientifik.mpp")
+    id("org.openjfx.javafxplugin")
+    id("application")
+}
+
+kotlin {
+
+    jvm {
+        withJava()
+    }
+
+    js {
+        browser {
+            webpackTask {
+                //sourceMaps = false
+            }
+        }
+    }
+
+    sourceSets {
+        commonMain {
+            dependencies {
+                api(project(":dataforge-vis-spatial"))
+                api(project(":dataforge-vis-spatial-gdml"))
+            }
+        }
+    }
+}
+
+application {
+    mainClassName = "hep.dataforge.vis.spatial.gdml.demo.GDMLDemoAppKt"
+}
+
+configure<JavaFXOptions> {
+    modules("javafx.controls")
+}
\ No newline at end of file
diff --git a/demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt b/demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
new file mode 100644
index 00000000..f4e6d4c5
--- /dev/null
+++ b/demo/gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
@@ -0,0 +1,213 @@
+package hep.dataforge.vis.spatial.gdml.demo
+
+import hep.dataforge.context.Global
+import hep.dataforge.js.Application
+import hep.dataforge.js.startApplication
+import hep.dataforge.meta.buildMeta
+import hep.dataforge.meta.withBottom
+import hep.dataforge.names.Name
+import hep.dataforge.names.isEmpty
+import hep.dataforge.vis.common.VisualGroup
+import hep.dataforge.vis.common.VisualObject
+import hep.dataforge.vis.js.editor.displayObjectTree
+import hep.dataforge.vis.js.editor.displayPropertyEditor
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_COLOR_KEY
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_OPACITY_KEY
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_WIREFRAME_KEY
+import hep.dataforge.vis.spatial.Visual3DPlugin
+import hep.dataforge.vis.spatial.VisualGroup3D
+import hep.dataforge.vis.spatial.VisualObject3D
+import hep.dataforge.vis.spatial.VisualObject3D.Companion.VISIBLE_KEY
+import hep.dataforge.vis.spatial.gdml.GDMLTransformer
+import hep.dataforge.vis.spatial.gdml.LUnit
+import hep.dataforge.vis.spatial.gdml.toVisual
+import hep.dataforge.vis.spatial.three.ThreePlugin
+import hep.dataforge.vis.spatial.three.displayCanvasControls
+import hep.dataforge.vis.spatial.three.output
+import hep.dataforge.vis.spatial.visible
+import kotlinx.html.dom.append
+import kotlinx.html.js.p
+import org.w3c.dom.DragEvent
+import org.w3c.dom.HTMLDivElement
+import org.w3c.dom.HTMLElement
+import org.w3c.files.FileList
+import org.w3c.files.FileReader
+import org.w3c.files.get
+import scientifik.gdml.GDML
+import kotlin.browser.document
+import kotlin.browser.window
+import kotlin.dom.clear
+
+private class GDMLDemoApp : Application {
+    /**
+     * Handle mouse drag according to https://www.html5rocks.com/en/tutorials/file/dndfiles/
+     */
+    private fun handleDragOver(event: DragEvent) {
+        event.stopPropagation()
+        event.preventDefault()
+        event.dataTransfer?.dropEffect = "copy"
+    }
+
+    /**
+     * Load data from text file
+     */
+    private fun loadData(event: DragEvent, block: (name: String, data: String) -> Unit) {
+        event.stopPropagation()
+        event.preventDefault()
+
+        val file = (event.dataTransfer?.files as FileList)[0]
+            ?: throw RuntimeException("Failed to load file")
+
+        FileReader().apply {
+            onload = {
+                val string = result as String
+                block(file.name, string)
+            }
+            readAsText(file)
+        }
+    }
+
+    private fun spinner(show: Boolean) {
+//        if( show){
+//
+//        val style = if (show) {
+//            "display:block;"
+//        } else {
+//            "display:none;"
+//        }
+//        document.getElementById("canvas")?.append {
+//
+//        }
+    }
+
+    private fun message(message: String?) {
+        document.getElementById("messages")?.let { element ->
+            if (message == null) {
+                element.clear()
+            } else {
+                element.append {
+                    p {
+                        +message
+                    }
+                }
+            }
+        }
+    }
+
+    private val gdmlConfiguration: GDMLTransformer.() -> Unit = {
+        lUnit = LUnit.CM
+        volumeAction = { volume ->
+            when {
+                volume.name.startsWith("ecal01lay") -> GDMLTransformer.Action.REJECT
+                volume.name.startsWith("UPBL") -> GDMLTransformer.Action.REJECT
+                volume.name.startsWith("USCL") -> GDMLTransformer.Action.REJECT
+                volume.name.startsWith("VPBL") -> GDMLTransformer.Action.REJECT
+                volume.name.startsWith("VSCL") -> GDMLTransformer.Action.REJECT
+                else -> GDMLTransformer.Action.CACHE
+            }
+        }
+
+        solidConfiguration = { parent, solid ->
+            if (
+                solid.name.startsWith("Yoke")
+                || solid.name.startsWith("Pole")
+                || parent.physVolumes.isNotEmpty()
+            ) {
+                useStyle("opaque") {
+                    MATERIAL_OPACITY_KEY put 0.3
+                }
+            }
+        }
+    }
+
+
+    override fun start(state: Map<String, Any>) {
+
+        val context = Global.context("demo") {}
+        val three = context.plugins.load(ThreePlugin)
+        //val url = URL("https://drive.google.com/open?id=1w5e7fILMN83JGgB8WANJUYm8OW2s0WVO")
+
+        val canvasElement = document.getElementById("canvas") ?: error("Element with id 'canvas' not found on page")
+        val configElement = document.getElementById("layers") ?: error("Element with id 'layers' not found on page")
+        val treeElement = document.getElementById("tree") ?: error("Element with id 'tree' not found on page")
+        val editorElement = document.getElementById("editor") ?: error("Element with id 'editor' not found on page")
+        canvasElement.clear()
+
+        val action: (name: String, data: String) -> Unit = { name, data ->
+            canvasElement.clear()
+            spinner(true)
+            message("Loading GDML")
+            val gdml = GDML.format.parse(GDML.serializer(), data)
+            message("Converting GDML into DF-VIS format")
+
+            val visual: VisualObject3D = when {
+                name.endsWith(".gdml") || name.endsWith(".xml") -> gdml.toVisual(gdmlConfiguration)
+                name.endsWith(".json") -> {
+                    Visual3DPlugin.json.parse(VisualGroup3D.serializer(), data).apply { attachChildren() }
+                }
+                else -> {
+                    window.alert("File extension is not recognized: $name")
+                    error("File extension is not recognized: $name")
+                }
+            }
+
+            //Optimize tree
+            //(visual as? VisualGroup3D)?.transformInPlace(UnRef, RemoveSingleChild)
+
+            message("Rendering")
+
+            //output.camera.layers.enable(1)
+            val canvas = three.output(canvasElement as HTMLElement)
+
+            canvas.camera.layers.set(0)
+            configElement.displayCanvasControls(canvas)
+            //tree.visualObjectTree(visual, editor::propertyEditor)
+            fun selectElement(name: Name) {
+                val child: VisualObject = when {
+                    name.isEmpty() -> visual
+                    visual is VisualGroup -> visual[name] ?: return
+                    else -> return
+                }
+                editorElement.displayPropertyEditor(name, child) { item ->
+                    //val descriptorMeta = Material3D.descriptor
+
+                    val properties = item.allProperties()
+                    val bottom = buildMeta {
+                        VISIBLE_KEY put (item.visible ?: true)
+                        if (item is VisualObject3D) {
+                            MATERIAL_COLOR_KEY put "#ffffff"
+                            MATERIAL_OPACITY_KEY put 1.0
+                            MATERIAL_WIREFRAME_KEY put false
+                        }
+                    }
+                    properties.withBottom(bottom)
+                }
+            }
+
+//        canvas.clickListener = ::selectElement
+
+            //tree.visualObjectTree(visual, editor::propertyEditor)
+            treeElement.displayObjectTree(visual) { name ->
+                selectElement(name)
+                canvas.highlight(name)
+            }
+            canvas.render(visual)
+
+
+
+            canvas.render(visual)
+            message(null)
+            spinner(false)
+        }
+
+        (document.getElementById("drop_zone") as? HTMLDivElement)?.apply {
+            addEventListener("dragover", { handleDragOver(it as DragEvent) }, false)
+            addEventListener("drop", { loadData(it as DragEvent, action) }, false)
+        }
+
+    }
+}
+
+fun main() {
+    startApplication(::GDMLDemoApp)
+}
\ No newline at end of file
diff --git a/demo/gdml/src/jsMain/web/css/jsoneditor.min.css b/demo/gdml/src/jsMain/web/css/jsoneditor.min.css
new file mode 100644
index 00000000..63190af9
--- /dev/null
+++ b/demo/gdml/src/jsMain/web/css/jsoneditor.min.css
@@ -0,0 +1,6 @@
+.jsoneditor .search input{height:auto;border:inherit;border:none;box-shadow:none}.jsoneditor table{border-collapse:collapse;width:auto}.jsoneditor td,.jsoneditor th{padding:0;display:table-cell;text-align:left;vertical-align:inherit;border-radius:inherit}.jsoneditor{color:#1a1a1a;border:thin solid #3883fa;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;position:relative;padding:0;line-height:100%}div.jsoneditor-default,div.jsoneditor-field,div.jsoneditor-readonly,div.jsoneditor-value{border:1px solid transparent;min-height:16px;min-width:32px;padding:2px;margin:1px;word-wrap:break-word;float:left}div.jsoneditor-field p,div.jsoneditor-value p{margin:0}div.jsoneditor-value{word-break:break-word}div.jsoneditor-value.jsoneditor-empty::after{content:"value"}div.jsoneditor-value.jsoneditor-string{color:#006000}div.jsoneditor-value.jsoneditor-number{color:#ee422e}div.jsoneditor-value.jsoneditor-boolean{color:#ff8c00}div.jsoneditor-value.jsoneditor-null{color:#004ed0}div.jsoneditor-value.jsoneditor-invalid{color:#000}div.jsoneditor-readonly{min-width:16px;color:grey}div.jsoneditor-empty{border-color:#d3d3d3;border-style:dashed;border-radius:2px}div.jsoneditor-field.jsoneditor-empty::after{content:"field"}div.jsoneditor td{vertical-align:top}div.jsoneditor td.jsoneditor-separator{padding:3px 0;vertical-align:top;color:grey}div.jsoneditor td.jsoneditor-tree{vertical-align:top}div.jsoneditor div.jsoneditor-anchor{cursor:pointer}div.jsoneditor div.jsoneditor-anchor .picker_wrapper.popup.popup_bottom{top:28px;left:-10px}div.jsoneditor.busy pre.jsoneditor-preview{background:#f5f5f5;color:grey}div.jsoneditor.busy div.jsoneditor-busy{display:inherit}div.jsoneditor code.jsoneditor-preview{background:0 0}div.jsoneditor.jsoneditor-mode-preview pre.jsoneditor-preview{width:100%;height:100%;box-sizing:border-box;overflow:auto;padding:2px;margin:0;white-space:pre-wrap;word-break:break-all}div.jsoneditor-default{color:grey;padding-left:10px}div.jsoneditor-tree{width:100%;height:100%;position:relative;overflow:auto}div.jsoneditor-tree button.jsoneditor-button{width:24px;height:24px;padding:0;margin:0;border:none;cursor:pointer;background:transparent url(../img/jsoneditor-icons.svg)}div.jsoneditor-tree button.jsoneditor-button:focus{background-color:#f5f5f5;outline:#e5e5e5 solid 1px}div.jsoneditor-tree button.jsoneditor-collapsed{background-position:0 -48px}div.jsoneditor-tree button.jsoneditor-expanded{background-position:0 -72px}div.jsoneditor-tree button.jsoneditor-contextmenu{background-position:-48px -72px}div.jsoneditor-tree button.jsoneditor-invisible{visibility:hidden;background:0 0}div.jsoneditor-tree button.jsoneditor-dragarea{background:url(../img/jsoneditor-icons.svg) -72px -72px;cursor:move}div.jsoneditor-tree :focus{outline:0}div.jsoneditor-tree div.jsoneditor-show-more{display:inline-block;padding:3px 4px;margin:2px 0;background-color:#e5e5e5;border-radius:3px;color:grey;font-family:arial,sans-serif;font-size:10pt}div.jsoneditor-tree div.jsoneditor-show-more a{display:inline-block;color:grey}div.jsoneditor-tree div.jsoneditor-color{display:inline-block;width:12px;height:12px;margin:4px;border:1px solid grey;cursor:pointer}div.jsoneditor-tree div.jsoneditor-date{background:#a1a1a1;color:#fff;font-family:arial,sans-serif;border-radius:3px;display:inline-block;padding:3px;margin:0 3px}div.jsoneditor-tree table.jsoneditor-tree{border-collapse:collapse;border-spacing:0;width:100%}div.jsoneditor-tree .jsoneditor-button.jsoneditor-schema-error{width:24px;height:24px;padding:0;margin:0 4px 0 0;background:url(../img/jsoneditor-icons.svg) -168px -48px}div.jsoneditor-outer{position:static;width:100%;height:100%;margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}div.jsoneditor-outer.has-nav-bar{margin-top:-26px;padding-top:26px}div.jsoneditor-outer.has-nav-bar.has-main-menu-bar{margin-top:-61px;padding-top:61px}div.jsoneditor-outer.has-status-bar{margin-bottom:-26px;padding-bottom:26px}div.jsoneditor-outer.has-main-menu-bar{margin-top:-35px;padding-top:35px}div.jsoneditor-busy{position:absolute;top:15%;left:0;box-sizing:border-box;width:100%;text-align:center;display:none}div.jsoneditor-busy span{background-color:#ffffab;border:1px solid #fe0;border-radius:3px;padding:5px 15px;box-shadow:0 0 5px rgba(0,0,0,.4)}div.jsoneditor-field.jsoneditor-empty::after,div.jsoneditor-value.jsoneditor-empty::after{pointer-events:none;color:#d3d3d3;font-size:8pt}a.jsoneditor-value.jsoneditor-url,div.jsoneditor-value.jsoneditor-url{color:#006000;text-decoration:underline}a.jsoneditor-value.jsoneditor-url{display:inline-block;padding:2px;margin:2px}a.jsoneditor-value.jsoneditor-url:focus,a.jsoneditor-value.jsoneditor-url:hover{color:#ee422e}div.jsoneditor-field.jsoneditor-highlight,div.jsoneditor-field[contenteditable=true]:focus,div.jsoneditor-field[contenteditable=true]:hover,div.jsoneditor-value.jsoneditor-highlight,div.jsoneditor-value[contenteditable=true]:focus,div.jsoneditor-value[contenteditable=true]:hover{background-color:#ffffab;border:1px solid #fe0;border-radius:2px}div.jsoneditor-field.jsoneditor-highlight-active,div.jsoneditor-field.jsoneditor-highlight-active:focus,div.jsoneditor-field.jsoneditor-highlight-active:hover,div.jsoneditor-value.jsoneditor-highlight-active,div.jsoneditor-value.jsoneditor-highlight-active:focus,div.jsoneditor-value.jsoneditor-highlight-active:hover{background-color:#fe0;border:1px solid #ffc700;border-radius:2px}div.jsoneditor-value.jsoneditor-array,div.jsoneditor-value.jsoneditor-object{min-width:16px}div.jsoneditor-mode-form tr.jsoneditor-expandable td.jsoneditor-tree,div.jsoneditor-mode-view tr.jsoneditor-expandable td.jsoneditor-tree{cursor:pointer}div.jsoneditor-tree button.jsoneditor-contextmenu.jsoneditor-selected,div.jsoneditor-tree button.jsoneditor-contextmenu:focus,div.jsoneditor-tree button.jsoneditor-contextmenu:hover,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu{background-position:-48px -48px}div.jsoneditor-tree div.jsoneditor-show-more a:focus,div.jsoneditor-tree div.jsoneditor-show-more a:hover{color:#ee422e}.ace-jsoneditor,textarea.jsoneditor-text{min-height:150px}textarea.jsoneditor-text{width:100%;height:100%;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;outline-width:0;border:none;background-color:#fff;resize:none}tr.jsoneditor-highlight,tr.jsoneditor-selected{background-color:#d3d3d3}tr.jsoneditor-selected button.jsoneditor-contextmenu,tr.jsoneditor-selected button.jsoneditor-dragarea{visibility:hidden}tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea{visibility:visible}div.jsoneditor-tree button.jsoneditor-dragarea:focus,div.jsoneditor-tree button.jsoneditor-dragarea:hover,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea{background-position:-72px -48px}div.jsoneditor td,div.jsoneditor th,div.jsoneditor tr{padding:0;margin:0}.jsoneditor-popover,.jsoneditor-schema-error,div.jsoneditor td,div.jsoneditor textarea,div.jsoneditor th,div.jsoneditor-field,div.jsoneditor-value,pre.jsoneditor-preview{font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt;color:#1a1a1a}.jsoneditor-schema-error{cursor:default;display:inline-block;height:24px;line-height:24px;position:relative;text-align:center;width:24px}.jsoneditor-popover{background-color:#4c4c4c;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.4);color:#fff;padding:7px 10px;position:absolute;cursor:auto;width:200px;z-index:999}.jsoneditor-popover.jsoneditor-above{bottom:32px;left:-98px}.jsoneditor-popover.jsoneditor-above:before{border-top:7px solid #4c4c4c;bottom:-7px}.jsoneditor-popover.jsoneditor-below{top:32px;left:-98px}.jsoneditor-popover.jsoneditor-below:before{border-bottom:7px solid #4c4c4c;top:-7px}.jsoneditor-popover.jsoneditor-left{top:-7px;right:32px}.jsoneditor-popover.jsoneditor-left:before{border-left:7px solid #4c4c4c;border-top:7px solid transparent;border-bottom:7px solid transparent;content:"";top:19px;right:-14px;left:inherit;margin-left:inherit;margin-top:-7px;position:absolute}.jsoneditor-popover.jsoneditor-right{top:-7px;left:32px}.jsoneditor-popover.jsoneditor-right:before{border-right:7px solid #4c4c4c;border-top:7px solid transparent;border-bottom:7px solid transparent;content:"";top:19px;left:-14px;margin-left:inherit;margin-top:-7px;position:absolute}.jsoneditor-popover:before{border-right:7px solid transparent;border-left:7px solid transparent;content:"";display:block;left:50%;margin-left:-7px;position:absolute}.jsoneditor-text-errors tr.jump-to-line:hover{text-decoration:underline;cursor:pointer}.jsoneditor-schema-error:focus .jsoneditor-popover,.jsoneditor-schema-error:hover .jsoneditor-popover{display:block;animation:fade-in .3s linear 1,move-up .3s linear 1}@keyframes fade-in{from{opacity:0}to{opacity:1}}.jsoneditor .jsoneditor-validation-errors-container{max-height:130px;overflow-y:auto}.jsoneditor .jsoneditor-validation-errors{width:100%;overflow:hidden}.jsoneditor .jsoneditor-additional-errors{position:absolute;margin:auto;bottom:31px;left:calc(50% - 92px);color:grey;background-color:#ebebeb;padding:7px 15px;border-radius:8px}.jsoneditor .jsoneditor-additional-errors.visible{visibility:visible;opacity:1;transition:opacity 2s linear}.jsoneditor .jsoneditor-additional-errors.hidden{visibility:hidden;opacity:0;transition:visibility 0s 2s,opacity 2s linear}.jsoneditor .jsoneditor-text-errors{width:100%;border-collapse:collapse;border-top:1px solid #ffc700}.jsoneditor .jsoneditor-text-errors td{padding:3px 6px;vertical-align:middle}.jsoneditor .jsoneditor-text-errors td pre{margin:0;white-space:normal}.jsoneditor .jsoneditor-text-errors tr{background-color:#ffffab}.jsoneditor .jsoneditor-text-errors tr.parse-error{background-color:#ee2e2e70}.jsoneditor-text-errors .jsoneditor-schema-error{border:none;width:24px;height:24px;padding:0;margin:0 4px 0 0;cursor:pointer}.jsoneditor-text-errors tr .jsoneditor-schema-error{background:url(../img/jsoneditor-icons.svg) -168px -48px}.jsoneditor-text-errors tr.parse-error .jsoneditor-schema-error{background:url(../img/jsoneditor-icons.svg) -25px 0}.fadein{-webkit-animation:fadein .3s;animation:fadein .3s;-moz-animation:fadein .3s;-o-animation:fadein .3s}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.jsoneditor-contextmenu-root{position:relative;width:0;height:0}.jsoneditor-contextmenu{position:absolute;box-sizing:content-box;z-index:99}.jsoneditor-contextmenu .jsoneditor-menu{position:relative;left:0;top:0;width:128px;height:auto;background:#fff;border:1px solid #d3d3d3;box-shadow:2px 2px 12px rgba(128,128,128,.3);list-style:none;margin:0;padding:0}.jsoneditor-contextmenu .jsoneditor-menu button{position:relative;padding:0 4px 0 0;margin:0;width:128px;height:auto;border:none;cursor:pointer;color:#4d4d4d;background:0 0;font-size:10pt;font-family:arial,sans-serif;box-sizing:border-box;text-align:left}.jsoneditor-contextmenu .jsoneditor-menu button::-moz-focus-inner{padding:0;border:0}.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-default{width:96px}.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand{float:right;width:32px;height:24px;border-left:1px solid #e5e5e5}.jsoneditor-contextmenu .jsoneditor-menu li{overflow:hidden}.jsoneditor-contextmenu .jsoneditor-menu li ul{display:none;position:relative;left:-10px;top:0;border:none;box-shadow:inset 0 0 10px rgba(128,128,128,.5);padding:0 10px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.jsoneditor-contextmenu .jsoneditor-menu li ul .jsoneditor-icon{margin-left:24px}.jsoneditor-contextmenu .jsoneditor-menu li ul li button{padding-left:24px;animation:all ease-in-out 1s}.jsoneditor-contextmenu .jsoneditor-menu li button .jsoneditor-expand{position:absolute;top:0;right:0;width:24px;height:24px;padding:0;margin:0 4px 0 0;background:url(../img/jsoneditor-icons.svg) 0 -72px}.jsoneditor-contextmenu .jsoneditor-icon{position:absolute;top:0;left:0;width:24px;height:24px;border:none;padding:0;margin:0;background-image:url(../img/jsoneditor-icons.svg)}.jsoneditor-contextmenu .jsoneditor-text{padding:4px 0 4px 24px;word-wrap:break-word}.jsoneditor-contextmenu .jsoneditor-text.jsoneditor-right-margin{padding-right:24px}.jsoneditor-contextmenu .jsoneditor-separator{height:0;border-top:1px solid #e5e5e5;padding-top:5px;margin-top:5px}.jsoneditor-contextmenu button.jsoneditor-remove .jsoneditor-icon{background-position:-24px 0}.jsoneditor-contextmenu button.jsoneditor-append .jsoneditor-icon{background-position:0 0}.jsoneditor-contextmenu button.jsoneditor-insert .jsoneditor-icon{background-position:0 0}.jsoneditor-contextmenu button.jsoneditor-duplicate .jsoneditor-icon{background-position:-48px 0}.jsoneditor-contextmenu button.jsoneditor-sort-asc .jsoneditor-icon{background-position:-168px 0}.jsoneditor-contextmenu button.jsoneditor-sort-desc .jsoneditor-icon{background-position:-192px 0}.jsoneditor-contextmenu button.jsoneditor-transform .jsoneditor-icon{background-position:-216px 0}.jsoneditor-contextmenu button.jsoneditor-extract .jsoneditor-icon{background-position:0 -24px}.jsoneditor-contextmenu button.jsoneditor-type-string .jsoneditor-icon{background-position:-144px 0}.jsoneditor-contextmenu button.jsoneditor-type-auto .jsoneditor-icon{background-position:-120px 0}.jsoneditor-contextmenu button.jsoneditor-type-object .jsoneditor-icon{background-position:-72px 0}.jsoneditor-contextmenu button.jsoneditor-type-array .jsoneditor-icon{background-position:-96px 0}.jsoneditor-contextmenu button.jsoneditor-type-modes .jsoneditor-icon{background-image:none;width:6px}.jsoneditor-contextmenu li,.jsoneditor-contextmenu ul{box-sizing:content-box;position:relative}.jsoneditor-contextmenu .jsoneditor-menu button:focus,.jsoneditor-contextmenu .jsoneditor-menu button:hover{color:#1a1a1a;background-color:#f5f5f5;outline:0}.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover{color:#fff;background-color:#ee422e}.jsoneditor-contextmenu .jsoneditor-menu li ul li button:focus,.jsoneditor-contextmenu .jsoneditor-menu li ul li button:hover{background-color:#f5f5f5}.jsoneditor-modal{max-width:95%;border-radius:2px!important;padding:45px 15px 15px 15px!important;box-shadow:2px 2px 12px rgba(128,128,128,.3);color:#4d4d4d;line-height:1.3em}.jsoneditor-modal.jsoneditor-modal-transform{width:600px!important}.jsoneditor-modal .pico-modal-header{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;padding:0 10px;height:30px;line-height:30px;font-family:arial,sans-serif;font-size:11pt;background:#3883fa;color:#fff}.jsoneditor-modal table{width:100%}.jsoneditor-modal table td{padding:3px 0}.jsoneditor-modal table td.jsoneditor-modal-input{text-align:right;padding-right:0;white-space:nowrap}.jsoneditor-modal table td.jsoneditor-modal-actions{padding-top:15px}.jsoneditor-modal table th{vertical-align:middle}.jsoneditor-modal p:first-child{margin-top:0}.jsoneditor-modal a{color:#3883fa}.jsoneditor-modal .jsoneditor-jmespath-block{margin-bottom:10px}.jsoneditor-modal .pico-close{background:0 0!important;font-size:24px!important;top:7px!important;right:7px!important;color:#fff}.jsoneditor-modal input{padding:4px}.jsoneditor-modal input[type=text]{cursor:inherit}.jsoneditor-modal input[disabled]{background:#d3d3d3;color:grey}.jsoneditor-modal .jsoneditor-select-wrapper{position:relative;display:inline-block}.jsoneditor-modal .jsoneditor-select-wrapper:after{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #666;position:absolute;right:8px;top:14px;pointer-events:none}.jsoneditor-modal select{padding:3px 24px 3px 10px;min-width:180px;max-width:350px;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:0;text-overflow:"";font-size:10pt;line-height:1.5em}.jsoneditor-modal select::-ms-expand{display:none}.jsoneditor-modal .jsoneditor-button-group input{padding:4px 10px;margin:0;border-radius:0;border-left-style:none}.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-first{border-top-left-radius:3px;border-bottom-left-radius:3px;border-left-style:solid}.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-last{border-top-right-radius:3px;border-bottom-right-radius:3px}.jsoneditor-modal .jsoneditor-transform-preview{background:#f5f5f5;height:200px}.jsoneditor-modal .jsoneditor-transform-preview.jsoneditor-error{color:#ee422e}.jsoneditor-modal .jsoneditor-jmespath-wizard{line-height:1.2em;width:100%;padding:0;border-radius:3px}.jsoneditor-modal .jsoneditor-jmespath-label{font-weight:700;color:#1e90ff;margin-top:20px;margin-bottom:5px}.jsoneditor-modal .jsoneditor-jmespath-wizard-table{width:100%}.jsoneditor-modal .jsoneditor-jmespath-wizard-label{font-style:italic;margin:4px 0 2px 0}.jsoneditor-modal .jsoneditor-inline{position:relative;display:inline-block;width:100%;padding-top:2px;padding-bottom:2px}.jsoneditor-modal .jsoneditor-inline:not(:last-child){padding-right:2px}.jsoneditor-modal .jsoneditor-jmespath-filter{display:flex;flex-wrap:wrap}.jsoneditor-modal .jsoneditor-jmespath-filter-field{width:180px}.jsoneditor-modal .jsoneditor-jmespath-filter-relation{width:100px}.jsoneditor-modal .jsoneditor-jmespath-filter-value{min-width:180px;flex:1}.jsoneditor-modal .jsoneditor-jmespath-sort-field{width:170px}.jsoneditor-modal .jsoneditor-jmespath-sort-order{width:150px}.jsoneditor-modal .jsoneditor-jmespath-select-fields{width:100%}.jsoneditor-modal .selectr-selected{border-color:#d3d3d3;padding:4px 28px 4px 8px}.jsoneditor-modal .selectr-selected .selectr-tag{background-color:#3883fa;border-radius:5px}.jsoneditor-modal table td,.jsoneditor-modal table th{text-align:left;vertical-align:top;font-weight:400;color:#4d4d4d;border-spacing:0;border-collapse:collapse}.jsoneditor-modal #query,.jsoneditor-modal input,.jsoneditor-modal select,.jsoneditor-modal textarea{background:#fff;border:1px solid #d3d3d3;color:#4d4d4d;border-radius:3px;padding:4px}.jsoneditor-modal,.jsoneditor-modal #query,.jsoneditor-modal input,.jsoneditor-modal option,.jsoneditor-modal select,.jsoneditor-modal table td,.jsoneditor-modal table th,.jsoneditor-modal textarea{font-size:10.5pt;font-family:arial,sans-serif}.jsoneditor-modal #query,.jsoneditor-modal .jsoneditor-transform-preview{font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt;width:100%;box-sizing:border-box}.jsoneditor-modal input[type=button],.jsoneditor-modal input[type=submit]{background:#f5f5f5;padding:4px 20px}.jsoneditor-modal input,.jsoneditor-modal select{cursor:pointer}.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc{background:#3883fa;border-color:#3883fa;color:#fff}.jsoneditor-menu{width:100%;height:35px;padding:2px;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;background-color:#3883fa;border-bottom:1px solid #3883fa}.jsoneditor-menu>.jsoneditor-modes>button,.jsoneditor-menu>button{width:26px;height:26px;margin:2px;padding:0;border-radius:2px;border:1px solid transparent;background:transparent url(../img/jsoneditor-icons.svg);color:#fff;opacity:.8;font-family:arial,sans-serif;font-size:10pt;float:left}.jsoneditor-menu>.jsoneditor-modes>button:hover,.jsoneditor-menu>button:hover{background-color:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4)}.jsoneditor-menu>.jsoneditor-modes>button:active,.jsoneditor-menu>.jsoneditor-modes>button:focus,.jsoneditor-menu>button:active,.jsoneditor-menu>button:focus{background-color:rgba(255,255,255,.3)}.jsoneditor-menu>.jsoneditor-modes>button:disabled,.jsoneditor-menu>button:disabled{opacity:.5;background-color:transparent;border:none}.jsoneditor-menu>button.jsoneditor-collapse-all{background-position:0 -96px}.jsoneditor-menu>button.jsoneditor-expand-all{background-position:0 -120px}.jsoneditor-menu>button.jsoneditor-sort{background-position:-120px -96px}.jsoneditor-menu>button.jsoneditor-transform{background-position:-144px -96px}.jsoneditor.jsoneditor-mode-form>.jsoneditor-menu>button.jsoneditor-sort,.jsoneditor.jsoneditor-mode-form>.jsoneditor-menu>button.jsoneditor-transform,.jsoneditor.jsoneditor-mode-view>.jsoneditor-menu>button.jsoneditor-sort,.jsoneditor.jsoneditor-mode-view>.jsoneditor-menu>button.jsoneditor-transform{display:none}.jsoneditor-menu>button.jsoneditor-undo{background-position:-24px -96px}.jsoneditor-menu>button.jsoneditor-undo:disabled{background-position:-24px -120px}.jsoneditor-menu>button.jsoneditor-redo{background-position:-48px -96px}.jsoneditor-menu>button.jsoneditor-redo:disabled{background-position:-48px -120px}.jsoneditor-menu>button.jsoneditor-compact{background-position:-72px -96px}.jsoneditor-menu>button.jsoneditor-format{background-position:-72px -120px}.jsoneditor-menu>button.jsoneditor-repair{background-position:-96px -96px}.jsoneditor-menu>.jsoneditor-modes{display:inline-block;float:left}.jsoneditor-menu>.jsoneditor-modes>button{background-image:none;width:auto;padding-left:6px;padding-right:6px}.jsoneditor-menu>.jsoneditor-modes>button.jsoneditor-separator,.jsoneditor-menu>button.jsoneditor-separator{margin-left:10px}.jsoneditor-menu a{font-family:arial,sans-serif;font-size:10pt;color:#fff;opacity:.8;vertical-align:middle}.jsoneditor-menu a:hover{opacity:1}.jsoneditor-menu a.jsoneditor-poweredBy{font-size:8pt;position:absolute;right:0;top:0;padding:10px}.jsoneditor-search{font-family:arial,sans-serif;position:absolute;right:4px;top:4px;border-collapse:collapse;border-spacing:0;display:flex}.jsoneditor-search input{color:#1a1a1a;width:120px;border:none;outline:0;margin:1px;line-height:20px}.jsoneditor-search button{width:16px;height:24px;padding:0;margin:0;border:none;background:url(../img/jsoneditor-icons.svg);vertical-align:top}.jsoneditor-search button:hover{background-color:transparent}.jsoneditor-search button.jsoneditor-refresh{width:18px;background-position:-99px -73px}.jsoneditor-search button.jsoneditor-next{cursor:pointer;background-position:-124px -73px}.jsoneditor-search button.jsoneditor-next:hover{background-position:-124px -49px}.jsoneditor-search button.jsoneditor-previous{cursor:pointer;background-position:-148px -73px;margin-right:2px}.jsoneditor-search button.jsoneditor-previous:hover{background-position:-148px -49px}.jsoneditor-results{font-family:arial,sans-serif;color:#fff;padding-right:5px;line-height:26px}.jsoneditor-frame{border:1px solid transparent;background-color:#fff;padding:0 2px;margin:0}.jsoneditor .autocomplete.dropdown{position:absolute;background:#fff;box-shadow:2px 2px 12px rgba(128,128,128,.3);border:1px solid #d3d3d3;z-index:100;overflow-x:hidden;overflow-y:auto;cursor:default;margin:0;padding:5px;text-align:left;outline:0;font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt}.jsoneditor .autocomplete.dropdown .item{color:#333}.jsoneditor .autocomplete.dropdown .item.hover{background-color:#ddd}.jsoneditor .autocomplete.hint{color:#aaa;top:4px;left:4px}.jsoneditor-treepath{padding:0 5px;overflow:hidden;white-space:nowrap;outline:0}.jsoneditor-treepath.show-all{word-wrap:break-word;white-space:normal;position:absolute;background-color:#ebebeb;z-index:999;box-shadow:2px 2px 12px rgba(128,128,128,.3)}.jsoneditor-treepath.show-all span.jsoneditor-treepath-show-all-btn{display:none}.jsoneditor-treepath div.jsoneditor-contextmenu-root{position:absolute;left:0}.jsoneditor-treepath .jsoneditor-treepath-show-all-btn{position:absolute;background-color:#ebebeb;left:0;height:20px;padding:0 3px;cursor:pointer}.jsoneditor-treepath .jsoneditor-treepath-element{margin:1px;font-family:arial,sans-serif;font-size:10pt}.jsoneditor-treepath .jsoneditor-treepath-seperator{margin:2px;font-size:9pt;font-family:arial,sans-serif}.jsoneditor-treepath span.jsoneditor-treepath-element:hover,.jsoneditor-treepath span.jsoneditor-treepath-seperator:hover{cursor:pointer;text-decoration:underline}.jsoneditor-statusbar{line-height:26px;height:26px;color:grey;background-color:#ebebeb;border-top:1px solid #d3d3d3;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:10pt}.jsoneditor-statusbar>.jsoneditor-curserinfo-val{margin-right:12px}.jsoneditor-statusbar>.jsoneditor-curserinfo-count{margin-left:4px}.jsoneditor-statusbar>.jsoneditor-validation-error-icon{float:right;width:24px;height:24px;padding:0;margin-top:1px;background:url(../img/jsoneditor-icons.svg) -168px -48px;cursor:pointer}.jsoneditor-statusbar>.jsoneditor-validation-error-count{float:right;margin:0 4px 0 0;cursor:pointer}.jsoneditor-statusbar>.jsoneditor-parse-error-icon{float:right;width:24px;height:24px;padding:0;margin:1px;background:url(../img/jsoneditor-icons.svg) -25px 0}.jsoneditor-statusbar .jsoneditor-array-info a{color:inherit}div.jsoneditor-statusbar>.jsoneditor-curserinfo-label,div.jsoneditor-statusbar>.jsoneditor-size-info{margin:0 4px}.jsoneditor-navigation-bar{width:100%;height:26px;line-height:26px;padding:0;margin:0;border-bottom:1px solid #d3d3d3;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:grey;background-color:#ebebeb;overflow:hidden;font-family:arial,sans-serif;font-size:10pt}/*!
+ * Selectr 2.4.0
+ * https://github.com/Mobius1/Selectr
+ *
+ * Released under the MIT license
+ */.selectr-container{position:relative}.selectr-container li{list-style:none}.selectr-hidden{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0 none}.selectr-visible{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;z-index:11}.selectr-desktop.multiple .selectr-visible{display:none}.selectr-desktop.multiple.native-open .selectr-visible{top:100%;min-height:200px!important;height:auto;opacity:1;display:block}.selectr-container.multiple.selectr-mobile .selectr-selected{z-index:0}.selectr-selected{position:relative;z-index:1;box-sizing:border-box;width:100%;padding:7px 28px 7px 14px;cursor:pointer;border:1px solid #999;border-radius:3px;background-color:#fff}.selectr-selected::before{position:absolute;top:50%;right:10px;width:0;height:0;content:'';-o-transform:rotate(0) translate3d(0,-50%,0);-ms-transform:rotate(0) translate3d(0,-50%,0);-moz-transform:rotate(0) translate3d(0,-50%,0);-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0);border-width:4px 4px 0 4px;border-style:solid;border-color:#6c7a86 transparent transparent}.selectr-container.native-open .selectr-selected::before,.selectr-container.open .selectr-selected::before{border-width:0 4px 4px 4px;border-style:solid;border-color:transparent transparent #6c7a86}.selectr-label{display:none;overflow:hidden;width:100%;white-space:nowrap;text-overflow:ellipsis}.selectr-placeholder{color:#6c7a86}.selectr-tags{margin:0;padding:0;white-space:normal}.has-selected .selectr-tags{margin:0 0 -2px}.selectr-tag{list-style:none;position:relative;float:left;padding:2px 25px 2px 8px;margin:0 2px 2px 0;cursor:default;color:#fff;border:medium none;border-radius:10px;background:#acb7bf none repeat scroll 0 0}.selectr-container.multiple.has-selected .selectr-selected{padding:5px 28px 5px 5px}.selectr-options-container{position:absolute;z-index:10000;top:calc(100% - 1px);left:0;display:none;box-sizing:border-box;width:100%;border-width:0 1px 1px;border-style:solid;border-color:transparent #999 #999;border-radius:0 0 3px 3px;background-color:#fff}.selectr-container.open .selectr-options-container{display:block}.selectr-input-container{position:relative;display:none}.selectr-clear,.selectr-input-clear,.selectr-tag-remove{position:absolute;top:50%;right:22px;width:20px;height:20px;padding:0;cursor:pointer;-o-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);border:medium none;background-color:transparent;z-index:11}.selectr-clear,.selectr-input-clear{display:none}.selectr-container.has-selected .selectr-clear,.selectr-input-container.active .selectr-input-clear{display:block}.selectr-selected .selectr-tag-remove{right:2px}.selectr-clear::after,.selectr-clear::before,.selectr-input-clear::after,.selectr-input-clear::before,.selectr-tag-remove::after,.selectr-tag-remove::before{position:absolute;top:5px;left:9px;width:2px;height:10px;content:' ';background-color:#6c7a86}.selectr-tag-remove::after,.selectr-tag-remove::before{top:4px;width:3px;height:12px;background-color:#fff}.selectr-clear:before,.selectr-input-clear::before,.selectr-tag-remove::before{-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.selectr-clear:after,.selectr-input-clear::after,.selectr-tag-remove::after{-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.selectr-input-container.active,.selectr-input-container.active .selectr-clear{display:block}.selectr-input{top:5px;left:5px;box-sizing:border-box;width:calc(100% - 30px);margin:10px 15px;padding:7px 30px 7px 9px;border:1px solid #999;border-radius:3px}.selectr-notice{display:none;box-sizing:border-box;width:100%;padding:8px 16px;border-top:1px solid #999;border-radius:0 0 3px 3px;background-color:#fff}.selectr-container.notice .selectr-notice{display:block}.selectr-container.notice .selectr-selected{border-radius:3px 3px 0 0}.selectr-options{position:relative;top:calc(100% + 2px);display:none;overflow-x:auto;overflow-y:scroll;max-height:200px;margin:0;padding:0}.selectr-container.notice .selectr-options-container,.selectr-container.open .selectr-input-container,.selectr-container.open .selectr-options{display:block}.selectr-option{position:relative;display:block;padding:5px 20px;list-style:outside none none;cursor:pointer;font-weight:400}.selectr-options.optgroups>.selectr-option{padding-left:25px}.selectr-optgroup{font-weight:700;padding:0}.selectr-optgroup--label{font-weight:700;margin-top:10px;padding:5px 15px}.selectr-match{text-decoration:underline}.selectr-option.selected{background-color:#ddd}.selectr-option.active{color:#fff;background-color:#5897fb}.selectr-option.disabled{opacity:.4}.selectr-option.excluded{display:none}.selectr-container.open .selectr-selected{border-color:#999 #999 transparent #999;border-radius:3px 3px 0 0}.selectr-container.open .selectr-selected::after{-o-transform:rotate(180deg) translate3d(0,50%,0);-ms-transform:rotate(180deg) translate3d(0,50%,0);-moz-transform:rotate(180deg) translate3d(0,50%,0);-webkit-transform:rotate(180deg) translate3d(0,50%,0);transform:rotate(180deg) translate3d(0,50%,0)}.selectr-disabled{opacity:.6}.has-selected .selectr-placeholder,.selectr-empty{display:none}.has-selected .selectr-label{display:block}.taggable .selectr-selected{padding:4px 28px 4px 4px}.taggable .selectr-selected::after{display:table;content:" ";clear:both}.taggable .selectr-label{width:auto}.taggable .selectr-tags{float:left;display:block}.taggable .selectr-placeholder{display:none}.input-tag{float:left;min-width:90px;width:auto}.selectr-tag-input{border:medium none;padding:3px 10px;width:100%;font-family:inherit;font-weight:inherit;font-size:inherit}.selectr-input-container.loading::after{position:absolute;top:50%;right:20px;width:20px;height:20px;content:'';-o-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-o-transform-origin:50% 0 0;-ms-transform-origin:50% 0 0;-moz-transform-origin:50% 0 0;-webkit-transform-origin:50% 0 0;transform-origin:50% 0 0;-moz-animation:.5s linear 0s normal forwards infinite running spin;-webkit-animation:.5s linear 0s normal forwards infinite running spin;animation:.5s linear 0s normal forwards infinite running spin;border-width:3px;border-style:solid;border-color:#aaa #ddd #ddd;border-radius:50%}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0)}100%{-webkit-transform:rotate(360deg) translate3d(0,-50%,0);transform:rotate(360deg) translate3d(0,-50%,0)}}@keyframes spin{0%{-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0)}100%{-webkit-transform:rotate(360deg) translate3d(0,-50%,0);transform:rotate(360deg) translate3d(0,-50%,0)}}.selectr-container.open.inverted .selectr-selected{border-color:transparent #999 #999;border-radius:0 0 3px 3px}.selectr-container.inverted .selectr-options-container{border-width:1px 1px 0;border-color:#999 #999 transparent;border-radius:3px 3px 0 0;background-color:#fff}.selectr-container.inverted .selectr-options-container{top:auto;bottom:calc(100% - 1px)}.selectr-container ::-webkit-input-placeholder{color:#6c7a86;opacity:1}.selectr-container ::-moz-placeholder{color:#6c7a86;opacity:1}.selectr-container :-ms-input-placeholder{color:#6c7a86;opacity:1}.selectr-container ::placeholder{color:#6c7a86;opacity:1}
\ No newline at end of file
diff --git a/demo/gdml/src/jsMain/web/css/main.css b/demo/gdml/src/jsMain/web/css/main.css
new file mode 100644
index 00000000..e7f925df
--- /dev/null
+++ b/demo/gdml/src/jsMain/web/css/main.css
@@ -0,0 +1,48 @@
+.loader {
+    border: 16px solid #f3f3f3; /* Light grey */
+    border-top: 16px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Remove default bullets */
+ul, .objTree-subtree {
+    list-style-type: none;
+}
+
+/* Style the caret/arrow */
+.objTree-caret {
+    cursor: pointer;
+    user-select: none; /* Prevent text selection */
+}
+
+.objTree-label {
+    cursor: pointer;
+}
+
+/* Create the caret/arrow with a unicode, and style it */
+.objTree-caret::before {
+    content: "\25B6";
+    color: black;
+    display: inline-block;
+    margin-right: 6px;
+}
+
+.objTree-leaf::before {
+    content: "\25C6";
+    color: black;
+    display: inline-block;
+    margin-right: 6px;
+}
+
+/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+.objTree-caret-down::before {
+    transform: rotate(90deg);
+}
diff --git a/demo/gdml/src/jsMain/web/img/jsoneditor-icons.svg b/demo/gdml/src/jsMain/web/img/jsoneditor-icons.svg
new file mode 100644
index 00000000..332be179
--- /dev/null
+++ b/demo/gdml/src/jsMain/web/img/jsoneditor-icons.svg
@@ -0,0 +1,748 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+        xmlns:dc="http://purl.org/dc/elements/1.1/"
+        xmlns:cc="http://creativecommons.org/ns#"
+        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+        width="240"
+        height="144"
+        id="svg4136"
+        version="1.1"
+        inkscape:version="0.91 r13725"
+        sodipodi:docname="jsoneditor-icons.svg">
+  <title
+     id="title6512">JSON Editor Icons</title>
+  <metadata
+     id="metadata4148">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>JSON Editor Icons</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4146" />
+  <sodipodi:namedview
+     pagecolor="#ff63ff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     id="namedview4144"
+     showgrid="true"
+     inkscape:zoom="4"
+     inkscape:cx="13.229181"
+     inkscape:cy="119.82429"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4136"
+     showguides="false"
+     borderlayer="false"
+     inkscape:showpageshadow="true"
+     showborder="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4640"
+       empspacing="24" />
+  </sodipodi:namedview>
+  <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
+     id="svg_1"
+     height="16"
+     width="16"
+     y="4"
+     x="4" />
+  <rect
+     id="svg_1-7"
+     height="16"
+     width="16"
+     y="3.999995"
+     x="28.000006"
+     style="fill:#ec3f29;fill-opacity:0.94117647;stroke:none;stroke-width:0" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
+     x="52.000004"
+     y="3.999995"
+     width="16"
+     height="16"
+     id="rect4165" />
+  <rect
+     id="rect4175"
+     height="16"
+     width="16"
+     y="3.9999852"
+     x="172.00002"
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4175-3"
+     height="16"
+     width="16"
+     y="3.999995"
+     x="196"
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
+  <g
+     id="g4299"
+     style="stroke:none">
+    <rect
+       x="7.0000048"
+       y="10.999998"
+       width="9.9999924"
+       height="1.9999986"
+       id="svg_1-1"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
+    <rect
+       x="11.000005"
+       y="7.0000114"
+       width="1.9999955"
+       height="9.9999838"
+       id="svg_1-1-1"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
+  </g>
+  <g
+     id="g4299-3"
+     transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,19.029435,12.000001)"
+     style="stroke:none">
+    <rect
+       x="7.0000048"
+       y="10.999998"
+       width="9.9999924"
+       height="1.9999986"
+       id="svg_1-1-0"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
+    <rect
+       x="11.000005"
+       y="7.0000114"
+       width="1.9999955"
+       height="9.9999838"
+       id="svg_1-1-1-9"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
+  </g>
+  <rect
+     id="svg_1-7-5"
+     height="6.9999905"
+     width="6.9999909"
+     y="7.0000048"
+     x="55.000004"
+     style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+  <rect
+     style="fill:#ffffff;fill-opacity:1;stroke:#4c4c4c;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     x="58"
+     y="10.00001"
+     width="6.9999909"
+     height="6.9999905"
+     id="rect4354" />
+  <rect
+     id="svg_1-7-5-7"
+     height="6.9999905"
+     width="6.9999909"
+     y="10.000005"
+     x="58.000004"
+     style="fill:#ffffff;fill-opacity:1;stroke:#3c80df;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
+  <g
+     id="g4378">
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+       x="198"
+       y="10.999999"
+       width="7.9999909"
+       height="1.9999965"
+       id="svg_1-7-5-3" />
+    <rect
+       id="rect4374"
+       height="1.9999946"
+       width="11.999995"
+       y="7.0000005"
+       x="198"
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+    <rect
+       id="rect4376"
+       height="1.9999995"
+       width="3.9999928"
+       y="14.999996"
+       x="198"
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+  </g>
+  <g
+     transform="matrix(1,0,0,-1,-23.999995,23.999995)"
+     id="g4383">
+    <rect
+       id="rect4385"
+       height="1.9999965"
+       width="7.9999909"
+       y="10.999999"
+       x="198"
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+       x="198"
+       y="7.0000005"
+       width="11.999995"
+       height="1.9999946"
+       id="rect4387" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+       x="198"
+       y="14.999996"
+       width="3.9999928"
+       height="1.9999995"
+       id="rect4389" />
+  </g>
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
+     id="rect3754-4"
+     width="16"
+     height="16"
+     x="76"
+     y="3.9999199" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 85.10447,6.0157384 -0.0156,1.4063 c 3.02669,-0.2402 0.33008,3.6507996 2.48438,4.5780996 -2.18694,1.0938 0.49191,4.9069 -2.45313,4.5781 l -0.0156,1.4219 c 5.70828,0.559 1.03264,-5.1005 4.70313,-5.2656 l 0,-1.4063 c -3.61303,-0.027 1.11893,-5.7069996 -4.70313,-5.3124996 z"
+     id="path4351"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 82.78125,5.9984384 0.0156,1.4063 c -3.02668,-0.2402 -0.33007,3.6506996 -2.48437,4.5780996 2.18694,1.0938 -0.49192,4.9069 2.45312,4.5781 l 0.0156,1.4219 c -5.70827,0.559 -1.03263,-5.1004 -4.70312,-5.2656 l 0,-1.4063 c 3.61303,-0.027 -1.11894,-5.7070996 4.70312,-5.3124996 z"
+     id="path4351-9"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
+     id="rect3754-25"
+     width="16"
+     height="16"
+     x="100"
+     y="3.9999199" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:none"
+     d="m 103.719,5.6719384 0,12.7187996 3.03125,0 0,-1.5313 -1.34375,0 0,-9.6249996 1.375,0 0,-1.5625 z"
+     id="path2987"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:none"
+     d="m 112.2185,5.6721984 0,12.7187996 -3.03125,0 0,-1.5313 1.34375,0 0,-9.6249996 -1.375,0 0,-1.5625 z"
+     id="path2987-1"
+     inkscape:connector-curvature="0" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
+     id="rect3754-73"
+     width="16"
+     height="16"
+     x="124"
+     y="3.9999199" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:none"
+     d="m 126.2824,17.602938 1.78957,0 1.14143,-2.8641 5.65364,0 1.14856,2.8641 1.76565,0 -4.78687,-11.1610996 -1.91903,0 z"
+     id="path3780"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccc" />
+  <path
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
+     d="m 129.72704,13.478838 4.60852,0.01 -2.30426,-5.5497996 z"
+     id="path3782"
+     inkscape:connector-curvature="0" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
+     id="rect3754-35"
+     width="16"
+     height="16"
+     x="148"
+     y="3.9999199" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:none"
+     d="m 156.47655,5.8917384 0,2.1797 0.46093,2.3983996 1.82813,0 0.39844,-2.3983996 0,-2.1797 z"
+     id="path5008-2"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccc" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:none"
+     d="m 152.51561,5.8906384 0,2.1797 0.46094,2.3983996 1.82812,0 0.39844,-2.3983996 0,-2.1797 z"
+     id="path5008-2-8"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccc" />
+  <rect
+     id="svg_1-7-2"
+     height="1.9999961"
+     width="11.999996"
+     y="64"
+     x="54"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+     id="svg_1-7-2-2"
+     height="2.9999905"
+     width="2.9999907"
+     y="52"
+     x="80.000008"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     x="85.000008"
+     y="52"
+     width="2.9999907"
+     height="2.9999905"
+     id="rect4561" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     x="80.000008"
+     y="58"
+     width="2.9999907"
+     height="2.9999905"
+     id="rect4563" />
+  <rect
+     id="rect4565"
+     height="2.9999905"
+     width="2.9999907"
+     y="58"
+     x="85.000008"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4567"
+     height="2.9999905"
+     width="2.9999907"
+     y="64"
+     x="80.000008"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     x="85.000008"
+     y="64"
+     width="2.9999907"
+     height="2.9999905"
+     id="rect4569" />
+  <circle
+     style="opacity:1;fill:none;fill-opacity:1;stroke:#4c4c4c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     id="path4571"
+     cx="110.06081"
+     cy="57.939209"
+     r="4.7438836" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     x="116.64566"
+     y="-31.79752"
+     width="4.229713"
+     height="6.4053884"
+     id="rect4563-2"
+     transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" />
+  <path
+     style="fill:#4c4c4c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 125,56 138.77027,56.095 132,64 Z"
+     id="path4613"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+  <path
+     sodipodi:nodetypes="cccc"
+     inkscape:connector-curvature="0"
+     id="path4615"
+     d="M 149,64 162.77027,63.905 156,56 Z"
+     style="fill:#4c4c4c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     x="54"
+     y="53"
+     width="11.999996"
+     height="1.9999961"
+     id="rect4638" />
+  <rect
+     id="svg_1-7-2-24"
+     height="1.9999957"
+     width="12.99999"
+     y="-56"
+     x="53"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     transform="matrix(0,1,-1,0,0,0)" />
+  <rect
+     transform="matrix(0,1,-1,0,0,0)"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     x="53"
+     y="-66"
+     width="12.99999"
+     height="1.9999957"
+     id="rect4657" />
+  <rect
+     id="rect4659"
+     height="0.99999291"
+     width="11.999999"
+     y="57"
+     x="54"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     x="54"
+     y="88.000122"
+     width="11.999996"
+     height="1.9999961"
+     id="rect4661" />
+  <rect
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     x="80.000008"
+     y="76.000122"
+     width="2.9999907"
+     height="2.9999905"
+     id="rect4663" />
+  <rect
+     id="rect4665"
+     height="2.9999905"
+     width="2.9999907"
+     y="76.000122"
+     x="85.000008"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
+  <rect
+     id="rect4667"
+     height="2.9999905"
+     width="2.9999907"
+     y="82.000122"
+     x="80.000008"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
+  <rect
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     x="85.000008"
+     y="82.000122"
+     width="2.9999907"
+     height="2.9999905"
+     id="rect4669" />
+  <rect
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     x="80.000008"
+     y="88.000122"
+     width="2.9999907"
+     height="2.9999905"
+     id="rect4671" />
+  <rect
+     id="rect4673"
+     height="2.9999905"
+     width="2.9999907"
+     y="88.000122"
+     x="85.000008"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
+  <circle
+     r="4.7438836"
+     cy="81.939331"
+     cx="110.06081"
+     id="circle4675"
+     style="opacity:1;fill:none;fill-opacity:1;stroke:#d3d3d3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
+     id="rect4677"
+     height="6.4053884"
+     width="4.229713"
+     y="-14.826816"
+     x="133.6163"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:#d3d3d3;stroke-width:0;stroke-opacity:1" />
+  <path
+     sodipodi:nodetypes="cccc"
+     inkscape:connector-curvature="0"
+     id="path4679"
+     d="m 125,80.000005 13.77027,0.09499 L 132,87.999992 Z"
+     style="fill:#d3d3d3;fill-opacity:1;fill-rule:evenodd;stroke:#d3d3d3;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#d3d3d3;fill-opacity:1;fill-rule:evenodd;stroke:#d3d3d3;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 149,88.0002 162.77027,87.9052 156,80.0002 Z"
+     id="path4681"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+  <rect
+     id="rect4683"
+     height="1.9999961"
+     width="11.999996"
+     y="77.000122"
+     x="54"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
+  <rect
+     transform="matrix(0,1,-1,0,0,0)"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     x="77.000122"
+     y="-56"
+     width="12.99999"
+     height="1.9999957"
+     id="rect4685" />
+  <rect
+     id="rect4687"
+     height="1.9999957"
+     width="12.99999"
+     y="-66"
+     x="77.000122"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     transform="matrix(0,1,-1,0,0,0)" />
+  <rect
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     x="54"
+     y="81.000122"
+     width="11.999999"
+     height="0.99999291"
+     id="rect4689" />
+  <rect
+     id="rect4761-1"
+     height="1.9999945"
+     width="15.99999"
+     y="101"
+     x="76.000008"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4761-0"
+     height="1.9999945"
+     width="15.99999"
+     y="105"
+     x="76.000008"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4761-7"
+     height="1.9999945"
+     width="9"
+     y="109"
+     x="76.000008"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4761-1-1"
+     height="1.9999945"
+     width="12"
+     y="125"
+     x="76.000008"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4761-1-1-4"
+     height="1.9999945"
+     width="10"
+     y="137"
+     x="76.000008"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4761-1-1-4-4"
+     height="1.9999945"
+     width="10"
+     y="129"
+     x="82"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4761-1-1-4-4-3"
+     height="1.9999945"
+     width="9"
+     y="133"
+     x="82"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <path
+     inkscape:connector-curvature="0"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="m 36.398438,100.0254 c -0.423362,-0.013 -0.846847,0.01 -1.265626,0.062 -1.656562,0.2196 -3.244567,0.9739 -4.507812,2.2266 L 29,100.5991 l -2.324219,7.7129 7.826172,-1.9062 -1.804687,-1.9063 c 1.597702,-1.5308 4.048706,-1.8453 5.984375,-0.7207 1.971162,1.1452 2.881954,3.3975 2.308593,5.5508 -0.573361,2.1533 -2.533865,3.6953 -4.830078,3.6953 l 0,3.0742 c 3.550756,0 6.710442,-2.4113 7.650391,-5.9414 0.939949,-3.5301 -0.618463,-7.2736 -3.710938,-9.0703 -1.159678,-0.6738 -2.431087,-1.0231 -3.701171,-1.0625 z"
+     id="path4138" />
+  <path
+     inkscape:connector-curvature="0"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="m 59.722656,99.9629 c -1.270084,0.039 -2.541493,0.3887 -3.701172,1.0625 -3.092475,1.7967 -4.650886,5.5402 -3.710937,9.0703 0.939949,3.5301 4.09768,5.9414 7.648437,5.9414 l 0,-3.0742 c -2.296214,0 -4.256717,-1.542 -4.830078,-3.6953 -0.573361,-2.1533 0.337432,-4.4056 2.308594,-5.5508 1.935731,-1.1246 4.38863,-0.8102 5.986326,0.7207 l -1.806638,1.9063 7.828128,1.9062 -2.32422,-7.7129 -1.62696,1.7168 c -1.26338,-1.2531 -2.848917,-2.0088 -4.505855,-2.2285 -0.418778,-0.055 -0.842263,-0.076 -1.265625,-0.062 z"
+     id="path4138-1" />
+  <path
+     inkscape:connector-curvature="0"
+     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
+     d="m 10.5,100 0,2 -2.4999996,0 L 12,107 l 4,-5 -2.5,0 0,-2 -3,0 z"
+     id="path3055-0-77" />
+  <path
+     style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.96599996;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 4.9850574,108.015 14.0298856,-0.03"
+     id="path5244-5-0-5"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cc" />
+  <path
+     style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.96599996;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 4.9849874,132.015 14.0298866,-0.03"
+     id="path5244-5-0-5-8"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cc" />
+  <path
+     inkscape:connector-curvature="0"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.4;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="m 36.398438,123.9629 c -0.423362,-0.013 -0.846847,0.01 -1.265626,0.062 -1.656562,0.2196 -3.244567,0.9739 -4.507812,2.2266 L 29,124.5366 l -2.324219,7.7129 7.826172,-1.9062 -1.804687,-1.9063 c 1.597702,-1.5308 4.048706,-1.8453 5.984375,-0.7207 1.971162,1.1453 2.881954,3.3975 2.308593,5.5508 -0.573361,2.1533 -2.533864,3.6953 -4.830078,3.6953 l 0,3.0742 c 3.550757,0 6.710442,-2.4093 7.650391,-5.9394 0.939949,-3.5301 -0.618463,-7.2756 -3.710938,-9.0723 -1.159678,-0.6737 -2.431087,-1.0231 -3.701171,-1.0625 z"
+     id="path4138-12" />
+  <path
+     inkscape:connector-curvature="0"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.4;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="m 59.722656,123.9629 c -1.270084,0.039 -2.541493,0.3888 -3.701172,1.0625 -3.092475,1.7967 -4.650886,5.5422 -3.710937,9.0723 0.939949,3.5301 4.09768,5.9394 7.648437,5.9394 l 0,-3.0742 c -2.296214,0 -4.256717,-1.542 -4.830078,-3.6953 -0.573361,-2.1533 0.337432,-4.4055 2.308594,-5.5508 1.935731,-1.1246 4.38863,-0.8102 5.986326,0.7207 l -1.806638,1.9063 7.828128,1.9062 -2.32422,-7.7129 -1.62696,1.7168 c -1.26338,-1.2531 -2.848917,-2.0088 -4.505855,-2.2285 -0.418778,-0.055 -0.842263,-0.076 -1.265625,-0.062 z"
+     id="path4138-1-3" />
+  <path
+     id="path6191"
+     d="m 10.5,116 0,-2 -2.4999996,0 L 12,109 l 4,5 -2.5,0 0,2 -3,0 z"
+     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
+     inkscape:connector-curvature="0" />
+  <path
+     inkscape:connector-curvature="0"
+     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
+     d="m 10.5,129 0,-2 -2.4999996,0 L 12,122 l 4,5 -2.5,0 0,2 -3,0 z"
+     id="path6193" />
+  <path
+     id="path6195"
+     d="m 10.5,135 0,2 -2.4999996,0 L 12,142 l 4,-5 -2.5,0 0,-2 -3,0 z"
+     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
+     inkscape:connector-curvature="0" />
+  <path
+     sodipodi:type="star"
+     style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     id="path4500"
+     sodipodi:sides="3"
+     sodipodi:cx="11.55581"
+     sodipodi:cy="60.073242"
+     sodipodi:r1="5.1116104"
+     sodipodi:r2="2.5558052"
+     sodipodi:arg1="0"
+     sodipodi:arg2="1.0471976"
+     inkscape:flatsided="false"
+     inkscape:rounded="0"
+     inkscape:randomized="0"
+     d="m 16.66742,60.073242 -3.833708,2.213392 -3.8337072,2.213393 0,-4.426785 0,-4.426784 3.8337082,2.213392 z"
+     inkscape:transform-center-x="-1.2779026" />
+  <path
+     inkscape:transform-center-x="1.277902"
+     d="m -31.500004,60.073242 -3.833708,2.213392 -3.833707,2.213393 0,-4.426785 0,-4.426784 3.833707,2.213392 z"
+     inkscape:randomized="0"
+     inkscape:rounded="0"
+     inkscape:flatsided="false"
+     sodipodi:arg2="1.0471976"
+     sodipodi:arg1="0"
+     sodipodi:r2="2.5558052"
+     sodipodi:r1="5.1116104"
+     sodipodi:cy="60.073242"
+     sodipodi:cx="-36.611614"
+     sodipodi:sides="3"
+     id="path4502"
+     style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     sodipodi:type="star"
+     transform="scale(-1,1)" />
+  <path
+     d="m 16.66742,60.073212 -3.833708,2.213392 -3.8337072,2.213392 0,-4.426784 0,-4.426785 3.8337082,2.213392 z"
+     inkscape:randomized="0"
+     inkscape:rounded="0"
+     inkscape:flatsided="false"
+     sodipodi:arg2="1.0471976"
+     sodipodi:arg1="0"
+     sodipodi:r2="2.5558052"
+     sodipodi:r1="5.1116104"
+     sodipodi:cy="60.073212"
+     sodipodi:cx="11.55581"
+     sodipodi:sides="3"
+     id="path4504"
+     style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     sodipodi:type="star"
+     transform="matrix(0,1,-1,0,72.0074,71.7877)"
+     inkscape:transform-center-y="1.2779029" />
+  <path
+     inkscape:transform-center-y="-1.2779026"
+     transform="matrix(0,-1,-1,0,96,96)"
+     sodipodi:type="star"
+     style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     id="path4506"
+     sodipodi:sides="3"
+     sodipodi:cx="11.55581"
+     sodipodi:cy="60.073212"
+     sodipodi:r1="5.1116104"
+     sodipodi:r2="2.5558052"
+     sodipodi:arg1="0"
+     sodipodi:arg2="1.0471976"
+     inkscape:flatsided="false"
+     inkscape:rounded="0"
+     inkscape:randomized="0"
+     d="m 16.66742,60.073212 -3.833708,2.213392 -3.8337072,2.213392 0,-4.426784 0,-4.426785 3.8337082,2.213392 z" />
+  <path
+     sodipodi:nodetypes="cccc"
+     inkscape:connector-curvature="0"
+     id="path4615-5"
+     d="m 171.82574,65.174193 16.34854,0 -8.17427,-13.348454 z"
+     style="fill:#fbb917;fill-opacity:1;fill-rule:evenodd;stroke:#fbb917;stroke-width:1.65161395;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 179,55 0,6 2,0 0,-6"
+     id="path4300"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+  <path
+     style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 179,62 0,2 2,0 0,-2"
+     id="path4300-6"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+  <path
+     style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:0.8"
+     d="M 99.994369,113.0221 102,114.98353 l 7,-6.9558 3,0.97227 2,-1 1,-2 0,-3 -3,3 -3,-3 3,-3 -3,0 -2,1 -1,2 0.99437,3.0221 z"
+     id="path4268"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccc" />
+  <rect
+     id="rect4175-3-5"
+     height="16"
+     width="16"
+     y="4"
+     x="220"
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
+  <path
+     style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 234,6 0,2 -5,5 0,5 -2,0 0,-5 -5,-5 0,-2"
+     id="path3546"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+  <g
+     transform="matrix(1.3333328,0,0,-1.5999992,-139.9999,127.19999)"
+     id="g4383-6">
+    <rect
+       id="rect4385-2"
+       height="1.2499905"
+       width="5.9999924"
+       y="12.625005"
+       x="198.00002"
+       style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0" />
+    <rect
+       style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
+       x="198.00002"
+       y="15.125007"
+       width="7.4999928"
+       height="1.2499949"
+       id="rect4387-9" />
+    <rect
+       style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
+       x="198.00002"
+       y="7.6250024"
+       width="2.9999909"
+       height="1.2499905"
+       id="rect4389-1-0" />
+    <rect
+       style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
+       x="198.00002"
+       y="10.125004"
+       width="4.4999919"
+       height="1.2499905"
+       id="rect4389-1-9" />
+    <path
+       style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:none;stroke-width:0.68465352px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 207.00001,16.375004 0,-5.625005 -2.25,0 3,-3.1250014 3,3.1250014 -2.25,0 0,5.625005 -1.5,0"
+       id="path4402"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+  <path
+     style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 164,100 0,3 -6,6 0,7 -4,0 0,-7 -6,-6 0,-3"
+     id="path3546-2-2"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
+     id="svg_1-3"
+     height="16"
+     width="16"
+     y="28"
+     x="4" />
+  <path
+     sodipodi:nodetypes="ccccccccc"
+     inkscape:connector-curvature="0"
+     id="path4402-5-7"
+     d="m 15,41 0,-7 -4,0 0,3 -5,-4 5,-4 0,3 6,0 0,9"
+     style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.68465352px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+</svg>
diff --git a/demo/gdml/src/jsMain/web/index.html b/demo/gdml/src/jsMain/web/index.html
new file mode 100644
index 00000000..3b2a99b2
--- /dev/null
+++ b/demo/gdml/src/jsMain/web/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <!--    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
+    <title>Three js demo for particle physics</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/jsoneditor.min.css">
+    <script type="text/javascript" src="main.bundle.js"></script>
+</head>
+<body class="testApp">
+<div class="container" id="drop_zone" data-toggle="tooltip" data-placement="right"
+     title="Для загрузки данных в текстовом формате, надо перетащить файл сюда">
+    Загрузить данные
+    <br/>
+    (перетащить файл сюда)
+</div>
+<div class="container">
+    <h1>GDML demo</h1>
+</div>
+<!--<div class="container loader" id="loader" style="display:none;"></div>-->
+<div class="container animate-bottom" id="messages"></div>
+
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-lg-3" id="tree"></div>
+        <div class="col-lg-6">
+            <div class="row" id="layers"></div>
+            <div class="row container" id="canvas"></div>
+        </div>
+        <div class="col-lg-3" id="editor"></div>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/demo/gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt b/demo/gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
new file mode 100644
index 00000000..b4a75c37
--- /dev/null
+++ b/demo/gdml/src/jvmMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
@@ -0,0 +1,79 @@
+package hep.dataforge.vis.spatial.gdml.demo
+
+import hep.dataforge.context.Global
+import hep.dataforge.vis.fx.editor.VisualObjectEditorFragment
+import hep.dataforge.vis.fx.editor.VisualObjectTreeFragment
+import hep.dataforge.vis.spatial.Material3D
+import hep.dataforge.vis.spatial.fx.FX3DPlugin
+import hep.dataforge.vis.spatial.fx.FXCanvas3D
+import hep.dataforge.vis.spatial.gdml.LUnit
+import hep.dataforge.vis.spatial.gdml.readFile
+import hep.dataforge.vis.spatial.gdml.toVisual
+import javafx.geometry.Orientation
+import javafx.scene.Parent
+import javafx.stage.FileChooser
+import scientifik.gdml.GDML
+import tornadofx.*
+
+class GDMLDemoApp : App(GDMLView::class)
+
+class GDMLView : View() {
+    private val fx3d = Global.plugins.fetch(FX3DPlugin)
+    private val canvas = FXCanvas3D(fx3d)
+
+    private val treeFragment = VisualObjectTreeFragment().apply {
+        this.itemProperty.bind(canvas.rootObjectProperty)
+    }
+
+    private val propertyEditor = VisualObjectEditorFragment {
+        it.allProperties()
+    }.apply {
+        descriptorProperty.set(Material3D.descriptor)
+        itemProperty.bind(treeFragment.selectedProperty)
+    }
+
+
+    override val root: Parent = borderpane {
+        top {
+            buttonbar {
+                button("Load GDML") {
+                    action {
+                        val file = chooseFile("Select a GDML file", filters = gdmlFilter).firstOrNull()
+                        if (file != null) {
+                            val obj = GDML.readFile(file.toPath()).toVisual {
+                                lUnit = LUnit.CM
+
+                                solidConfiguration = { parent, solid ->
+                                    if (solid.name == "cave") {
+                                        setProperty(Material3D.MATERIAL_WIREFRAME_KEY, true)
+                                    }
+                                    if (parent.physVolumes.isNotEmpty()) {
+                                        useStyle("opaque") {
+                                            Material3D.MATERIAL_OPACITY_KEY put 0.3
+                                        }
+                                    }
+                                }
+                            }
+                            canvas.render(obj)
+                        }
+                    }
+                }
+            }
+        }
+        center {
+            splitpane(Orientation.HORIZONTAL, treeFragment.root, canvas.root, propertyEditor.root) {
+                setDividerPositions(0.2, 0.6, 0.2)
+            }
+        }
+    }
+
+    companion object {
+        private val gdmlFilter = arrayOf(
+            FileChooser.ExtensionFilter("GDML", "*.gdml", "*.xml")
+        )
+    }
+}
+
+fun main() {
+    launch<GDMLDemoApp>()
+}
\ No newline at end of file
diff --git a/demo/muon-monitor/build.gradle.kts b/demo/muon-monitor/build.gradle.kts
new file mode 100644
index 00000000..48b34d0b
--- /dev/null
+++ b/demo/muon-monitor/build.gradle.kts
@@ -0,0 +1,69 @@
+import scientifik.useSerialization
+
+plugins {
+    id("scientifik.mpp")
+    //id("org.openjfx.javafxplugin")
+    id("application")
+}
+
+group = "ru.mipt.npm"
+
+useSerialization()
+
+val ktor_version = "1.3.0-rc"
+
+kotlin {
+
+    js {
+        browser {
+            webpackTask {
+                sourceMaps = true
+            }
+        }
+    }
+
+    val installJS = tasks.getByName<Copy>("installJsDist")
+
+    jvm {
+        withJava()
+        compilations.findByName("main").apply {
+            tasks.getByName<ProcessResources>("jvmProcessResources") {
+                dependsOn(installJS)
+                afterEvaluate {
+                    from(installJS.destinationDir)
+                }
+            }
+        }
+    }
+
+    sourceSets {
+        commonMain {
+            dependencies {
+                implementation(project(":dataforge-vis-spatial"))
+            }
+        }
+        jvmMain {
+            dependencies {
+                implementation("org.apache.commons:commons-math3:3.6.1")
+                implementation("io.ktor:ktor-server-cio:$ktor_version")
+                implementation("io.ktor:ktor-serialization:$ktor_version")
+            }
+        }
+        jsMain{
+            dependencies{
+                implementation("io.ktor:ktor-client-js:$ktor_version")
+                implementation("io.ktor:ktor-client-serialization-js:$ktor_version")
+                implementation(npm("text-encoding"))
+                implementation(npm("abort-controller"))
+            }
+        }
+    }
+}
+
+application {
+    mainClassName = "ru.mipt.npm.muon.monitor.server/MMServerKt"
+}
+
+//configure<JavaFXOptions> {
+//    modules("javafx.controls")
+//}
\ No newline at end of file
diff --git a/demo/muon-monitor/src/commonMain/kotlin/ru/mipt/npm/muon/monitor/Event.kt b/demo/muon-monitor/src/commonMain/kotlin/ru/mipt/npm/muon/monitor/Event.kt
new file mode 100644
index 00000000..5eddd7a4
--- /dev/null
+++ b/demo/muon-monitor/src/commonMain/kotlin/ru/mipt/npm/muon/monitor/Event.kt
@@ -0,0 +1,20 @@
+@file:UseSerializers(Point3DSerializer::class)
+package ru.mipt.npm.muon.monitor
+
+import hep.dataforge.vis.spatial.Point3D
+import hep.dataforge.vis.spatial.Point3DSerializer
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.UseSerializers
+
+typealias Track = List<Point3D>
+
+/**
+ *
+ */
+@Serializable
+data class Event(val id: Int, val track: Track?, val hits: Collection<String>) {
+//    /**
+//     * The unique identity for given set of hits. One identity could correspond to different tracks
+//     */
+//    val id get() = hits.sorted().joinToString(separator = ", ", prefix = "[", postfix = "]")
+}
\ No newline at end of file
diff --git a/demo/muon-monitor/src/commonMain/kotlin/ru/mipt/npm/muon/monitor/Model.kt b/demo/muon-monitor/src/commonMain/kotlin/ru/mipt/npm/muon/monitor/Model.kt
new file mode 100644
index 00000000..e2d6afb0
--- /dev/null
+++ b/demo/muon-monitor/src/commonMain/kotlin/ru/mipt/npm/muon/monitor/Model.kt
@@ -0,0 +1,85 @@
+package ru.mipt.npm.muon.monitor
+
+import hep.dataforge.vis.common.removeAll
+import hep.dataforge.vis.spatial.*
+import ru.mipt.npm.muon.monitor.Monitor.CENTRAL_LAYER_Z
+import ru.mipt.npm.muon.monitor.Monitor.LOWER_LAYER_Z
+import ru.mipt.npm.muon.monitor.Monitor.UPPER_LAYER_Z
+import kotlin.math.PI
+
+class Model {
+    private val map = HashMap<String, VisualGroup3D>()
+    private val events = HashSet<Event>()
+
+    private fun VisualGroup3D.pixel(pixel: SC1) {
+        val group = group(pixel.name) {
+            position = Point3D(pixel.center.x, pixel.center.y, pixel.center.z)
+            box(pixel.xSize, pixel.ySize, pixel.zSize)
+            label(pixel.name) {
+                z = - Monitor.PIXEL_Z_SIZE / 2 - 5
+                rotationY = PI
+            }
+        }
+        map[pixel.name] = group
+    }
+
+    private fun VisualGroup3D.detector(detector: SC16) {
+        group(detector.name) {
+            detector.pixels.forEach {
+                pixel(it)
+            }
+        }
+    }
+
+    var tracks: VisualGroup3D
+
+    val root: VisualGroup3D = VisualGroup3D().apply {
+        rotationX = PI / 2
+        group("bottom") {
+            Monitor.detectors.filter { it.center.z == LOWER_LAYER_Z }.forEach {
+                detector(it)
+            }
+        }
+
+        group("middle") {
+            Monitor.detectors.filter { it.center.z == CENTRAL_LAYER_Z }.forEach {
+                detector(it)
+            }
+        }
+
+        group("top") {
+            Monitor.detectors.filter { it.center.z == UPPER_LAYER_Z }.forEach {
+                detector(it)
+            }
+        }
+
+        tracks = group("tracks")
+    }
+
+    private fun highlight(pixel: String) {
+        map[pixel]?.color("blue")
+    }
+
+    fun reset() {
+        map.values.forEach {
+            it.setProperty(Material3D.MATERIAL_COLOR_KEY, null)
+        }
+        tracks.removeAll()
+    }
+
+    fun displayEvent(event: Event) {
+        events.add(event)
+        event.hits.forEach {
+            highlight(it)
+        }
+        event.track?.let {
+            tracks.polyline(*it.toTypedArray(), name = "track[${event.id}]"){
+                thickness = 4
+            }
+        }
+    }
+
+    companion object {
+        fun buildGeometry() = Model().root
+    }
+}
\ No newline at end of file
diff --git a/demo/muon-monitor/src/commonMain/kotlin/ru/mipt/npm/muon/monitor/Monitor.kt b/demo/muon-monitor/src/commonMain/kotlin/ru/mipt/npm/muon/monitor/Monitor.kt
new file mode 100644
index 00000000..161854a8
--- /dev/null
+++ b/demo/muon-monitor/src/commonMain/kotlin/ru/mipt/npm/muon/monitor/Monitor.kt
@@ -0,0 +1,153 @@
+package ru.mipt.npm.muon.monitor
+
+import hep.dataforge.vis.spatial.Point3D
+import hep.dataforge.vis.spatial.plus
+import ru.mipt.npm.muon.monitor.Monitor.PIXEL_XY_SIZE
+import ru.mipt.npm.muon.monitor.Monitor.PIXEL_Z_SIZE
+
+/**
+ * A single pixel
+ */
+open class SC1(
+    val name: String,
+    val center: Point3D,
+    val xSize: Double = PIXEL_XY_SIZE, val ySize: Double = PIXEL_XY_SIZE, val zSize: Double = PIXEL_Z_SIZE
+)
+
+class SC16(
+    val name: String,
+    val center: Point3D
+) {
+
+    /**
+     * Build map for single SC16 detector
+     */
+    val pixels: Collection<SC1> by lazy {
+        (0 until 16).map { index ->
+            val x: Double
+            val y: Double
+            when (index) {
+                7 -> {
+                    x = 1.5 * Monitor.PIXEL_XY_SPACING;
+                    y = 1.5 * Monitor.PIXEL_XY_SPACING;
+                }
+                4 -> {
+                    x = 0.5 * Monitor.PIXEL_XY_SPACING;
+                    y = 1.5 * Monitor.PIXEL_XY_SPACING;
+                }
+                6 -> {
+                    x = 1.5 * Monitor.PIXEL_XY_SPACING;
+                    y = 0.5 * Monitor.PIXEL_XY_SPACING;
+                }
+                5 -> {
+                    x = 0.5 * Monitor.PIXEL_XY_SPACING;
+                    y = 0.5 * Monitor.PIXEL_XY_SPACING;
+                }
+
+                3 -> {
+                    x = -1.5 * Monitor.PIXEL_XY_SPACING;
+                    y = 1.5 * Monitor.PIXEL_XY_SPACING;
+                }
+                0 -> {
+                    x = -0.5 * Monitor.PIXEL_XY_SPACING;
+                    y = 1.5 * Monitor.PIXEL_XY_SPACING;
+                }
+                2 -> {
+                    x = -1.5 * Monitor.PIXEL_XY_SPACING;
+                    y = 0.5 * Monitor.PIXEL_XY_SPACING;
+                }
+                1 -> {
+                    x = -0.5 * Monitor.PIXEL_XY_SPACING;
+                    y = 0.5 * Monitor.PIXEL_XY_SPACING;
+                }
+
+                11 -> {
+                    x = -1.5 * Monitor.PIXEL_XY_SPACING;
+                    y = -1.5 * Monitor.PIXEL_XY_SPACING;
+                }
+                8 -> {
+                    x = -0.5 * Monitor.PIXEL_XY_SPACING;
+                    y = -1.5 * Monitor.PIXEL_XY_SPACING;
+                }
+                10 -> {
+                    x = -1.5 * Monitor.PIXEL_XY_SPACING;
+                    y = -0.5 * Monitor.PIXEL_XY_SPACING;
+                }
+                9 -> {
+                    x = -0.5 * Monitor.PIXEL_XY_SPACING;
+                    y = -0.5 * Monitor.PIXEL_XY_SPACING;
+                }
+
+                15 -> {
+                    x = 1.5 * Monitor.PIXEL_XY_SPACING;
+                    y = -1.5 * Monitor.PIXEL_XY_SPACING;
+                }
+                12 -> {
+                    x = 0.5 * Monitor.PIXEL_XY_SPACING;
+                    y = -1.5 * Monitor.PIXEL_XY_SPACING;
+                }
+                14 -> {
+                    x = 1.5 * Monitor.PIXEL_XY_SPACING;
+                    y = -0.5 * Monitor.PIXEL_XY_SPACING;
+                }
+                13 -> {
+                    x = 0.5 * Monitor.PIXEL_XY_SPACING;
+                    y = -0.5 * Monitor.PIXEL_XY_SPACING;
+                }
+                else -> throw Error();
+            }
+            val offset = Point3D(-y, x, 0)//rotateDetector(Point3D(x, y, 0.0));
+            val pixelName = "${name}_${index}"
+            SC1(pixelName, center + offset)
+        }
+    }
+}
+
+//class Layer(val name: String, val z: Double) {
+//    val detectors: Collection<SC16> by lazy {
+//
+//    }
+//}
+
+
+expect fun readResource(path: String): String
+
+internal expect fun readMonitorConfig(): String
+
+/**
+ * General geometry definitions
+ * Created by darksnake on 09-May-16.
+ */
+object Monitor {
+
+    const val GEOMETRY_TOLERANCE = 0.01
+    const val PIXEL_XY_SIZE = 122.0
+    const val PIXEL_XY_SPACING = 123.2
+    const val PIXEL_Z_SIZE = 30.0
+    const val CENTRAL_LAYER_Z = 0.0
+    const val UPPER_LAYER_Z = -166.0
+    const val LOWER_LAYER_Z = 180.0
+
+    /**
+     * Build map for the whole monitor
+     */
+    val detectors: Collection<SC16> by lazy {
+        readMonitorConfig()
+            .lineSequence()
+            .mapNotNull { line ->
+                if (line.startsWith(" ")) {
+                    val split = line.trim().split("\\s+".toRegex())
+                    val detectorName = split[1];
+                    val x = split[4].toDouble() - 500
+                    val y = split[5].toDouble() - 500
+                    val z = 180 - split[6].toDouble()
+                    SC16(detectorName, Point3D(x, y, z))
+                } else {
+                    null
+                }
+            }.toList()
+    }
+
+    val pixels: Collection<SC1> get() = detectors.flatMap { it.pixels }
+
+}
\ No newline at end of file
diff --git a/demo/muon-monitor/src/commonMain/resources/map-RMM110.sc16 b/demo/muon-monitor/src/commonMain/resources/map-RMM110.sc16
new file mode 100644
index 00000000..6d55e7da
--- /dev/null
+++ b/demo/muon-monitor/src/commonMain/resources/map-RMM110.sc16
@@ -0,0 +1,27 @@
+--Place-|-SC16-|-TB-CHN-|-HB-CHN-|-X-coord-|-Y-coord-|-Z-coord-|-Theta-|-Phi
+----------------------------------------------------------------------------
+ RT100     SC86     3        0         0      1000         0     0      270
+ RT100     SC87     6        1         0       500         0     0      270
+ RT100     SC88     8        2         0         0         0     0      270
+ RT100     SC91     9        3       500      1000         0     0      270
+ RT100     SC92    10        4       500       500         0     0      270
+ RT100     SC93    11        5       500         0         0     0      270
+ RT100     SC94    12        6      1000      1000         0     0      270
+ RT100     SC85    13        7      1000       500         0     0      270
+ RT100     SC96    15        8      1000         0         0     0      270
+###
+ RT100     SC81    26       12       250       750       180     0      270
+ RT100     SC82    27       11       250       250       180     0      270
+ RT100     SC83    28       23       750       750       180     0      270
+ RT100     SC84    29        9       750       250       180     0      270
+###
+ RT100     SC72    80       21      1000         0       346     0      270
+ RT100     SC73    79       20      1000       500       346     0      270
+ RT100     SC74    78       19      1000      1000       346     0      270
+ RT100     SC75    77       18       500         0       346     0      270
+ RT100     SC76    84       17       500       500       346     0      270
+ RT100     SC77    75       16       500      1000       346     0      270
+ RT100     SC78    74       15         0         0       346     0      270
+ RT100     SC79    73       14         0       500       346     0      270
+ RT100     SC80    72       13         0      1000       346     0      270
+STOP
diff --git a/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt b/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt
new file mode 100644
index 00000000..a9f7dd3d
--- /dev/null
+++ b/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/MMDemoApp.kt
@@ -0,0 +1,124 @@
+package ru.mipt.npm.muon.monitor
+
+import hep.dataforge.context.Global
+import hep.dataforge.js.Application
+import hep.dataforge.js.startApplication
+import hep.dataforge.meta.buildMeta
+import hep.dataforge.meta.withBottom
+import hep.dataforge.names.Name
+import hep.dataforge.names.isEmpty
+import hep.dataforge.vis.common.VisualGroup
+import hep.dataforge.vis.common.VisualObject
+import hep.dataforge.vis.js.editor.card
+import hep.dataforge.vis.js.editor.displayObjectTree
+import hep.dataforge.vis.js.editor.displayPropertyEditor
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_COLOR_KEY
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_OPACITY_KEY
+import hep.dataforge.vis.spatial.Material3D.Companion.MATERIAL_WIREFRAME_KEY
+import hep.dataforge.vis.spatial.Visual3DPlugin
+import hep.dataforge.vis.spatial.VisualObject3D
+import hep.dataforge.vis.spatial.VisualObject3D.Companion.VISIBLE_KEY
+import hep.dataforge.vis.spatial.three.ThreePlugin
+import hep.dataforge.vis.spatial.three.displayCanvasControls
+import hep.dataforge.vis.spatial.three.output
+import hep.dataforge.vis.spatial.visible
+import io.ktor.client.HttpClient
+import io.ktor.client.features.json.JsonFeature
+import io.ktor.client.features.json.serializer.KotlinxSerializer
+import io.ktor.client.request.get
+import kotlinx.coroutines.GlobalScope
+import kotlinx.coroutines.launch
+import kotlinx.html.js.button
+import kotlinx.html.js.onClickFunction
+import org.w3c.dom.HTMLElement
+import kotlin.browser.document
+import kotlin.dom.clear
+
+private class GDMLDemoApp : Application {
+
+    private val model = Model()
+
+    private val connection = HttpClient {
+        install(JsonFeature) {
+            serializer = KotlinxSerializer(Visual3DPlugin.json)
+        }
+    }
+
+    override fun start(state: Map<String, Any>) {
+
+        val context = Global.context("demo") {}
+        val three = context.plugins.load(ThreePlugin)
+        //val url = URL("https://drive.google.com/open?id=1w5e7fILMN83JGgB8WANJUYm8OW2s0WVO")
+
+        val canvasElement = document.getElementById("canvas") ?: error("Element with id 'canvas' not found on page")
+        val settingsElement = document.getElementById("settings")
+            ?: error("Element with id 'settings' not found on page")
+        val treeElement = document.getElementById("tree") ?: error("Element with id 'tree' not found on page")
+        val editorElement = document.getElementById("editor") ?: error("Element with id 'editor' not found on page")
+
+        canvasElement.clear()
+        val visual: VisualObject3D = model.root
+
+        //output.camera.layers.enable(1)
+        val canvas = three.output(canvasElement as HTMLElement)
+
+        canvas.camera.layers.set(0)
+        canvas.camera.position.z = -2000.0
+        canvas.camera.position.y = 500.0
+        settingsElement.displayCanvasControls(canvas) {
+            card("Events") {
+                button {
+                    +"Next"
+                    onClickFunction = {
+                        GlobalScope.launch {
+                            val event = connection.get<Event>("http://localhost:8080/event")
+                            model.displayEvent(event)
+                        }
+                    }
+                }
+                button {
+                    +"Clear"
+                    onClickFunction = {
+                        model.reset()
+                    }
+                }
+            }
+        }
+
+
+        fun selectElement(name: Name) {
+            val child: VisualObject = when {
+                name.isEmpty() -> visual
+                visual is VisualGroup -> visual[name] ?: return
+                else -> return
+            }
+            editorElement.displayPropertyEditor(name, child) { item ->
+                //val descriptorMeta = Material3D.descriptor
+
+                val properties = item.allProperties()
+                val bottom = buildMeta {
+                    VISIBLE_KEY put (item.visible ?: true)
+                    if (item is VisualObject3D) {
+                        MATERIAL_COLOR_KEY put "#ffffff"
+                        MATERIAL_OPACITY_KEY put 1.0
+                        MATERIAL_WIREFRAME_KEY put false
+                    }
+                }
+                properties.withBottom(bottom)
+            }
+        }
+
+//        canvas.clickListener = ::selectElement
+
+        //tree.visualObjectTree(visual, editor::propertyEditor)
+        treeElement.displayObjectTree(visual) { name ->
+            selectElement(name)
+            canvas.highlight(name)
+        }
+        canvas.render(visual)
+    }
+}
+
+fun main() {
+    startApplication(::GDMLDemoApp)
+}
\ No newline at end of file
diff --git a/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/readResource.kt b/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/readResource.kt
new file mode 100644
index 00000000..46242a20
--- /dev/null
+++ b/demo/muon-monitor/src/jsMain/kotlin/ru/mipt/npm/muon/monitor/readResource.kt
@@ -0,0 +1,40 @@
+package ru.mipt.npm.muon.monitor
+
+import hep.dataforge.js.requireJS
+
+actual fun readResource(path: String): String {
+    return requireJS(path) as String
+}
+
+// TODO replace by resource
+internal actual fun readMonitorConfig(): String{
+    return """
+        --Place-|-SC16-|-TB-CHN-|-HB-CHN-|-X-coord-|-Y-coord-|-Z-coord-|-Theta-|-Phi
+        ----------------------------------------------------------------------------
+         RT100     SC86     3        0         0      1000         0     0      270
+         RT100     SC87     6        1         0       500         0     0      270
+         RT100     SC88     8        2         0         0         0     0      270
+         RT100     SC91     9        3       500      1000         0     0      270
+         RT100     SC92    10        4       500       500         0     0      270
+         RT100     SC93    11        5       500         0         0     0      270
+         RT100     SC94    12        6      1000      1000         0     0      270
+         RT100     SC85    13        7      1000       500         0     0      270
+         RT100     SC96    15        8      1000         0         0     0      270
+        ###
+         RT100     SC81    26       12       250       750       180     0      270
+         RT100     SC82    27       11       250       250       180     0      270
+         RT100     SC83    28       23       750       750       180     0      270
+         RT100     SC84    29        9       750       250       180     0      270
+        ###
+         RT100     SC72    80       21      1000         0       346     0      270
+         RT100     SC73    79       20      1000       500       346     0      270
+         RT100     SC74    78       19      1000      1000       346     0      270
+         RT100     SC75    77       18       500         0       346     0      270
+         RT100     SC76    84       17       500       500       346     0      270
+         RT100     SC77    75       16       500      1000       346     0      270
+         RT100     SC78    74       15         0         0       346     0      270
+         RT100     SC79    73       14         0       500       346     0      270
+         RT100     SC80    72       13         0      1000       346     0      270
+        STOP
+    """.trimIndent()
+}
\ No newline at end of file
diff --git a/demo/muon-monitor/src/jsMain/web/css/jsoneditor.min.css b/demo/muon-monitor/src/jsMain/web/css/jsoneditor.min.css
new file mode 100644
index 00000000..63190af9
--- /dev/null
+++ b/demo/muon-monitor/src/jsMain/web/css/jsoneditor.min.css
@@ -0,0 +1,6 @@
+.jsoneditor .search input{height:auto;border:inherit;border:none;box-shadow:none}.jsoneditor table{border-collapse:collapse;width:auto}.jsoneditor td,.jsoneditor th{padding:0;display:table-cell;text-align:left;vertical-align:inherit;border-radius:inherit}.jsoneditor{color:#1a1a1a;border:thin solid #3883fa;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;position:relative;padding:0;line-height:100%}div.jsoneditor-default,div.jsoneditor-field,div.jsoneditor-readonly,div.jsoneditor-value{border:1px solid transparent;min-height:16px;min-width:32px;padding:2px;margin:1px;word-wrap:break-word;float:left}div.jsoneditor-field p,div.jsoneditor-value p{margin:0}div.jsoneditor-value{word-break:break-word}div.jsoneditor-value.jsoneditor-empty::after{content:"value"}div.jsoneditor-value.jsoneditor-string{color:#006000}div.jsoneditor-value.jsoneditor-number{color:#ee422e}div.jsoneditor-value.jsoneditor-boolean{color:#ff8c00}div.jsoneditor-value.jsoneditor-null{color:#004ed0}div.jsoneditor-value.jsoneditor-invalid{color:#000}div.jsoneditor-readonly{min-width:16px;color:grey}div.jsoneditor-empty{border-color:#d3d3d3;border-style:dashed;border-radius:2px}div.jsoneditor-field.jsoneditor-empty::after{content:"field"}div.jsoneditor td{vertical-align:top}div.jsoneditor td.jsoneditor-separator{padding:3px 0;vertical-align:top;color:grey}div.jsoneditor td.jsoneditor-tree{vertical-align:top}div.jsoneditor div.jsoneditor-anchor{cursor:pointer}div.jsoneditor div.jsoneditor-anchor .picker_wrapper.popup.popup_bottom{top:28px;left:-10px}div.jsoneditor.busy pre.jsoneditor-preview{background:#f5f5f5;color:grey}div.jsoneditor.busy div.jsoneditor-busy{display:inherit}div.jsoneditor code.jsoneditor-preview{background:0 0}div.jsoneditor.jsoneditor-mode-preview pre.jsoneditor-preview{width:100%;height:100%;box-sizing:border-box;overflow:auto;padding:2px;margin:0;white-space:pre-wrap;word-break:break-all}div.jsoneditor-default{color:grey;padding-left:10px}div.jsoneditor-tree{width:100%;height:100%;position:relative;overflow:auto}div.jsoneditor-tree button.jsoneditor-button{width:24px;height:24px;padding:0;margin:0;border:none;cursor:pointer;background:transparent url(../img/jsoneditor-icons.svg)}div.jsoneditor-tree button.jsoneditor-button:focus{background-color:#f5f5f5;outline:#e5e5e5 solid 1px}div.jsoneditor-tree button.jsoneditor-collapsed{background-position:0 -48px}div.jsoneditor-tree button.jsoneditor-expanded{background-position:0 -72px}div.jsoneditor-tree button.jsoneditor-contextmenu{background-position:-48px -72px}div.jsoneditor-tree button.jsoneditor-invisible{visibility:hidden;background:0 0}div.jsoneditor-tree button.jsoneditor-dragarea{background:url(../img/jsoneditor-icons.svg) -72px -72px;cursor:move}div.jsoneditor-tree :focus{outline:0}div.jsoneditor-tree div.jsoneditor-show-more{display:inline-block;padding:3px 4px;margin:2px 0;background-color:#e5e5e5;border-radius:3px;color:grey;font-family:arial,sans-serif;font-size:10pt}div.jsoneditor-tree div.jsoneditor-show-more a{display:inline-block;color:grey}div.jsoneditor-tree div.jsoneditor-color{display:inline-block;width:12px;height:12px;margin:4px;border:1px solid grey;cursor:pointer}div.jsoneditor-tree div.jsoneditor-date{background:#a1a1a1;color:#fff;font-family:arial,sans-serif;border-radius:3px;display:inline-block;padding:3px;margin:0 3px}div.jsoneditor-tree table.jsoneditor-tree{border-collapse:collapse;border-spacing:0;width:100%}div.jsoneditor-tree .jsoneditor-button.jsoneditor-schema-error{width:24px;height:24px;padding:0;margin:0 4px 0 0;background:url(../img/jsoneditor-icons.svg) -168px -48px}div.jsoneditor-outer{position:static;width:100%;height:100%;margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}div.jsoneditor-outer.has-nav-bar{margin-top:-26px;padding-top:26px}div.jsoneditor-outer.has-nav-bar.has-main-menu-bar{margin-top:-61px;padding-top:61px}div.jsoneditor-outer.has-status-bar{margin-bottom:-26px;padding-bottom:26px}div.jsoneditor-outer.has-main-menu-bar{margin-top:-35px;padding-top:35px}div.jsoneditor-busy{position:absolute;top:15%;left:0;box-sizing:border-box;width:100%;text-align:center;display:none}div.jsoneditor-busy span{background-color:#ffffab;border:1px solid #fe0;border-radius:3px;padding:5px 15px;box-shadow:0 0 5px rgba(0,0,0,.4)}div.jsoneditor-field.jsoneditor-empty::after,div.jsoneditor-value.jsoneditor-empty::after{pointer-events:none;color:#d3d3d3;font-size:8pt}a.jsoneditor-value.jsoneditor-url,div.jsoneditor-value.jsoneditor-url{color:#006000;text-decoration:underline}a.jsoneditor-value.jsoneditor-url{display:inline-block;padding:2px;margin:2px}a.jsoneditor-value.jsoneditor-url:focus,a.jsoneditor-value.jsoneditor-url:hover{color:#ee422e}div.jsoneditor-field.jsoneditor-highlight,div.jsoneditor-field[contenteditable=true]:focus,div.jsoneditor-field[contenteditable=true]:hover,div.jsoneditor-value.jsoneditor-highlight,div.jsoneditor-value[contenteditable=true]:focus,div.jsoneditor-value[contenteditable=true]:hover{background-color:#ffffab;border:1px solid #fe0;border-radius:2px}div.jsoneditor-field.jsoneditor-highlight-active,div.jsoneditor-field.jsoneditor-highlight-active:focus,div.jsoneditor-field.jsoneditor-highlight-active:hover,div.jsoneditor-value.jsoneditor-highlight-active,div.jsoneditor-value.jsoneditor-highlight-active:focus,div.jsoneditor-value.jsoneditor-highlight-active:hover{background-color:#fe0;border:1px solid #ffc700;border-radius:2px}div.jsoneditor-value.jsoneditor-array,div.jsoneditor-value.jsoneditor-object{min-width:16px}div.jsoneditor-mode-form tr.jsoneditor-expandable td.jsoneditor-tree,div.jsoneditor-mode-view tr.jsoneditor-expandable td.jsoneditor-tree{cursor:pointer}div.jsoneditor-tree button.jsoneditor-contextmenu.jsoneditor-selected,div.jsoneditor-tree button.jsoneditor-contextmenu:focus,div.jsoneditor-tree button.jsoneditor-contextmenu:hover,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu{background-position:-48px -48px}div.jsoneditor-tree div.jsoneditor-show-more a:focus,div.jsoneditor-tree div.jsoneditor-show-more a:hover{color:#ee422e}.ace-jsoneditor,textarea.jsoneditor-text{min-height:150px}textarea.jsoneditor-text{width:100%;height:100%;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;outline-width:0;border:none;background-color:#fff;resize:none}tr.jsoneditor-highlight,tr.jsoneditor-selected{background-color:#d3d3d3}tr.jsoneditor-selected button.jsoneditor-contextmenu,tr.jsoneditor-selected button.jsoneditor-dragarea{visibility:hidden}tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea{visibility:visible}div.jsoneditor-tree button.jsoneditor-dragarea:focus,div.jsoneditor-tree button.jsoneditor-dragarea:hover,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea{background-position:-72px -48px}div.jsoneditor td,div.jsoneditor th,div.jsoneditor tr{padding:0;margin:0}.jsoneditor-popover,.jsoneditor-schema-error,div.jsoneditor td,div.jsoneditor textarea,div.jsoneditor th,div.jsoneditor-field,div.jsoneditor-value,pre.jsoneditor-preview{font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt;color:#1a1a1a}.jsoneditor-schema-error{cursor:default;display:inline-block;height:24px;line-height:24px;position:relative;text-align:center;width:24px}.jsoneditor-popover{background-color:#4c4c4c;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.4);color:#fff;padding:7px 10px;position:absolute;cursor:auto;width:200px;z-index:999}.jsoneditor-popover.jsoneditor-above{bottom:32px;left:-98px}.jsoneditor-popover.jsoneditor-above:before{border-top:7px solid #4c4c4c;bottom:-7px}.jsoneditor-popover.jsoneditor-below{top:32px;left:-98px}.jsoneditor-popover.jsoneditor-below:before{border-bottom:7px solid #4c4c4c;top:-7px}.jsoneditor-popover.jsoneditor-left{top:-7px;right:32px}.jsoneditor-popover.jsoneditor-left:before{border-left:7px solid #4c4c4c;border-top:7px solid transparent;border-bottom:7px solid transparent;content:"";top:19px;right:-14px;left:inherit;margin-left:inherit;margin-top:-7px;position:absolute}.jsoneditor-popover.jsoneditor-right{top:-7px;left:32px}.jsoneditor-popover.jsoneditor-right:before{border-right:7px solid #4c4c4c;border-top:7px solid transparent;border-bottom:7px solid transparent;content:"";top:19px;left:-14px;margin-left:inherit;margin-top:-7px;position:absolute}.jsoneditor-popover:before{border-right:7px solid transparent;border-left:7px solid transparent;content:"";display:block;left:50%;margin-left:-7px;position:absolute}.jsoneditor-text-errors tr.jump-to-line:hover{text-decoration:underline;cursor:pointer}.jsoneditor-schema-error:focus .jsoneditor-popover,.jsoneditor-schema-error:hover .jsoneditor-popover{display:block;animation:fade-in .3s linear 1,move-up .3s linear 1}@keyframes fade-in{from{opacity:0}to{opacity:1}}.jsoneditor .jsoneditor-validation-errors-container{max-height:130px;overflow-y:auto}.jsoneditor .jsoneditor-validation-errors{width:100%;overflow:hidden}.jsoneditor .jsoneditor-additional-errors{position:absolute;margin:auto;bottom:31px;left:calc(50% - 92px);color:grey;background-color:#ebebeb;padding:7px 15px;border-radius:8px}.jsoneditor .jsoneditor-additional-errors.visible{visibility:visible;opacity:1;transition:opacity 2s linear}.jsoneditor .jsoneditor-additional-errors.hidden{visibility:hidden;opacity:0;transition:visibility 0s 2s,opacity 2s linear}.jsoneditor .jsoneditor-text-errors{width:100%;border-collapse:collapse;border-top:1px solid #ffc700}.jsoneditor .jsoneditor-text-errors td{padding:3px 6px;vertical-align:middle}.jsoneditor .jsoneditor-text-errors td pre{margin:0;white-space:normal}.jsoneditor .jsoneditor-text-errors tr{background-color:#ffffab}.jsoneditor .jsoneditor-text-errors tr.parse-error{background-color:#ee2e2e70}.jsoneditor-text-errors .jsoneditor-schema-error{border:none;width:24px;height:24px;padding:0;margin:0 4px 0 0;cursor:pointer}.jsoneditor-text-errors tr .jsoneditor-schema-error{background:url(../img/jsoneditor-icons.svg) -168px -48px}.jsoneditor-text-errors tr.parse-error .jsoneditor-schema-error{background:url(../img/jsoneditor-icons.svg) -25px 0}.fadein{-webkit-animation:fadein .3s;animation:fadein .3s;-moz-animation:fadein .3s;-o-animation:fadein .3s}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.jsoneditor-contextmenu-root{position:relative;width:0;height:0}.jsoneditor-contextmenu{position:absolute;box-sizing:content-box;z-index:99}.jsoneditor-contextmenu .jsoneditor-menu{position:relative;left:0;top:0;width:128px;height:auto;background:#fff;border:1px solid #d3d3d3;box-shadow:2px 2px 12px rgba(128,128,128,.3);list-style:none;margin:0;padding:0}.jsoneditor-contextmenu .jsoneditor-menu button{position:relative;padding:0 4px 0 0;margin:0;width:128px;height:auto;border:none;cursor:pointer;color:#4d4d4d;background:0 0;font-size:10pt;font-family:arial,sans-serif;box-sizing:border-box;text-align:left}.jsoneditor-contextmenu .jsoneditor-menu button::-moz-focus-inner{padding:0;border:0}.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-default{width:96px}.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand{float:right;width:32px;height:24px;border-left:1px solid #e5e5e5}.jsoneditor-contextmenu .jsoneditor-menu li{overflow:hidden}.jsoneditor-contextmenu .jsoneditor-menu li ul{display:none;position:relative;left:-10px;top:0;border:none;box-shadow:inset 0 0 10px rgba(128,128,128,.5);padding:0 10px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.jsoneditor-contextmenu .jsoneditor-menu li ul .jsoneditor-icon{margin-left:24px}.jsoneditor-contextmenu .jsoneditor-menu li ul li button{padding-left:24px;animation:all ease-in-out 1s}.jsoneditor-contextmenu .jsoneditor-menu li button .jsoneditor-expand{position:absolute;top:0;right:0;width:24px;height:24px;padding:0;margin:0 4px 0 0;background:url(../img/jsoneditor-icons.svg) 0 -72px}.jsoneditor-contextmenu .jsoneditor-icon{position:absolute;top:0;left:0;width:24px;height:24px;border:none;padding:0;margin:0;background-image:url(../img/jsoneditor-icons.svg)}.jsoneditor-contextmenu .jsoneditor-text{padding:4px 0 4px 24px;word-wrap:break-word}.jsoneditor-contextmenu .jsoneditor-text.jsoneditor-right-margin{padding-right:24px}.jsoneditor-contextmenu .jsoneditor-separator{height:0;border-top:1px solid #e5e5e5;padding-top:5px;margin-top:5px}.jsoneditor-contextmenu button.jsoneditor-remove .jsoneditor-icon{background-position:-24px 0}.jsoneditor-contextmenu button.jsoneditor-append .jsoneditor-icon{background-position:0 0}.jsoneditor-contextmenu button.jsoneditor-insert .jsoneditor-icon{background-position:0 0}.jsoneditor-contextmenu button.jsoneditor-duplicate .jsoneditor-icon{background-position:-48px 0}.jsoneditor-contextmenu button.jsoneditor-sort-asc .jsoneditor-icon{background-position:-168px 0}.jsoneditor-contextmenu button.jsoneditor-sort-desc .jsoneditor-icon{background-position:-192px 0}.jsoneditor-contextmenu button.jsoneditor-transform .jsoneditor-icon{background-position:-216px 0}.jsoneditor-contextmenu button.jsoneditor-extract .jsoneditor-icon{background-position:0 -24px}.jsoneditor-contextmenu button.jsoneditor-type-string .jsoneditor-icon{background-position:-144px 0}.jsoneditor-contextmenu button.jsoneditor-type-auto .jsoneditor-icon{background-position:-120px 0}.jsoneditor-contextmenu button.jsoneditor-type-object .jsoneditor-icon{background-position:-72px 0}.jsoneditor-contextmenu button.jsoneditor-type-array .jsoneditor-icon{background-position:-96px 0}.jsoneditor-contextmenu button.jsoneditor-type-modes .jsoneditor-icon{background-image:none;width:6px}.jsoneditor-contextmenu li,.jsoneditor-contextmenu ul{box-sizing:content-box;position:relative}.jsoneditor-contextmenu .jsoneditor-menu button:focus,.jsoneditor-contextmenu .jsoneditor-menu button:hover{color:#1a1a1a;background-color:#f5f5f5;outline:0}.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover{color:#fff;background-color:#ee422e}.jsoneditor-contextmenu .jsoneditor-menu li ul li button:focus,.jsoneditor-contextmenu .jsoneditor-menu li ul li button:hover{background-color:#f5f5f5}.jsoneditor-modal{max-width:95%;border-radius:2px!important;padding:45px 15px 15px 15px!important;box-shadow:2px 2px 12px rgba(128,128,128,.3);color:#4d4d4d;line-height:1.3em}.jsoneditor-modal.jsoneditor-modal-transform{width:600px!important}.jsoneditor-modal .pico-modal-header{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;padding:0 10px;height:30px;line-height:30px;font-family:arial,sans-serif;font-size:11pt;background:#3883fa;color:#fff}.jsoneditor-modal table{width:100%}.jsoneditor-modal table td{padding:3px 0}.jsoneditor-modal table td.jsoneditor-modal-input{text-align:right;padding-right:0;white-space:nowrap}.jsoneditor-modal table td.jsoneditor-modal-actions{padding-top:15px}.jsoneditor-modal table th{vertical-align:middle}.jsoneditor-modal p:first-child{margin-top:0}.jsoneditor-modal a{color:#3883fa}.jsoneditor-modal .jsoneditor-jmespath-block{margin-bottom:10px}.jsoneditor-modal .pico-close{background:0 0!important;font-size:24px!important;top:7px!important;right:7px!important;color:#fff}.jsoneditor-modal input{padding:4px}.jsoneditor-modal input[type=text]{cursor:inherit}.jsoneditor-modal input[disabled]{background:#d3d3d3;color:grey}.jsoneditor-modal .jsoneditor-select-wrapper{position:relative;display:inline-block}.jsoneditor-modal .jsoneditor-select-wrapper:after{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #666;position:absolute;right:8px;top:14px;pointer-events:none}.jsoneditor-modal select{padding:3px 24px 3px 10px;min-width:180px;max-width:350px;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:0;text-overflow:"";font-size:10pt;line-height:1.5em}.jsoneditor-modal select::-ms-expand{display:none}.jsoneditor-modal .jsoneditor-button-group input{padding:4px 10px;margin:0;border-radius:0;border-left-style:none}.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-first{border-top-left-radius:3px;border-bottom-left-radius:3px;border-left-style:solid}.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-last{border-top-right-radius:3px;border-bottom-right-radius:3px}.jsoneditor-modal .jsoneditor-transform-preview{background:#f5f5f5;height:200px}.jsoneditor-modal .jsoneditor-transform-preview.jsoneditor-error{color:#ee422e}.jsoneditor-modal .jsoneditor-jmespath-wizard{line-height:1.2em;width:100%;padding:0;border-radius:3px}.jsoneditor-modal .jsoneditor-jmespath-label{font-weight:700;color:#1e90ff;margin-top:20px;margin-bottom:5px}.jsoneditor-modal .jsoneditor-jmespath-wizard-table{width:100%}.jsoneditor-modal .jsoneditor-jmespath-wizard-label{font-style:italic;margin:4px 0 2px 0}.jsoneditor-modal .jsoneditor-inline{position:relative;display:inline-block;width:100%;padding-top:2px;padding-bottom:2px}.jsoneditor-modal .jsoneditor-inline:not(:last-child){padding-right:2px}.jsoneditor-modal .jsoneditor-jmespath-filter{display:flex;flex-wrap:wrap}.jsoneditor-modal .jsoneditor-jmespath-filter-field{width:180px}.jsoneditor-modal .jsoneditor-jmespath-filter-relation{width:100px}.jsoneditor-modal .jsoneditor-jmespath-filter-value{min-width:180px;flex:1}.jsoneditor-modal .jsoneditor-jmespath-sort-field{width:170px}.jsoneditor-modal .jsoneditor-jmespath-sort-order{width:150px}.jsoneditor-modal .jsoneditor-jmespath-select-fields{width:100%}.jsoneditor-modal .selectr-selected{border-color:#d3d3d3;padding:4px 28px 4px 8px}.jsoneditor-modal .selectr-selected .selectr-tag{background-color:#3883fa;border-radius:5px}.jsoneditor-modal table td,.jsoneditor-modal table th{text-align:left;vertical-align:top;font-weight:400;color:#4d4d4d;border-spacing:0;border-collapse:collapse}.jsoneditor-modal #query,.jsoneditor-modal input,.jsoneditor-modal select,.jsoneditor-modal textarea{background:#fff;border:1px solid #d3d3d3;color:#4d4d4d;border-radius:3px;padding:4px}.jsoneditor-modal,.jsoneditor-modal #query,.jsoneditor-modal input,.jsoneditor-modal option,.jsoneditor-modal select,.jsoneditor-modal table td,.jsoneditor-modal table th,.jsoneditor-modal textarea{font-size:10.5pt;font-family:arial,sans-serif}.jsoneditor-modal #query,.jsoneditor-modal .jsoneditor-transform-preview{font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt;width:100%;box-sizing:border-box}.jsoneditor-modal input[type=button],.jsoneditor-modal input[type=submit]{background:#f5f5f5;padding:4px 20px}.jsoneditor-modal input,.jsoneditor-modal select{cursor:pointer}.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc{background:#3883fa;border-color:#3883fa;color:#fff}.jsoneditor-menu{width:100%;height:35px;padding:2px;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;background-color:#3883fa;border-bottom:1px solid #3883fa}.jsoneditor-menu>.jsoneditor-modes>button,.jsoneditor-menu>button{width:26px;height:26px;margin:2px;padding:0;border-radius:2px;border:1px solid transparent;background:transparent url(../img/jsoneditor-icons.svg);color:#fff;opacity:.8;font-family:arial,sans-serif;font-size:10pt;float:left}.jsoneditor-menu>.jsoneditor-modes>button:hover,.jsoneditor-menu>button:hover{background-color:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4)}.jsoneditor-menu>.jsoneditor-modes>button:active,.jsoneditor-menu>.jsoneditor-modes>button:focus,.jsoneditor-menu>button:active,.jsoneditor-menu>button:focus{background-color:rgba(255,255,255,.3)}.jsoneditor-menu>.jsoneditor-modes>button:disabled,.jsoneditor-menu>button:disabled{opacity:.5;background-color:transparent;border:none}.jsoneditor-menu>button.jsoneditor-collapse-all{background-position:0 -96px}.jsoneditor-menu>button.jsoneditor-expand-all{background-position:0 -120px}.jsoneditor-menu>button.jsoneditor-sort{background-position:-120px -96px}.jsoneditor-menu>button.jsoneditor-transform{background-position:-144px -96px}.jsoneditor.jsoneditor-mode-form>.jsoneditor-menu>button.jsoneditor-sort,.jsoneditor.jsoneditor-mode-form>.jsoneditor-menu>button.jsoneditor-transform,.jsoneditor.jsoneditor-mode-view>.jsoneditor-menu>button.jsoneditor-sort,.jsoneditor.jsoneditor-mode-view>.jsoneditor-menu>button.jsoneditor-transform{display:none}.jsoneditor-menu>button.jsoneditor-undo{background-position:-24px -96px}.jsoneditor-menu>button.jsoneditor-undo:disabled{background-position:-24px -120px}.jsoneditor-menu>button.jsoneditor-redo{background-position:-48px -96px}.jsoneditor-menu>button.jsoneditor-redo:disabled{background-position:-48px -120px}.jsoneditor-menu>button.jsoneditor-compact{background-position:-72px -96px}.jsoneditor-menu>button.jsoneditor-format{background-position:-72px -120px}.jsoneditor-menu>button.jsoneditor-repair{background-position:-96px -96px}.jsoneditor-menu>.jsoneditor-modes{display:inline-block;float:left}.jsoneditor-menu>.jsoneditor-modes>button{background-image:none;width:auto;padding-left:6px;padding-right:6px}.jsoneditor-menu>.jsoneditor-modes>button.jsoneditor-separator,.jsoneditor-menu>button.jsoneditor-separator{margin-left:10px}.jsoneditor-menu a{font-family:arial,sans-serif;font-size:10pt;color:#fff;opacity:.8;vertical-align:middle}.jsoneditor-menu a:hover{opacity:1}.jsoneditor-menu a.jsoneditor-poweredBy{font-size:8pt;position:absolute;right:0;top:0;padding:10px}.jsoneditor-search{font-family:arial,sans-serif;position:absolute;right:4px;top:4px;border-collapse:collapse;border-spacing:0;display:flex}.jsoneditor-search input{color:#1a1a1a;width:120px;border:none;outline:0;margin:1px;line-height:20px}.jsoneditor-search button{width:16px;height:24px;padding:0;margin:0;border:none;background:url(../img/jsoneditor-icons.svg);vertical-align:top}.jsoneditor-search button:hover{background-color:transparent}.jsoneditor-search button.jsoneditor-refresh{width:18px;background-position:-99px -73px}.jsoneditor-search button.jsoneditor-next{cursor:pointer;background-position:-124px -73px}.jsoneditor-search button.jsoneditor-next:hover{background-position:-124px -49px}.jsoneditor-search button.jsoneditor-previous{cursor:pointer;background-position:-148px -73px;margin-right:2px}.jsoneditor-search button.jsoneditor-previous:hover{background-position:-148px -49px}.jsoneditor-results{font-family:arial,sans-serif;color:#fff;padding-right:5px;line-height:26px}.jsoneditor-frame{border:1px solid transparent;background-color:#fff;padding:0 2px;margin:0}.jsoneditor .autocomplete.dropdown{position:absolute;background:#fff;box-shadow:2px 2px 12px rgba(128,128,128,.3);border:1px solid #d3d3d3;z-index:100;overflow-x:hidden;overflow-y:auto;cursor:default;margin:0;padding:5px;text-align:left;outline:0;font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt}.jsoneditor .autocomplete.dropdown .item{color:#333}.jsoneditor .autocomplete.dropdown .item.hover{background-color:#ddd}.jsoneditor .autocomplete.hint{color:#aaa;top:4px;left:4px}.jsoneditor-treepath{padding:0 5px;overflow:hidden;white-space:nowrap;outline:0}.jsoneditor-treepath.show-all{word-wrap:break-word;white-space:normal;position:absolute;background-color:#ebebeb;z-index:999;box-shadow:2px 2px 12px rgba(128,128,128,.3)}.jsoneditor-treepath.show-all span.jsoneditor-treepath-show-all-btn{display:none}.jsoneditor-treepath div.jsoneditor-contextmenu-root{position:absolute;left:0}.jsoneditor-treepath .jsoneditor-treepath-show-all-btn{position:absolute;background-color:#ebebeb;left:0;height:20px;padding:0 3px;cursor:pointer}.jsoneditor-treepath .jsoneditor-treepath-element{margin:1px;font-family:arial,sans-serif;font-size:10pt}.jsoneditor-treepath .jsoneditor-treepath-seperator{margin:2px;font-size:9pt;font-family:arial,sans-serif}.jsoneditor-treepath span.jsoneditor-treepath-element:hover,.jsoneditor-treepath span.jsoneditor-treepath-seperator:hover{cursor:pointer;text-decoration:underline}.jsoneditor-statusbar{line-height:26px;height:26px;color:grey;background-color:#ebebeb;border-top:1px solid #d3d3d3;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:10pt}.jsoneditor-statusbar>.jsoneditor-curserinfo-val{margin-right:12px}.jsoneditor-statusbar>.jsoneditor-curserinfo-count{margin-left:4px}.jsoneditor-statusbar>.jsoneditor-validation-error-icon{float:right;width:24px;height:24px;padding:0;margin-top:1px;background:url(../img/jsoneditor-icons.svg) -168px -48px;cursor:pointer}.jsoneditor-statusbar>.jsoneditor-validation-error-count{float:right;margin:0 4px 0 0;cursor:pointer}.jsoneditor-statusbar>.jsoneditor-parse-error-icon{float:right;width:24px;height:24px;padding:0;margin:1px;background:url(../img/jsoneditor-icons.svg) -25px 0}.jsoneditor-statusbar .jsoneditor-array-info a{color:inherit}div.jsoneditor-statusbar>.jsoneditor-curserinfo-label,div.jsoneditor-statusbar>.jsoneditor-size-info{margin:0 4px}.jsoneditor-navigation-bar{width:100%;height:26px;line-height:26px;padding:0;margin:0;border-bottom:1px solid #d3d3d3;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:grey;background-color:#ebebeb;overflow:hidden;font-family:arial,sans-serif;font-size:10pt}/*!
+ * Selectr 2.4.0
+ * https://github.com/Mobius1/Selectr
+ *
+ * Released under the MIT license
+ */.selectr-container{position:relative}.selectr-container li{list-style:none}.selectr-hidden{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0 none}.selectr-visible{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;z-index:11}.selectr-desktop.multiple .selectr-visible{display:none}.selectr-desktop.multiple.native-open .selectr-visible{top:100%;min-height:200px!important;height:auto;opacity:1;display:block}.selectr-container.multiple.selectr-mobile .selectr-selected{z-index:0}.selectr-selected{position:relative;z-index:1;box-sizing:border-box;width:100%;padding:7px 28px 7px 14px;cursor:pointer;border:1px solid #999;border-radius:3px;background-color:#fff}.selectr-selected::before{position:absolute;top:50%;right:10px;width:0;height:0;content:'';-o-transform:rotate(0) translate3d(0,-50%,0);-ms-transform:rotate(0) translate3d(0,-50%,0);-moz-transform:rotate(0) translate3d(0,-50%,0);-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0);border-width:4px 4px 0 4px;border-style:solid;border-color:#6c7a86 transparent transparent}.selectr-container.native-open .selectr-selected::before,.selectr-container.open .selectr-selected::before{border-width:0 4px 4px 4px;border-style:solid;border-color:transparent transparent #6c7a86}.selectr-label{display:none;overflow:hidden;width:100%;white-space:nowrap;text-overflow:ellipsis}.selectr-placeholder{color:#6c7a86}.selectr-tags{margin:0;padding:0;white-space:normal}.has-selected .selectr-tags{margin:0 0 -2px}.selectr-tag{list-style:none;position:relative;float:left;padding:2px 25px 2px 8px;margin:0 2px 2px 0;cursor:default;color:#fff;border:medium none;border-radius:10px;background:#acb7bf none repeat scroll 0 0}.selectr-container.multiple.has-selected .selectr-selected{padding:5px 28px 5px 5px}.selectr-options-container{position:absolute;z-index:10000;top:calc(100% - 1px);left:0;display:none;box-sizing:border-box;width:100%;border-width:0 1px 1px;border-style:solid;border-color:transparent #999 #999;border-radius:0 0 3px 3px;background-color:#fff}.selectr-container.open .selectr-options-container{display:block}.selectr-input-container{position:relative;display:none}.selectr-clear,.selectr-input-clear,.selectr-tag-remove{position:absolute;top:50%;right:22px;width:20px;height:20px;padding:0;cursor:pointer;-o-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);border:medium none;background-color:transparent;z-index:11}.selectr-clear,.selectr-input-clear{display:none}.selectr-container.has-selected .selectr-clear,.selectr-input-container.active .selectr-input-clear{display:block}.selectr-selected .selectr-tag-remove{right:2px}.selectr-clear::after,.selectr-clear::before,.selectr-input-clear::after,.selectr-input-clear::before,.selectr-tag-remove::after,.selectr-tag-remove::before{position:absolute;top:5px;left:9px;width:2px;height:10px;content:' ';background-color:#6c7a86}.selectr-tag-remove::after,.selectr-tag-remove::before{top:4px;width:3px;height:12px;background-color:#fff}.selectr-clear:before,.selectr-input-clear::before,.selectr-tag-remove::before{-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.selectr-clear:after,.selectr-input-clear::after,.selectr-tag-remove::after{-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.selectr-input-container.active,.selectr-input-container.active .selectr-clear{display:block}.selectr-input{top:5px;left:5px;box-sizing:border-box;width:calc(100% - 30px);margin:10px 15px;padding:7px 30px 7px 9px;border:1px solid #999;border-radius:3px}.selectr-notice{display:none;box-sizing:border-box;width:100%;padding:8px 16px;border-top:1px solid #999;border-radius:0 0 3px 3px;background-color:#fff}.selectr-container.notice .selectr-notice{display:block}.selectr-container.notice .selectr-selected{border-radius:3px 3px 0 0}.selectr-options{position:relative;top:calc(100% + 2px);display:none;overflow-x:auto;overflow-y:scroll;max-height:200px;margin:0;padding:0}.selectr-container.notice .selectr-options-container,.selectr-container.open .selectr-input-container,.selectr-container.open .selectr-options{display:block}.selectr-option{position:relative;display:block;padding:5px 20px;list-style:outside none none;cursor:pointer;font-weight:400}.selectr-options.optgroups>.selectr-option{padding-left:25px}.selectr-optgroup{font-weight:700;padding:0}.selectr-optgroup--label{font-weight:700;margin-top:10px;padding:5px 15px}.selectr-match{text-decoration:underline}.selectr-option.selected{background-color:#ddd}.selectr-option.active{color:#fff;background-color:#5897fb}.selectr-option.disabled{opacity:.4}.selectr-option.excluded{display:none}.selectr-container.open .selectr-selected{border-color:#999 #999 transparent #999;border-radius:3px 3px 0 0}.selectr-container.open .selectr-selected::after{-o-transform:rotate(180deg) translate3d(0,50%,0);-ms-transform:rotate(180deg) translate3d(0,50%,0);-moz-transform:rotate(180deg) translate3d(0,50%,0);-webkit-transform:rotate(180deg) translate3d(0,50%,0);transform:rotate(180deg) translate3d(0,50%,0)}.selectr-disabled{opacity:.6}.has-selected .selectr-placeholder,.selectr-empty{display:none}.has-selected .selectr-label{display:block}.taggable .selectr-selected{padding:4px 28px 4px 4px}.taggable .selectr-selected::after{display:table;content:" ";clear:both}.taggable .selectr-label{width:auto}.taggable .selectr-tags{float:left;display:block}.taggable .selectr-placeholder{display:none}.input-tag{float:left;min-width:90px;width:auto}.selectr-tag-input{border:medium none;padding:3px 10px;width:100%;font-family:inherit;font-weight:inherit;font-size:inherit}.selectr-input-container.loading::after{position:absolute;top:50%;right:20px;width:20px;height:20px;content:'';-o-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-o-transform-origin:50% 0 0;-ms-transform-origin:50% 0 0;-moz-transform-origin:50% 0 0;-webkit-transform-origin:50% 0 0;transform-origin:50% 0 0;-moz-animation:.5s linear 0s normal forwards infinite running spin;-webkit-animation:.5s linear 0s normal forwards infinite running spin;animation:.5s linear 0s normal forwards infinite running spin;border-width:3px;border-style:solid;border-color:#aaa #ddd #ddd;border-radius:50%}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0)}100%{-webkit-transform:rotate(360deg) translate3d(0,-50%,0);transform:rotate(360deg) translate3d(0,-50%,0)}}@keyframes spin{0%{-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0)}100%{-webkit-transform:rotate(360deg) translate3d(0,-50%,0);transform:rotate(360deg) translate3d(0,-50%,0)}}.selectr-container.open.inverted .selectr-selected{border-color:transparent #999 #999;border-radius:0 0 3px 3px}.selectr-container.inverted .selectr-options-container{border-width:1px 1px 0;border-color:#999 #999 transparent;border-radius:3px 3px 0 0;background-color:#fff}.selectr-container.inverted .selectr-options-container{top:auto;bottom:calc(100% - 1px)}.selectr-container ::-webkit-input-placeholder{color:#6c7a86;opacity:1}.selectr-container ::-moz-placeholder{color:#6c7a86;opacity:1}.selectr-container :-ms-input-placeholder{color:#6c7a86;opacity:1}.selectr-container ::placeholder{color:#6c7a86;opacity:1}
\ No newline at end of file
diff --git a/demo/muon-monitor/src/jsMain/web/css/main.css b/demo/muon-monitor/src/jsMain/web/css/main.css
new file mode 100644
index 00000000..e7f925df
--- /dev/null
+++ b/demo/muon-monitor/src/jsMain/web/css/main.css
@@ -0,0 +1,48 @@
+.loader {
+    border: 16px solid #f3f3f3; /* Light grey */
+    border-top: 16px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Remove default bullets */
+ul, .objTree-subtree {
+    list-style-type: none;
+}
+
+/* Style the caret/arrow */
+.objTree-caret {
+    cursor: pointer;
+    user-select: none; /* Prevent text selection */
+}
+
+.objTree-label {
+    cursor: pointer;
+}
+
+/* Create the caret/arrow with a unicode, and style it */
+.objTree-caret::before {
+    content: "\25B6";
+    color: black;
+    display: inline-block;
+    margin-right: 6px;
+}
+
+.objTree-leaf::before {
+    content: "\25C6";
+    color: black;
+    display: inline-block;
+    margin-right: 6px;
+}
+
+/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
+.objTree-caret-down::before {
+    transform: rotate(90deg);
+}
diff --git a/demo/muon-monitor/src/jsMain/web/img/jsoneditor-icons.svg b/demo/muon-monitor/src/jsMain/web/img/jsoneditor-icons.svg
new file mode 100644
index 00000000..332be179
--- /dev/null
+++ b/demo/muon-monitor/src/jsMain/web/img/jsoneditor-icons.svg
@@ -0,0 +1,748 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+        xmlns:dc="http://purl.org/dc/elements/1.1/"
+        xmlns:cc="http://creativecommons.org/ns#"
+        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+        width="240"
+        height="144"
+        id="svg4136"
+        version="1.1"
+        inkscape:version="0.91 r13725"
+        sodipodi:docname="jsoneditor-icons.svg">
+  <title
+     id="title6512">JSON Editor Icons</title>
+  <metadata
+     id="metadata4148">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>JSON Editor Icons</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4146" />
+  <sodipodi:namedview
+     pagecolor="#ff63ff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1026"
+     id="namedview4144"
+     showgrid="true"
+     inkscape:zoom="4"
+     inkscape:cx="13.229181"
+     inkscape:cy="119.82429"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4136"
+     showguides="false"
+     borderlayer="false"
+     inkscape:showpageshadow="true"
+     showborder="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4640"
+       empspacing="24" />
+  </sodipodi:namedview>
+  <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
+     id="svg_1"
+     height="16"
+     width="16"
+     y="4"
+     x="4" />
+  <rect
+     id="svg_1-7"
+     height="16"
+     width="16"
+     y="3.999995"
+     x="28.000006"
+     style="fill:#ec3f29;fill-opacity:0.94117647;stroke:none;stroke-width:0" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
+     x="52.000004"
+     y="3.999995"
+     width="16"
+     height="16"
+     id="rect4165" />
+  <rect
+     id="rect4175"
+     height="16"
+     width="16"
+     y="3.9999852"
+     x="172.00002"
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4175-3"
+     height="16"
+     width="16"
+     y="3.999995"
+     x="196"
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
+  <g
+     id="g4299"
+     style="stroke:none">
+    <rect
+       x="7.0000048"
+       y="10.999998"
+       width="9.9999924"
+       height="1.9999986"
+       id="svg_1-1"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
+    <rect
+       x="11.000005"
+       y="7.0000114"
+       width="1.9999955"
+       height="9.9999838"
+       id="svg_1-1-1"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
+  </g>
+  <g
+     id="g4299-3"
+     transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,19.029435,12.000001)"
+     style="stroke:none">
+    <rect
+       x="7.0000048"
+       y="10.999998"
+       width="9.9999924"
+       height="1.9999986"
+       id="svg_1-1-0"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
+    <rect
+       x="11.000005"
+       y="7.0000114"
+       width="1.9999955"
+       height="9.9999838"
+       id="svg_1-1-1-9"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0" />
+  </g>
+  <rect
+     id="svg_1-7-5"
+     height="6.9999905"
+     width="6.9999909"
+     y="7.0000048"
+     x="55.000004"
+     style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+  <rect
+     style="fill:#ffffff;fill-opacity:1;stroke:#4c4c4c;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     x="58"
+     y="10.00001"
+     width="6.9999909"
+     height="6.9999905"
+     id="rect4354" />
+  <rect
+     id="svg_1-7-5-7"
+     height="6.9999905"
+     width="6.9999909"
+     y="10.000005"
+     x="58.000004"
+     style="fill:#ffffff;fill-opacity:1;stroke:#3c80df;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.94117647" />
+  <g
+     id="g4378">
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+       x="198"
+       y="10.999999"
+       width="7.9999909"
+       height="1.9999965"
+       id="svg_1-7-5-3" />
+    <rect
+       id="rect4374"
+       height="1.9999946"
+       width="11.999995"
+       y="7.0000005"
+       x="198"
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+    <rect
+       id="rect4376"
+       height="1.9999995"
+       width="3.9999928"
+       y="14.999996"
+       x="198"
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+  </g>
+  <g
+     transform="matrix(1,0,0,-1,-23.999995,23.999995)"
+     id="g4383">
+    <rect
+       id="rect4385"
+       height="1.9999965"
+       width="7.9999909"
+       y="10.999999"
+       x="198"
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+       x="198"
+       y="7.0000005"
+       width="11.999995"
+       height="1.9999946"
+       id="rect4387" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0"
+       x="198"
+       y="14.999996"
+       width="3.9999928"
+       height="1.9999995"
+       id="rect4389" />
+  </g>
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
+     id="rect3754-4"
+     width="16"
+     height="16"
+     x="76"
+     y="3.9999199" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 85.10447,6.0157384 -0.0156,1.4063 c 3.02669,-0.2402 0.33008,3.6507996 2.48438,4.5780996 -2.18694,1.0938 0.49191,4.9069 -2.45313,4.5781 l -0.0156,1.4219 c 5.70828,0.559 1.03264,-5.1005 4.70313,-5.2656 l 0,-1.4063 c -3.61303,-0.027 1.11893,-5.7069996 -4.70313,-5.3124996 z"
+     id="path4351"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 82.78125,5.9984384 0.0156,1.4063 c -3.02668,-0.2402 -0.33007,3.6506996 -2.48437,4.5780996 2.18694,1.0938 -0.49192,4.9069 2.45312,4.5781 l 0.0156,1.4219 c -5.70827,0.559 -1.03263,-5.1004 -4.70312,-5.2656 l 0,-1.4063 c 3.61303,-0.027 -1.11894,-5.7070996 4.70312,-5.3124996 z"
+     id="path4351-9"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
+     id="rect3754-25"
+     width="16"
+     height="16"
+     x="100"
+     y="3.9999199" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:none"
+     d="m 103.719,5.6719384 0,12.7187996 3.03125,0 0,-1.5313 -1.34375,0 0,-9.6249996 1.375,0 0,-1.5625 z"
+     id="path2987"
+     inkscape:connector-curvature="0" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:none"
+     d="m 112.2185,5.6721984 0,12.7187996 -3.03125,0 0,-1.5313 1.34375,0 0,-9.6249996 -1.375,0 0,-1.5625 z"
+     id="path2987-1"
+     inkscape:connector-curvature="0" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
+     id="rect3754-73"
+     width="16"
+     height="16"
+     x="124"
+     y="3.9999199" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:none"
+     d="m 126.2824,17.602938 1.78957,0 1.14143,-2.8641 5.65364,0 1.14856,2.8641 1.76565,0 -4.78687,-11.1610996 -1.91903,0 z"
+     id="path3780"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccc" />
+  <path
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
+     d="m 129.72704,13.478838 4.60852,0.01 -2.30426,-5.5497996 z"
+     id="path3782"
+     inkscape:connector-curvature="0" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none"
+     id="rect3754-35"
+     width="16"
+     height="16"
+     x="148"
+     y="3.9999199" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:none"
+     d="m 156.47655,5.8917384 0,2.1797 0.46093,2.3983996 1.82813,0 0.39844,-2.3983996 0,-2.1797 z"
+     id="path5008-2"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccc" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:none"
+     d="m 152.51561,5.8906384 0,2.1797 0.46094,2.3983996 1.82812,0 0.39844,-2.3983996 0,-2.1797 z"
+     id="path5008-2-8"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccc" />
+  <rect
+     id="svg_1-7-2"
+     height="1.9999961"
+     width="11.999996"
+     y="64"
+     x="54"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+     id="svg_1-7-2-2"
+     height="2.9999905"
+     width="2.9999907"
+     y="52"
+     x="80.000008"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     x="85.000008"
+     y="52"
+     width="2.9999907"
+     height="2.9999905"
+     id="rect4561" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     x="80.000008"
+     y="58"
+     width="2.9999907"
+     height="2.9999905"
+     id="rect4563" />
+  <rect
+     id="rect4565"
+     height="2.9999905"
+     width="2.9999907"
+     y="58"
+     x="85.000008"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4567"
+     height="2.9999905"
+     width="2.9999907"
+     y="64"
+     x="80.000008"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     x="85.000008"
+     y="64"
+     width="2.9999907"
+     height="2.9999905"
+     id="rect4569" />
+  <circle
+     style="opacity:1;fill:none;fill-opacity:1;stroke:#4c4c4c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     id="path4571"
+     cx="110.06081"
+     cy="57.939209"
+     r="4.7438836" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     x="116.64566"
+     y="-31.79752"
+     width="4.229713"
+     height="6.4053884"
+     id="rect4563-2"
+     transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" />
+  <path
+     style="fill:#4c4c4c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 125,56 138.77027,56.095 132,64 Z"
+     id="path4613"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+  <path
+     sodipodi:nodetypes="cccc"
+     inkscape:connector-curvature="0"
+     id="path4615"
+     d="M 149,64 162.77027,63.905 156,56 Z"
+     style="fill:#4c4c4c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     x="54"
+     y="53"
+     width="11.999996"
+     height="1.9999961"
+     id="rect4638" />
+  <rect
+     id="svg_1-7-2-24"
+     height="1.9999957"
+     width="12.99999"
+     y="-56"
+     x="53"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     transform="matrix(0,1,-1,0,0,0)" />
+  <rect
+     transform="matrix(0,1,-1,0,0,0)"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0"
+     x="53"
+     y="-66"
+     width="12.99999"
+     height="1.9999957"
+     id="rect4657" />
+  <rect
+     id="rect4659"
+     height="0.99999291"
+     width="11.999999"
+     y="57"
+     x="54"
+     style="fill:#4c4c4c;fill-opacity:0.98431373;stroke:none;stroke-width:0" />
+  <rect
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     x="54"
+     y="88.000122"
+     width="11.999996"
+     height="1.9999961"
+     id="rect4661" />
+  <rect
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     x="80.000008"
+     y="76.000122"
+     width="2.9999907"
+     height="2.9999905"
+     id="rect4663" />
+  <rect
+     id="rect4665"
+     height="2.9999905"
+     width="2.9999907"
+     y="76.000122"
+     x="85.000008"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
+  <rect
+     id="rect4667"
+     height="2.9999905"
+     width="2.9999907"
+     y="82.000122"
+     x="80.000008"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
+  <rect
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     x="85.000008"
+     y="82.000122"
+     width="2.9999907"
+     height="2.9999905"
+     id="rect4669" />
+  <rect
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     x="80.000008"
+     y="88.000122"
+     width="2.9999907"
+     height="2.9999905"
+     id="rect4671" />
+  <rect
+     id="rect4673"
+     height="2.9999905"
+     width="2.9999907"
+     y="88.000122"
+     x="85.000008"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
+  <circle
+     r="4.7438836"
+     cy="81.939331"
+     cx="110.06081"
+     id="circle4675"
+     style="opacity:1;fill:none;fill-opacity:1;stroke:#d3d3d3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <rect
+     transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
+     id="rect4677"
+     height="6.4053884"
+     width="4.229713"
+     y="-14.826816"
+     x="133.6163"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:#d3d3d3;stroke-width:0;stroke-opacity:1" />
+  <path
+     sodipodi:nodetypes="cccc"
+     inkscape:connector-curvature="0"
+     id="path4679"
+     d="m 125,80.000005 13.77027,0.09499 L 132,87.999992 Z"
+     style="fill:#d3d3d3;fill-opacity:1;fill-rule:evenodd;stroke:#d3d3d3;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#d3d3d3;fill-opacity:1;fill-rule:evenodd;stroke:#d3d3d3;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 149,88.0002 162.77027,87.9052 156,80.0002 Z"
+     id="path4681"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+  <rect
+     id="rect4683"
+     height="1.9999961"
+     width="11.999996"
+     y="77.000122"
+     x="54"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1" />
+  <rect
+     transform="matrix(0,1,-1,0,0,0)"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     x="77.000122"
+     y="-56"
+     width="12.99999"
+     height="1.9999957"
+     id="rect4685" />
+  <rect
+     id="rect4687"
+     height="1.9999957"
+     width="12.99999"
+     y="-66"
+     x="77.000122"
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     transform="matrix(0,1,-1,0,0,0)" />
+  <rect
+     style="fill:#d3d3d3;fill-opacity:1;stroke:none;stroke-width:0;stroke-opacity:1"
+     x="54"
+     y="81.000122"
+     width="11.999999"
+     height="0.99999291"
+     id="rect4689" />
+  <rect
+     id="rect4761-1"
+     height="1.9999945"
+     width="15.99999"
+     y="101"
+     x="76.000008"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4761-0"
+     height="1.9999945"
+     width="15.99999"
+     y="105"
+     x="76.000008"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4761-7"
+     height="1.9999945"
+     width="9"
+     y="109"
+     x="76.000008"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4761-1-1"
+     height="1.9999945"
+     width="12"
+     y="125"
+     x="76.000008"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4761-1-1-4"
+     height="1.9999945"
+     width="10"
+     y="137"
+     x="76.000008"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4761-1-1-4-4"
+     height="1.9999945"
+     width="10"
+     y="129"
+     x="82"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <rect
+     id="rect4761-1-1-4-4-3"
+     height="1.9999945"
+     width="9"
+     y="133"
+     x="82"
+     style="fill:#ffffff;fill-opacity:0.8;stroke:none;stroke-width:0" />
+  <path
+     inkscape:connector-curvature="0"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="m 36.398438,100.0254 c -0.423362,-0.013 -0.846847,0.01 -1.265626,0.062 -1.656562,0.2196 -3.244567,0.9739 -4.507812,2.2266 L 29,100.5991 l -2.324219,7.7129 7.826172,-1.9062 -1.804687,-1.9063 c 1.597702,-1.5308 4.048706,-1.8453 5.984375,-0.7207 1.971162,1.1452 2.881954,3.3975 2.308593,5.5508 -0.573361,2.1533 -2.533865,3.6953 -4.830078,3.6953 l 0,3.0742 c 3.550756,0 6.710442,-2.4113 7.650391,-5.9414 0.939949,-3.5301 -0.618463,-7.2736 -3.710938,-9.0703 -1.159678,-0.6738 -2.431087,-1.0231 -3.701171,-1.0625 z"
+     id="path4138" />
+  <path
+     inkscape:connector-curvature="0"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.8;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="m 59.722656,99.9629 c -1.270084,0.039 -2.541493,0.3887 -3.701172,1.0625 -3.092475,1.7967 -4.650886,5.5402 -3.710937,9.0703 0.939949,3.5301 4.09768,5.9414 7.648437,5.9414 l 0,-3.0742 c -2.296214,0 -4.256717,-1.542 -4.830078,-3.6953 -0.573361,-2.1533 0.337432,-4.4056 2.308594,-5.5508 1.935731,-1.1246 4.38863,-0.8102 5.986326,0.7207 l -1.806638,1.9063 7.828128,1.9062 -2.32422,-7.7129 -1.62696,1.7168 c -1.26338,-1.2531 -2.848917,-2.0088 -4.505855,-2.2285 -0.418778,-0.055 -0.842263,-0.076 -1.265625,-0.062 z"
+     id="path4138-1" />
+  <path
+     inkscape:connector-curvature="0"
+     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
+     d="m 10.5,100 0,2 -2.4999996,0 L 12,107 l 4,-5 -2.5,0 0,-2 -3,0 z"
+     id="path3055-0-77" />
+  <path
+     style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.96599996;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 4.9850574,108.015 14.0298856,-0.03"
+     id="path5244-5-0-5"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cc" />
+  <path
+     style="opacity:0.8;fill:none;stroke:#ffffff;stroke-width:1.96599996;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 4.9849874,132.015 14.0298866,-0.03"
+     id="path5244-5-0-5-8"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cc" />
+  <path
+     inkscape:connector-curvature="0"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.4;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="m 36.398438,123.9629 c -0.423362,-0.013 -0.846847,0.01 -1.265626,0.062 -1.656562,0.2196 -3.244567,0.9739 -4.507812,2.2266 L 29,124.5366 l -2.324219,7.7129 7.826172,-1.9062 -1.804687,-1.9063 c 1.597702,-1.5308 4.048706,-1.8453 5.984375,-0.7207 1.971162,1.1453 2.881954,3.3975 2.308593,5.5508 -0.573361,2.1533 -2.533864,3.6953 -4.830078,3.6953 l 0,3.0742 c 3.550757,0 6.710442,-2.4093 7.650391,-5.9394 0.939949,-3.5301 -0.618463,-7.2756 -3.710938,-9.0723 -1.159678,-0.6737 -2.431087,-1.0231 -3.701171,-1.0625 z"
+     id="path4138-12" />
+  <path
+     inkscape:connector-curvature="0"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.4;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.66157866;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="m 59.722656,123.9629 c -1.270084,0.039 -2.541493,0.3888 -3.701172,1.0625 -3.092475,1.7967 -4.650886,5.5422 -3.710937,9.0723 0.939949,3.5301 4.09768,5.9394 7.648437,5.9394 l 0,-3.0742 c -2.296214,0 -4.256717,-1.542 -4.830078,-3.6953 -0.573361,-2.1533 0.337432,-4.4055 2.308594,-5.5508 1.935731,-1.1246 4.38863,-0.8102 5.986326,0.7207 l -1.806638,1.9063 7.828128,1.9062 -2.32422,-7.7129 -1.62696,1.7168 c -1.26338,-1.2531 -2.848917,-2.0088 -4.505855,-2.2285 -0.418778,-0.055 -0.842263,-0.076 -1.265625,-0.062 z"
+     id="path4138-1-3" />
+  <path
+     id="path6191"
+     d="m 10.5,116 0,-2 -2.4999996,0 L 12,109 l 4,5 -2.5,0 0,2 -3,0 z"
+     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
+     inkscape:connector-curvature="0" />
+  <path
+     inkscape:connector-curvature="0"
+     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
+     d="m 10.5,129 0,-2 -2.4999996,0 L 12,122 l 4,5 -2.5,0 0,2 -3,0 z"
+     id="path6193" />
+  <path
+     id="path6195"
+     d="m 10.5,135 0,2 -2.4999996,0 L 12,142 l 4,-5 -2.5,0 0,-2 -3,0 z"
+     style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.96599996;stroke-miterlimit:4;stroke-dasharray:none"
+     inkscape:connector-curvature="0" />
+  <path
+     sodipodi:type="star"
+     style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     id="path4500"
+     sodipodi:sides="3"
+     sodipodi:cx="11.55581"
+     sodipodi:cy="60.073242"
+     sodipodi:r1="5.1116104"
+     sodipodi:r2="2.5558052"
+     sodipodi:arg1="0"
+     sodipodi:arg2="1.0471976"
+     inkscape:flatsided="false"
+     inkscape:rounded="0"
+     inkscape:randomized="0"
+     d="m 16.66742,60.073242 -3.833708,2.213392 -3.8337072,2.213393 0,-4.426785 0,-4.426784 3.8337082,2.213392 z"
+     inkscape:transform-center-x="-1.2779026" />
+  <path
+     inkscape:transform-center-x="1.277902"
+     d="m -31.500004,60.073242 -3.833708,2.213392 -3.833707,2.213393 0,-4.426785 0,-4.426784 3.833707,2.213392 z"
+     inkscape:randomized="0"
+     inkscape:rounded="0"
+     inkscape:flatsided="false"
+     sodipodi:arg2="1.0471976"
+     sodipodi:arg1="0"
+     sodipodi:r2="2.5558052"
+     sodipodi:r1="5.1116104"
+     sodipodi:cy="60.073242"
+     sodipodi:cx="-36.611614"
+     sodipodi:sides="3"
+     id="path4502"
+     style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     sodipodi:type="star"
+     transform="scale(-1,1)" />
+  <path
+     d="m 16.66742,60.073212 -3.833708,2.213392 -3.8337072,2.213392 0,-4.426784 0,-4.426785 3.8337082,2.213392 z"
+     inkscape:randomized="0"
+     inkscape:rounded="0"
+     inkscape:flatsided="false"
+     sodipodi:arg2="1.0471976"
+     sodipodi:arg1="0"
+     sodipodi:r2="2.5558052"
+     sodipodi:r1="5.1116104"
+     sodipodi:cy="60.073212"
+     sodipodi:cx="11.55581"
+     sodipodi:sides="3"
+     id="path4504"
+     style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     sodipodi:type="star"
+     transform="matrix(0,1,-1,0,72.0074,71.7877)"
+     inkscape:transform-center-y="1.2779029" />
+  <path
+     inkscape:transform-center-y="-1.2779026"
+     transform="matrix(0,-1,-1,0,96,96)"
+     sodipodi:type="star"
+     style="fill:#4d4d4d;fill-opacity:0.90196078;stroke:#d3d3d3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     id="path4506"
+     sodipodi:sides="3"
+     sodipodi:cx="11.55581"
+     sodipodi:cy="60.073212"
+     sodipodi:r1="5.1116104"
+     sodipodi:r2="2.5558052"
+     sodipodi:arg1="0"
+     sodipodi:arg2="1.0471976"
+     inkscape:flatsided="false"
+     inkscape:rounded="0"
+     inkscape:randomized="0"
+     d="m 16.66742,60.073212 -3.833708,2.213392 -3.8337072,2.213392 0,-4.426784 0,-4.426785 3.8337082,2.213392 z" />
+  <path
+     sodipodi:nodetypes="cccc"
+     inkscape:connector-curvature="0"
+     id="path4615-5"
+     d="m 171.82574,65.174193 16.34854,0 -8.17427,-13.348454 z"
+     style="fill:#fbb917;fill-opacity:1;fill-rule:evenodd;stroke:#fbb917;stroke-width:1.65161395;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 179,55 0,6 2,0 0,-6"
+     id="path4300"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+  <path
+     style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 179,62 0,2 2,0 0,-2"
+     id="path4300-6"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccc" />
+  <path
+     style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:0.8"
+     d="M 99.994369,113.0221 102,114.98353 l 7,-6.9558 3,0.97227 2,-1 1,-2 0,-3 -3,3 -3,-3 3,-3 -3,0 -2,1 -1,2 0.99437,3.0221 z"
+     id="path4268"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccc" />
+  <rect
+     id="rect4175-3-5"
+     height="16"
+     width="16"
+     y="4"
+     x="220"
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0" />
+  <path
+     style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 234,6 0,2 -5,5 0,5 -2,0 0,-5 -5,-5 0,-2"
+     id="path3546"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+  <g
+     transform="matrix(1.3333328,0,0,-1.5999992,-139.9999,127.19999)"
+     id="g4383-6">
+    <rect
+       id="rect4385-2"
+       height="1.2499905"
+       width="5.9999924"
+       y="12.625005"
+       x="198.00002"
+       style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0" />
+    <rect
+       style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
+       x="198.00002"
+       y="15.125007"
+       width="7.4999928"
+       height="1.2499949"
+       id="rect4387-9" />
+    <rect
+       style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
+       x="198.00002"
+       y="7.6250024"
+       width="2.9999909"
+       height="1.2499905"
+       id="rect4389-1-0" />
+    <rect
+       style="fill:#ffffff;fill-opacity:0.8;stroke:#000000;stroke-width:0"
+       x="198.00002"
+       y="10.125004"
+       width="4.4999919"
+       height="1.2499905"
+       id="rect4389-1-9" />
+    <path
+       style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:none;stroke-width:0.68465352px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 207.00001,16.375004 0,-5.625005 -2.25,0 3,-3.1250014 3,3.1250014 -2.25,0 0,5.625005 -1.5,0"
+       id="path4402"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+  <path
+     style="fill:#ffffff;fill-opacity:0.8;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 164,100 0,3 -6,6 0,7 -4,0 0,-7 -6,-6 0,-3"
+     id="path3546-2-2"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+  <rect
+     style="fill:#4c4c4c;fill-opacity:1;stroke:none;stroke-width:0"
+     id="svg_1-3"
+     height="16"
+     width="16"
+     y="28"
+     x="4" />
+  <path
+     sodipodi:nodetypes="ccccccccc"
+     inkscape:connector-curvature="0"
+     id="path4402-5-7"
+     d="m 15,41 0,-7 -4,0 0,3 -5,-4 5,-4 0,3 6,0 0,9"
+     style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.68465352px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+</svg>
diff --git a/demo/muon-monitor/src/jsMain/web/index.html b/demo/muon-monitor/src/jsMain/web/index.html
new file mode 100644
index 00000000..26ae632d
--- /dev/null
+++ b/demo/muon-monitor/src/jsMain/web/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <!--    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
+    <title>Three js demo for particle physics</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/jsoneditor.min.css">
+    <script type="text/javascript" src="main.bundle.js"></script>
+</head>
+<body class="testApp">
+
+<div class="container">
+    <h1>Muon monitor demo</h1>
+</div>
+
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-lg-3">
+            <div class="row" id="tree"></div>
+        </div>
+        <div class="col-lg-6">
+            <div id="canvas"></div>
+        </div>
+        <div class="col-lg-3">
+            <div class="row" id="settings"></div>
+            <div class="row" id="editor"></div>
+        </div>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/readResource.kt b/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/readResource.kt
new file mode 100644
index 00000000..5cb275e1
--- /dev/null
+++ b/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/readResource.kt
@@ -0,0 +1,10 @@
+package ru.mipt.npm.muon.monitor
+
+actual fun readResource(path: String): String {
+    return ClassLoader.getSystemClassLoader().getResourceAsStream(path)?.readAllBytes()?.decodeToString()
+        ?: error("Resource '$path' not found")
+}
+
+internal actual fun readMonitorConfig(): String {
+    return readResource("map-RMM110.sc16")
+}
\ No newline at end of file
diff --git a/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/server/MMServer.kt b/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/server/MMServer.kt
new file mode 100644
index 00000000..1518aa35
--- /dev/null
+++ b/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/server/MMServer.kt
@@ -0,0 +1,61 @@
+package ru.mipt.npm.muon.monitor.server
+
+
+import hep.dataforge.vis.spatial.Visual3DPlugin
+import io.ktor.application.Application
+import io.ktor.application.call
+import io.ktor.application.install
+import io.ktor.application.log
+import io.ktor.features.CallLogging
+import io.ktor.features.ContentNegotiation
+import io.ktor.features.DefaultHeaders
+import io.ktor.http.content.resources
+import io.ktor.http.content.static
+import io.ktor.response.respond
+import io.ktor.routing.Routing
+import io.ktor.routing.get
+import io.ktor.serialization.serialization
+import io.ktor.server.cio.CIO
+import io.ktor.server.engine.embeddedServer
+import org.apache.commons.math3.random.JDKRandomGenerator
+import ru.mipt.npm.muon.monitor.Model
+import ru.mipt.npm.muon.monitor.sim.Cos2TrackGenerator
+import ru.mipt.npm.muon.monitor.sim.simulateOne
+import java.awt.Desktop
+import java.io.File
+import java.net.URI
+
+private val generator = Cos2TrackGenerator(JDKRandomGenerator(223))
+
+fun Application.module() {
+    val currentDir = File(".").absoluteFile
+    environment.log.info("Current directory: $currentDir")
+
+
+    install(DefaultHeaders)
+    install(CallLogging)
+    install(ContentNegotiation) {
+        serialization(json = Visual3DPlugin.json)
+    }
+    install(Routing) {
+        get("/event") {
+            val event = generator.simulateOne()
+            call.respond(event)
+        }
+        get("/geometry") {
+            call.respond(Model.buildGeometry())
+        }
+        static("/") {
+            resources()
+        }
+    }
+    try {
+        Desktop.getDesktop().browse(URI("http://localhost:8080/index.html"))
+    } catch (ex: Exception) {
+        log.error("Failed to launch browser", ex)
+    }
+}
+
+fun main() {
+    embeddedServer(CIO, 8080, host = "localhost", module = Application::module).start(wait = true)
+}
\ No newline at end of file
diff --git a/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/sim/Pixel.kt b/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/sim/Pixel.kt
new file mode 100644
index 00000000..71a96647
--- /dev/null
+++ b/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/sim/Pixel.kt
@@ -0,0 +1,122 @@
+package ru.mipt.npm.muon.monitor.sim
+
+import org.apache.commons.math3.geometry.euclidean.threed.Line
+import org.apache.commons.math3.geometry.euclidean.threed.Plane
+import org.apache.commons.math3.geometry.euclidean.threed.Vector3D
+import ru.mipt.npm.muon.monitor.Monitor.CENTRAL_LAYER_Z
+import ru.mipt.npm.muon.monitor.Monitor.GEOMETRY_TOLERANCE
+import ru.mipt.npm.muon.monitor.Monitor.LOWER_LAYER_Z
+import ru.mipt.npm.muon.monitor.Monitor.PIXEL_XY_SIZE
+import ru.mipt.npm.muon.monitor.Monitor.UPPER_LAYER_Z
+import ru.mipt.npm.muon.monitor.SC1
+import kotlin.random.Random
+
+/**
+ * Auxiliary cache for [SC1] planes
+ */
+internal class SC1Aux(val sc: SC1, var efficiency: Double = 1.0) {
+    //    val layer: Layer = findLayer(center.z);
+    private val upLayer =
+        findLayer(sc.center.z + sc.zSize / 2.0)//Layer("${name}_up", center.z + zSize / 2.0);
+    private val bottomLayer =
+        findLayer(sc.center.z - sc.zSize / 2.0)//Layer("${name}_bottom", center.z - zSize / 2.0);
+    private val centralLayer = findLayer(sc.center.z)
+
+    private val center = Vector3D(sc.center.x, sc.center.y, sc.center.z)
+
+    private val sideLayers: Array<Plane> = arrayOf(
+        Plane(center.add(Vector3D(PIXEL_XY_SIZE / 2, 0.0, 0.0)), Vector3D(1.0, 0.0, 0.0), GEOMETRY_TOLERANCE),
+        Plane(center.add(Vector3D(-PIXEL_XY_SIZE / 2, 0.0, 0.0)), Vector3D(-1.0, 0.0, 0.0), GEOMETRY_TOLERANCE),
+        Plane(center.add(Vector3D(0.0, PIXEL_XY_SIZE / 2, 0.0)), Vector3D(0.0, 1.0, 0.0), GEOMETRY_TOLERANCE),
+        Plane(center.add(Vector3D(0.0, -PIXEL_XY_SIZE / 2, 0.0)), Vector3D(0.0, -1.0, 0.0), GEOMETRY_TOLERANCE)
+    );
+
+    //TODO add efficiency
+    private fun containsPoint(x: Double, y: Double, z: Double, tolerance: Double = GEOMETRY_TOLERANCE): Boolean {
+        return x <= sc.center.x + sc.xSize / 2.0 + tolerance && x >= sc.center.x - sc.xSize / 2.0 - tolerance &&
+                y <= sc.center.y + sc.ySize / 2.0 + tolerance && y >= sc.center.y - sc.ySize / 2.0 - tolerance &&
+                z <= sc.center.z + sc.zSize / 2.0 + tolerance && z >= sc.center.z - sc.zSize / 2.0 - tolerance;
+    }
+
+    /**
+     * Check if pixel contains point
+     */
+    private fun containsPoint(point: Vector3D, tolerance: Double = GEOMETRY_TOLERANCE): Boolean {
+        return containsPoint(point.x, point.y, point.z, tolerance);
+    }
+
+    /**
+     * Return number of detector pixel like SCxx-12
+     */
+    fun getDetectorNumber(): Int {
+        return sc.name.substring(2, 4).toInt();
+    }
+
+    /**
+     * Return number of pixel in detector like SC79-xx
+     */
+    fun getPixelNumber(): Int {
+        return sc.name.substring(5).toInt();
+    }
+
+    /**
+     * The layer number from up to bottom
+     */
+    fun getLayerNumber(): Int {
+        return when (this.center.z) {
+            UPPER_LAYER_Z -> 1;
+            CENTRAL_LAYER_Z -> 2;
+            LOWER_LAYER_Z -> 3;
+            else -> throw RuntimeException("Unknown layer");
+        }
+    }
+
+    /**
+     * Check if track crosses the pixel
+     */
+    fun isHit(track: Line): Boolean {
+        //check central plane as well as upper and bottom planes of the layer
+        val upperIntersection = upLayer.intersection(track);
+        val bottomIntersection = bottomLayer.intersection(track);
+        val upperHit = containsPoint(upperIntersection);
+        val bottomHit = containsPoint(bottomIntersection);
+
+        if (!bottomHit && !upperHit) {
+            return false;
+        } else if (upperHit && bottomHit) {
+            return eff();
+        } else {
+            val verticalHitPoint = if (upperHit) {
+                upperIntersection
+            } else {
+                bottomIntersection
+            }
+            val horizontalHitPoint = getHorizontalHitPoint(track);
+            return if (horizontalHitPoint == null) {
+                //If horizontal intersection could not be found, it is near the rib and therefore length is always sufficient
+                true;
+            } else {
+                val length = verticalHitPoint.distance(horizontalHitPoint);
+                (length >= MINIMAL_TRACK_LENGTH) && eff();
+            }
+        }
+    }
+
+    private fun getHorizontalHitPoint(track: Line): Vector3D? {
+        return sideLayers
+            .map { it.intersection(track) }//FIXME there is a problem with geometric tolerances here
+            .firstOrNull { it != null && containsPoint(it, 100 * GEOMETRY_TOLERANCE) };
+    }
+
+    private fun eff(): Boolean {
+        return efficiency == 1.0 || Random.nextDouble() < efficiency;
+    }
+}
+
+private val auxCache = HashMap<SC1, SC1Aux>()
+
+fun SC1.isHit(track: Line): Boolean{
+    return auxCache.getOrPut(this){
+        SC1Aux(this)
+    }.isHit(track)
+}
\ No newline at end of file
diff --git a/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/sim/line.kt b/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/sim/line.kt
new file mode 100644
index 00000000..488140de
--- /dev/null
+++ b/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/sim/line.kt
@@ -0,0 +1,61 @@
+package ru.mipt.npm.muon.monitor.sim
+
+import hep.dataforge.vis.spatial.Point3D
+import org.apache.commons.math3.geometry.euclidean.threed.Line
+import org.apache.commons.math3.geometry.euclidean.threed.Plane
+import org.apache.commons.math3.geometry.euclidean.threed.Vector3D
+import ru.mipt.npm.muon.monitor.Monitor.CENTRAL_LAYER_Z
+import ru.mipt.npm.muon.monitor.Monitor.GEOMETRY_TOLERANCE
+
+/**
+ * Created by darksnake on 11-May-16.
+ */
+
+private val basePlane = Plane(Vector3D(0.0, 0.0, 0.0), Vector3D(0.0, 0.0, 1.0), GEOMETRY_TOLERANCE);
+
+/**
+ * elevation angle
+ */
+fun Line.getTheta(): Double {
+    return direction.delta;
+}
+
+/**
+ * Azimuthal angle
+ */
+fun Line.getPhi(): Double {
+    return direction.alpha;
+}
+
+/**
+ *  x of intersection with base (central) plane
+ */
+fun Line.getX(): Double {
+    return basePlane.intersection(this).x;
+}
+
+fun Line.getY(): Double {
+    return basePlane.intersection(this).y;
+}
+
+fun makeTrack(start: Vector3D, direction: Vector3D): Line {
+    return Line(start, start.add(direction), GEOMETRY_TOLERANCE)
+}
+
+fun makeTrack(x: Double, y: Double, theta: Double, phi: Double): Line {
+    //TODO check angle definitions
+    return makeTrack(
+        Vector3D(x, y, CENTRAL_LAYER_Z),
+        Vector3D(phi, theta)
+    )
+}
+
+fun Vector3D.toPoint() = Point3D(x, y, z)
+
+fun Line.toPoints(): List<Point3D> {
+    val basePoint = basePlane.intersection(this)
+    val bottom = basePoint.subtract(2000.0, direction)
+    val top = basePoint.add(2000.0, direction)
+    return listOf(bottom.toPoint(), top.toPoint())
+}
+
diff --git a/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/sim/monitor.kt b/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/sim/monitor.kt
new file mode 100644
index 00000000..01ff5d3b
--- /dev/null
+++ b/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/sim/monitor.kt
@@ -0,0 +1,52 @@
+package ru.mipt.npm.muon.monitor.sim
+
+import org.apache.commons.math3.geometry.euclidean.threed.Line
+import org.apache.commons.math3.geometry.euclidean.threed.Plane
+import org.apache.commons.math3.geometry.euclidean.threed.Vector3D
+import ru.mipt.npm.muon.monitor.Event
+import ru.mipt.npm.muon.monitor.Monitor
+import ru.mipt.npm.muon.monitor.SC1
+import ru.mipt.npm.muon.monitor.readResource
+import java.util.*
+
+
+// minimal track length in detector
+internal const val MINIMAL_TRACK_LENGTH = 10.0
+
+
+private val layerCache = HashMap<Double, Plane>()
+
+fun findLayer(z: Double): Plane = layerCache.getOrPut(z) {
+    Plane(
+        Vector3D(0.0, 0.0, z), Vector3D(0.0, 0.0, 1.0),
+        Monitor.GEOMETRY_TOLERANCE
+    )
+}
+
+fun readEffs(): Map<String, Double> {
+    val effMap = HashMap<String, Double>()
+    var detectorName: String = ""
+    var index: Int = 0
+    readResource("Effs-MM-minhits-4.dat").lineSequence().forEach { line ->
+        val trimmed = line.trim()
+        if (trimmed.startsWith("SC")) {
+            detectorName = trimmed.split(Regex("\\s+"))[2]
+        } else if (trimmed.startsWith("pixel")) {
+            index = 0
+        } else if (trimmed.isNotEmpty()) {
+            val eff = trimmed.split(Regex("\\s+"))[1].toDouble()
+            effMap["SC${detectorName}_${index}"] = eff
+            index++
+        }
+    }
+    return effMap
+}
+
+
+fun buildEventByTrack(index: Int, track: Line, hitResolver: (Line) -> Collection<SC1> = defaultHitResolver): Event {
+    return Event(index, track.toPoints(), hitResolver(track).map { it.name })
+}
+
+val defaultHitResolver: (Line) -> Collection<SC1> = { track: Line ->
+    Monitor.pixels.filter { it.isHit(track) }.toSet()
+}
\ No newline at end of file
diff --git a/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/sim/simulation.kt b/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/sim/simulation.kt
new file mode 100644
index 00000000..6019a94a
--- /dev/null
+++ b/demo/muon-monitor/src/jvmMain/kotlin/ru/mipt/npm/muon/monitor/sim/simulation.kt
@@ -0,0 +1,83 @@
+package ru.mipt.npm.muon.monitor.sim
+
+import org.apache.commons.math3.geometry.euclidean.threed.Line
+import org.apache.commons.math3.random.RandomGenerator
+import ru.mipt.npm.muon.monitor.Event
+import ru.mipt.npm.muon.monitor.Monitor.PIXEL_XY_SIZE
+import kotlin.math.acos
+import kotlin.math.pow
+import kotlin.math.sin
+
+private var counter = 0
+
+/**
+ * Simulate single track and returns corresponding event
+ */
+fun TrackGenerator.simulateOne(): Event {
+    val track = generate()
+    return buildEventByTrack(counter++, track)
+}
+
+interface TrackGenerator {
+    val rnd: RandomGenerator
+    fun generate(): Line
+}
+
+/**
+ * A uniform generator with track bases distributed in square in central plane, uniform phi and cos theta
+ */
+class UniformTrackGenerator(
+    override val rnd: RandomGenerator,
+    val maxX: Double = 4 * PIXEL_XY_SIZE,
+    val maxY: Double = 4 * PIXEL_XY_SIZE
+) :
+    TrackGenerator {
+    override fun generate(): Line {
+        val x = (1 - rnd.nextDouble() * 2.0) * maxX
+        val y = (1 - rnd.nextDouble() * 2.0) * maxY
+        val phi = (1 - rnd.nextDouble() * 2.0) * Math.PI
+        val theta = Math.PI / 2 - acos(rnd.nextDouble())
+        return makeTrack(x, y, theta, phi)
+    }
+}
+
+class FixedAngleGenerator(
+    override val rnd: RandomGenerator,
+    val phi: Double, val theta: Double,
+    val maxX: Double = 4 * PIXEL_XY_SIZE,
+    val maxY: Double = 4 * PIXEL_XY_SIZE
+) : TrackGenerator {
+    override fun generate(): Line {
+        val x = (1 - rnd.nextDouble() * 2.0) * maxX
+        val y = (1 - rnd.nextDouble() * 2.0) * maxY
+        return makeTrack(x, y, theta, phi)
+    }
+}
+
+/**
+ * Generating surface distribution using accept-reject method
+ */
+class Cos2TrackGenerator(
+    override val rnd: RandomGenerator,
+    val power: Double = 2.0,
+    val maxX: Double = 4 * PIXEL_XY_SIZE,
+    val maxY: Double = 4 * PIXEL_XY_SIZE
+) :
+    TrackGenerator {
+    override fun generate(): Line {
+        val x = (1 - rnd.nextDouble() * 2.0) * maxX
+        val y = (1 - rnd.nextDouble() * 2.0) * maxY
+        val phi = (1 - rnd.nextDouble() * 2.0) * Math.PI
+
+
+        for (i in 0..500) {
+            val thetaCandidate = acos(rnd.nextDouble())
+            val u = rnd.nextDouble()
+            val sin = sin(thetaCandidate)
+            if (u < sin.pow(power) / sin) {
+                return makeTrack(x, y, thetaCandidate, phi)
+            }
+        }
+        throw RuntimeException("Failed to generate theta from distribution")
+    }
+}
\ No newline at end of file
diff --git a/demo/muon-monitor/src/jvmMain/resources/Effs-MM-minhits-4.dat b/demo/muon-monitor/src/jvmMain/resources/Effs-MM-minhits-4.dat
new file mode 100644
index 00000000..6c700195
--- /dev/null
+++ b/demo/muon-monitor/src/jvmMain/resources/Effs-MM-minhits-4.dat
@@ -0,0 +1,397 @@
+  SC16 =  72  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9815    0.0070    39065    39801
+   2a   0.9790    0.0070    38199    39019
+   3a   0.9811    0.0070    38791    39538
+   4a   0.9833    0.0069    39987    40668
+   1b   0.9810    0.0070    38941    39697
+   2b   0.9800    0.0071    37449    38213
+   3b   0.9804    0.0070    39025    39806
+   4b   0.9804    0.0069    40432    41241
+   1c   0.9787    0.0069    39365    40221
+   2c   0.9793    0.0071    38092    38898
+   3c   0.9812    0.0070    38548    39288
+   4c   0.9806    0.0068    40894    41702
+   1d   0.9793    0.0069    39640    40479
+   2d   0.9775    0.0071    37605    38470
+   3d   0.9778    0.0069    39541    40439
+   4d   0.9786    0.0067    41719    42631
+  SC16 =  73  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9794    0.0069    39439    40270
+   2a   0.9791    0.0071    37754    38561
+   3a   0.9789    0.0069    39348    40198
+   4a   0.9794    0.0068    41517    42391
+   1b   0.9795    0.0070    39205    40027
+   2b   0.9796    0.0071    37647    38432
+   3b   0.9809    0.0070    38528    39280
+   4b   0.9818    0.0069    40075    40817
+   1c   0.9800    0.0071    38046    38822
+   2c   0.9805    0.0071    37651    38399
+   3c   0.9776    0.0069    39304    40205
+   4c   0.9817    0.0068    41296    42065
+   1d   0.9797    0.0070    38920    39728
+   2d   0.9802    0.0071    38191    38964
+   3d   0.9802    0.0070    38525    39302
+   4d   0.9825    0.0069    40020    40733
+  SC16 =  74  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9820    0.0070    39544    40270
+   2a   0.9816    0.0071    37850    38561
+   3a   0.9826    0.0070    39500    40198
+   4a   0.9835    0.0068    41693    42391
+   1b   0.9826    0.0070    39332    40027
+   2b   0.9811    0.0071    37707    38432
+   3b   0.9839    0.0070    38646    39280
+   4b   0.9855    0.0069    40224    40817
+   1c   0.9817    0.0071    38111    38822
+   2c   0.9825    0.0071    37726    38399
+   3c   0.9827    0.0070    39511    40205
+   4c   0.9842    0.0068    41399    42065
+   1d   0.9847    0.0070    39119    39728
+   2d   0.9825    0.0071    38282    38964
+   3d   0.9832    0.0070    38642    39302
+   4d   0.9856    0.0069    40148    40733
+  SC16 =  75  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9850    0.0069    40488    41106
+   2a   0.9824    0.0070    39586    40294
+   3a   0.9842    0.0069    40539    41189
+   4a   0.9877    0.0068    41864    42385
+   1b   0.9837    0.0069    40803    41478
+   2b   0.9835    0.0070    38953    39605
+   3b   0.9839    0.0069    40864    41533
+   4b   0.9856    0.0068    41895    42505
+   1c   0.9843    0.0068    41478    42139
+   2c   0.9825    0.0069    39926    40637
+   3c   0.9854    0.0069    40817    41422
+   4c   0.9866    0.0067    42925    43509
+   1d   0.9839    0.0068    41165    41839
+   2d   0.9837    0.0070    39517    40172
+   3d   0.9830    0.0068    40869    41576
+   4d   0.9840    0.0066    43928    44642
+  SC16 =  76  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9862    0.0068    41502    42083
+   2a   0.9871    0.0070    39451    39965
+   3a   0.9886    0.0069    40287    40752
+   4a   0.9897    0.0068    42213    42652
+   1b   0.9871    0.0068    41396    41939
+   2b   0.9864    0.0070    39284    39824
+   3b   0.9870    0.0069    41226    41768
+   4b   0.9863    0.0067    43486    44088
+   1c   0.9889    0.0070    40084    40533
+   2c   0.9868    0.0070    39824    40357
+   3c   0.9889    0.0069    40552    41008
+   4c   0.9908    0.0069    41425    41809
+   1d   0.9887    0.0070    40039    40498
+   2d   0.9873    0.0070    39214    39717
+   3d   0.9865    0.0069    40925    41486
+   4d   0.9883    0.0068    42085    42583
+  SC16 =  77  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9895    0.0082    29031    29339
+   2a   0.9887    0.0083    28275    28599
+   3a   0.9893    0.0081    29510    29830
+   4a   0.9902    0.0080    30308    30607
+   1b   0.9889    0.0082    28597    28918
+   2b   0.9888    0.0084    27365    27675
+   3b   0.9892    0.0083    28387    28696
+   4b   0.9913    0.0082    29412    29669
+   1c   0.9897    0.0082    28659    28957
+   2c   0.9885    0.0083    27926    28250
+   3c   0.9902    0.0082    29138    29426
+   4c   0.9909    0.0080    30831    31113
+   1d   0.9895    0.0081    29622    29937
+   2d   0.9879    0.0084    27787    28126
+   3d   0.9900    0.0082    28675    28964
+   4d   0.9913    0.0080    30536    30804
+  SC16 =  78  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9807    0.0068    41199    42008
+   2a   0.9786    0.0069    39864    40735
+   3a   0.9783    0.0068    41363    42279
+   4a   0.9815    0.0067    42769    43577
+   1b   0.9813    0.0068    40825    41605
+   2b   0.9796    0.0069    39542    40366
+   3b   0.9815    0.0069    40446    41209
+   4b   0.9841    0.0068    41689    42362
+   1c   0.9788    0.0068    41347    42244
+   2c   0.9795    0.0069    40231    41075
+   3c   0.9788    0.0068    41565    42465
+   4c   0.9810    0.0066    44415    45276
+   1d   0.9796    0.0067    41707    42576
+   2d   0.9801    0.0069    39722    40528
+   3d   0.9816    0.0068    40700    41462
+   4d   0.9816    0.0067    43022    43830
+  SC16 =  79  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9796    0.0081    29157    29765
+   2a   0.9781    0.0081    28678    29321
+   3a   0.9811    0.0081    28751    29304
+   4a   0.9783    0.0080    29750    30410
+   1b   0.9782    0.0081    29080    29728
+   2b   0.9762    0.0082    27948    28628
+   3b   0.9796    0.0080    29739    30358
+   4b   0.9796    0.0079    30395    31029
+   1c   0.9787    0.0080    29856    30505
+   2c   0.9787    0.0081    28613    29235
+   3c   0.9800    0.0081    29214    29811
+   4c   0.9804    0.0079    30742    31356
+   1d   0.9781    0.0080    29903    30572
+   2d   0.9780    0.0082    28276    28912
+   3d   0.9772    0.0080    29570    30259
+   4d   0.9788    0.0078    31546    32229
+  SC16 =  80  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9850    0.0082    28399    28832
+   2a   0.9834    0.0083    27891    28363
+   3a   0.9859    0.0082    28386    28791
+   4a   0.9878    0.0081    29272    29634
+   1b   0.9858    0.0083    28122    28528
+   2b   0.9833    0.0084    26978    27437
+   3b   0.9846    0.0082    28345    28789
+   4b   0.9872    0.0081    29293    29674
+   1c   0.9841    0.0082    28684    29148
+   2c   0.9828    0.0083    27674    28159
+   3c   0.9851    0.0083    27958    28381
+   4c   0.9869    0.0081    29810    30206
+   1d   0.9848    0.0081    29321    29774
+   2d   0.9844    0.0083    27631    28069
+   3d   0.9836    0.0082    28503    28979
+   4d   0.9851    0.0079    30577    31038
+  SC16 =  81  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9856    0.0086    25820    26198
+   2a   0.9868    0.0089    24696    25027
+   3a   0.9892    0.0088    25195    25469
+   4a   0.9892    0.0087    25786    26068
+   1b   0.9858    0.0087    25638    26007
+   2b   0.9863    0.0089    24125    24459
+   3b   0.9873    0.0086    25929    26262
+   4b   0.9852    0.0085    26940    27344
+   1c   0.9885    0.0089    24530    24816
+   2c   0.9873    0.0089    24570    24886
+   3c   0.9888    0.0088    25000    25282
+   4c   0.9907    0.0087    26103    26347
+   1d   0.9887    0.0088    25076    25362
+   2d   0.9857    0.0089    24340    24694
+   3d   0.9864    0.0087    25796    26152
+   4d   0.9871    0.0086    26010    26350
+  SC16 =  82  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9841    0.0069    40146    40794
+   2a   0.9830    0.0070    39206    39884
+   3a   0.9854    0.0070    39525    40112
+   4a   0.9874    0.0069    40762    41284
+   1b   0.9857    0.0069    40187    40771
+   2b   0.9851    0.0071    38243    38823
+   3b   0.9835    0.0069    40009    40679
+   4b   0.9850    0.0068    41450    42082
+   1c   0.9835    0.0069    40251    40927
+   2c   0.9843    0.0070    39042    39663
+   3c   0.9845    0.0069    39990    40621
+   4c   0.9869    0.0068    41955    42512
+   1d   0.9819    0.0069    40635    41386
+   2d   0.9843    0.0070    38912    39532
+   3d   0.9831    0.0069    40428    41121
+   4d   0.9825    0.0067    42663    43422
+  SC16 =  83  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9845    0.0068    41429    42083
+   2a   0.9830    0.0070    39286    39965
+   3a   0.9838    0.0069    40092    40752
+   4a   0.9850    0.0068    42013    42652
+   1b   0.9840    0.0068    41266    41939
+   2b   0.9837    0.0070    39174    39824
+   3b   0.9842    0.0068    41108    41768
+   4b   0.9841    0.0067    43388    44088
+   1c   0.9851    0.0069    39928    40533
+   2c   0.9817    0.0069    39617    40357
+   3c   0.9849    0.0069    40390    41008
+   4c   0.9863    0.0068    41238    41809
+   1d   0.9849    0.0069    39885    40498
+   2d   0.9843    0.0070    39092    39717
+   3d   0.9828    0.0069    40774    41486
+   4d   0.9859    0.0068    41981    42583
+  SC16 =  84  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9808    0.0086    25720    26224
+   2a   0.9780    0.0088    24341    24889
+   3a   0.9834    0.0086    26105    26547
+   4a   0.9796    0.0085    26333    26881
+   1b   0.9835    0.0087    25276    25699
+   2b   0.9816    0.0088    24571    25032
+   3b   0.9790    0.0087    25134    25674
+   4b   0.9866    0.0086    25969    26323
+   1c   0.9851    0.0086    25755    26145
+   2c   0.9831    0.0088    24727    25152
+   3c   0.9821    0.0086    25863    26335
+   4c   0.9813    0.0083    27641    28169
+   1d   0.9845    0.0086    26120    26532
+   2d   0.9835    0.0088    24676    25090
+   3d   0.9805    0.0086    25495    26003
+   4d   0.9847    0.0084    27010    27430
+  SC16 =  85  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9888    0.0069    41438    41908
+   2a   0.9879    0.0070    40115    40608
+   3a   0.9885    0.0068    41522    42007
+   4a   0.9890    0.0066    44029    44518
+   1b   0.9876    0.0068    41537    42059
+   2b   0.9883    0.0070    39491    39958
+   3b   0.9908    0.0069    40708    41086
+   4b   0.9895    0.0068    42674    43128
+   1c   0.9893    0.0070    40236    40672
+   2c   0.9883    0.0070    39383    39849
+   3c   0.9887    0.0068    41897    42374
+   4c   0.9901    0.0067    43244    43677
+   1d   0.9891    0.0069    40750    41197
+   2d   0.9878    0.0070    39719    40209
+   3d   0.9901    0.0069    40752    41159
+   4d   0.9902    0.0068    42110    42525
+  SC16 =  86  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9870    0.0081    29757    30148
+   2a   0.9883    0.0082    28618    28958
+   3a   0.9879    0.0082    29167    29524
+   4a   0.9886    0.0079    30975    31331
+   1b   0.9887    0.0081    29794    30133
+   2b   0.9876    0.0083    28184    28538
+   3b   0.9895    0.0082    29207    29518
+   4b   0.9907    0.0080    30271    30555
+   1c   0.9883    0.0082    28908    29251
+   2c   0.9887    0.0083    28282    28606
+   3c   0.9883    0.0081    29827    30181
+   4c   0.9916    0.0079    31116    31380
+   1d   0.9900    0.0082    29326    29622
+   2d   0.9884    0.0082    28561    28897
+   3d   0.9898    0.0082    29081    29380
+   4d   0.9911    0.0081    29889    30158
+  SC16 =  87  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9876    0.0070    39769    40270
+   2a   0.9875    0.0071    38079    38561
+   3a   0.9886    0.0070    39740    40198
+   4a   0.9869    0.0068    41835    42391
+   1b   0.9878    0.0070    39538    40027
+   2b   0.9871    0.0071    37936    38432
+   3b   0.9885    0.0071    38827    39280
+   4b   0.9896    0.0069    40393    40817
+   1c   0.9887    0.0071    38383    38822
+   2c   0.9864    0.0071    37878    38399
+   3c   0.9892    0.0070    39772    40205
+   4c   0.9899    0.0068    41641    42065
+   1d   0.9890    0.0070    39290    39728
+   2d   0.9880    0.0071    38495    38964
+   3d   0.9888    0.0071    38862    39302
+   4d   0.9912    0.0070    40375    40733
+  SC16 =  88  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9804    0.0068    41090    41910
+   2a   0.9788    0.0068    40437    41311
+   3a   0.9787    0.0067    41989    42905
+   4a   0.9814    0.0067    42708    43517
+   1b   0.9806    0.0068    41179    41993
+   2b   0.9786    0.0069    39836    40706
+   3b   0.9822    0.0068    40809    41550
+   4b   0.9830    0.0068    41869    42592
+   1c   0.9790    0.0067    41953    42853
+   2c   0.9778    0.0068    40547    41467
+   3c   0.9776    0.0067    42426    43398
+   4c   0.9781    0.0065    45386    46401
+   1d   0.9781    0.0067    42368    43318
+   2d   0.9798    0.0069    40395    41227
+   3d   0.9794    0.0068    41421    42293
+   4d   0.9810    0.0066    43810    44658
+  SC16 =  91  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9804    0.0068    41402    42230
+   2a   0.9765    0.0068    40606    41582
+   3a   0.9816    0.0068    41040    41811
+   4a   0.9818    0.0067    42427    43215
+   1b   0.9812    0.0068    41383    42176
+   2b   0.9785    0.0069    39515    40383
+   3b   0.9787    0.0068    41492    42394
+   4b   0.9812    0.0067    43091    43918
+   1c   0.9774    0.0067    41827    42794
+   2c   0.9782    0.0069    40267    41164
+   3c   0.9801    0.0068    41027    41862
+   4c   0.9801    0.0066    43673    44562
+   1d   0.9801    0.0067    42176    43031
+   2d   0.9789    0.0068    40435    41308
+   3d   0.9774    0.0067    42377    43359
+   4d   0.9771    0.0065    44859    45908
+  SC16 =  92  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9879    0.0082    28816    29168
+   2a   0.9876    0.0084    27450    27795
+   3a   0.9881    0.0082    28799    29147
+   4a   0.9877    0.0080    30498    30878
+   1b   0.9885    0.0082    28573    28904
+   2b   0.9881    0.0084    27702    28037
+   3b   0.9899    0.0083    28461    28752
+   4b   0.9905    0.0081    29726    30012
+   1c   0.9891    0.0084    27799    28104
+   2c   0.9892    0.0084    27657    27958
+   3c   0.9880    0.0082    28644    28991
+   4c   0.9903    0.0080    30138    30432
+   1d   0.9896    0.0082    28735    29037
+   2d   0.9891    0.0084    27680    27984
+   3d   0.9903    0.0083    28303    28580
+   4d   0.9912    0.0082    29272    29532
+  SC16 =  93  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9847    0.0069    40699    41330
+   2a   0.9845    0.0070    39280    39898
+   3a   0.9220    0.0066    37984    41198
+   4a   0.9864    0.0067    43034    43629
+   1b   0.9851    0.0069    40603    41216
+   2b   0.9841    0.0071    38495    39117
+   3b   0.9873    0.0070    39577    40088
+   4b   0.9866    0.0068    41684    42250
+   1c   0.9859    0.0070    39523    40090
+   2c   0.9863    0.0070    39423    39972
+   3c   0.9865    0.0069    40785    41343
+   4c   0.9865    0.0068    42213    42790
+   1d   0.9857    0.0069    40010    40589
+   2d   0.9854    0.0070    38880    39456
+   3d   0.9859    0.0070    39559    40124
+   4d   0.9875    0.0069    40866    41385
+  SC16 =  94  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9784    0.0086    25543    26106
+   2a   0.9800    0.0087    25262    25777
+   3a   0.9850    0.0087    25523    25912
+   4a   0.9835    0.0086    26036    26473
+   1b   0.9817    0.0087    25195    25664
+   2b   0.9768    0.0089    24039    24610
+   3b   0.9788    0.0086    25589    26143
+   4b   0.9821    0.0085    26527    27010
+   1c   0.9822    0.0086    25724    26191
+   2c   0.9802    0.0087    24951    25455
+   3c   0.9778    0.0087    25174    25746
+   4c   0.9810    0.0084    26777    27297
+   1d   0.9808    0.0086    25943    26452
+   2d   0.9775    0.0088    24528    25093
+   3d   0.9799    0.0086    25872    26404
+   4d   0.9783    0.0083    27161    27764
+  SC16 =  96  the min number of hits =  4
+  pixel    eff     d_eff    n_hit    n_tot
+   1a   0.9865    0.0068    42151    42727
+   2a   0.9874    0.0070    40062    40574
+   3a   0.9890    0.0069    41115    41571
+   4a   0.9895    0.0068    42296    42743
+   1b   0.9874    0.0068    41364    41890
+   2b   0.9864    0.0070    39479    40022
+   3b   0.9872    0.0068    41528    42067
+   4b   0.9870    0.0067    43749    44326
+   1c   0.9898    0.0069    40533    40952
+   2c   0.9873    0.0069    40513    41034
+   3c   0.9898    0.0069    40908    41329
+   4c   0.9903    0.0068    42150    42562
+   1d   0.9882    0.0069    40903    41392
+   2d   0.9879    0.0070    39634    40121
+   3d   0.9862    0.0068    41810    42396
+   4d   0.9893    0.0067    43167    43635
+
diff --git a/demo/muon-monitor/src/jvmTest/kotlin/ru/mipt/npm/muon/monitor/GeometryTest.kt b/demo/muon-monitor/src/jvmTest/kotlin/ru/mipt/npm/muon/monitor/GeometryTest.kt
new file mode 100644
index 00000000..7c718e23
--- /dev/null
+++ b/demo/muon-monitor/src/jvmTest/kotlin/ru/mipt/npm/muon/monitor/GeometryTest.kt
@@ -0,0 +1,17 @@
+package ru.mipt.npm.muon.monitor
+
+import org.junit.Test
+import kotlin.test.assertTrue
+
+class GeometryTest {
+
+    @Test
+    fun testLoadGeometry(){
+        assertTrue { readMonitorConfig().isNotBlank() }
+    }
+
+    @Test
+    fun testLoadModel(){
+        assertTrue { Monitor.pixels.isNotEmpty() }
+    }
+}
\ No newline at end of file
diff --git a/demo/spatial-showcase/build.gradle.kts b/demo/spatial-showcase/build.gradle.kts
new file mode 100644
index 00000000..46d63633
--- /dev/null
+++ b/demo/spatial-showcase/build.gradle.kts
@@ -0,0 +1,39 @@
+import org.openjfx.gradle.JavaFXOptions
+
+plugins {
+    id("scientifik.mpp")
+    id("org.openjfx.javafxplugin")
+    id("application")
+}
+
+kotlin {
+
+    jvm {
+        withJava()
+    }
+
+    js {
+        browser {
+            webpackTask {
+                sourceMaps = false
+            }
+        }
+    }
+
+    sourceSets {
+        commonMain {
+            dependencies {
+                api(project(":dataforge-vis-spatial"))
+                api(project(":dataforge-vis-spatial-gdml"))
+            }
+        }
+    }
+}
+
+application {
+    mainClassName = "hep.dataforge.vis.spatial.demo.FXDemoAppKt"
+}
+
+configure<JavaFXOptions> {
+    modules("javafx.controls")
+}
\ No newline at end of file
diff --git a/demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vis/spatial/demo/demo.kt b/demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vis/spatial/demo/demo.kt
new file mode 100644
index 00000000..ddb92491
--- /dev/null
+++ b/demo/spatial-showcase/src/commonMain/kotlin/hep/dataforge/vis/spatial/demo/demo.kt
@@ -0,0 +1,173 @@
+package hep.dataforge.vis.spatial.demo
+
+import hep.dataforge.meta.buildMeta
+import hep.dataforge.meta.invoke
+import hep.dataforge.names.toName
+import hep.dataforge.output.OutputManager
+import hep.dataforge.vis.common.Colors
+import hep.dataforge.vis.common.VisualObject
+import hep.dataforge.vis.spatial.*
+import hep.dataforge.vis.spatial.specifications.CanvasSpec
+import kotlinx.coroutines.*
+import kotlin.math.PI
+import kotlin.math.cos
+import kotlin.math.sin
+import kotlin.random.Random
+
+
+fun OutputManager.demo(name: String, title: String = name, block: VisualGroup3D.() -> Unit) {
+    val meta = buildMeta {
+        "title" put title
+    }
+    val output = get(VisualObject::class, name.toName(), meta = meta)
+    output.render(action = block)
+}
+
+val canvasOptions = CanvasSpec {
+    minSize = 500
+    axes {
+        size = 500.0
+        visible = true
+    }
+    camera {
+        distance = 600.0
+        latitude = PI/6
+    }
+}
+
+fun OutputManager.showcase() {
+    demo("shapes", "Basic shapes") {
+        box(100.0, 100.0, 100.0) {
+            z = -110.0
+        }
+        sphere(50.0) {
+            x = 110
+            detail = 16
+        }
+        tube(50, height = 10, innerRadius = 25, angle = PI) {
+            y = 110
+            detail = 16
+            rotationX = PI / 4
+        }
+    }
+
+    demo("dynamic", "Dynamic properties") {
+        val group = group {
+            box(100, 100, 100) {
+                z = 110.0
+            }
+
+            box(100, 100, 100) {
+                visible = false
+                x = 110.0
+                //override color for this cube
+                color(1530)
+
+                GlobalScope.launch(Dispatchers.Main) {
+                    while (isActive) {
+                        delay(500)
+                        visible = !(visible ?: false)
+                    }
+                }
+            }
+        }
+
+        GlobalScope.launch(Dispatchers.Main) {
+            val random = Random(111)
+            while (isActive) {
+                delay(1000)
+                group.color(random.nextInt(0, Int.MAX_VALUE))
+            }
+        }
+    }
+
+    demo("rotation", "Rotations") {
+        box(100, 100, 100)
+        group {
+            x = 200
+            rotationY = PI / 4
+            box(100, 100, 100) {
+                rotationZ = PI / 4
+                color(Colors.red)
+            }
+        }
+    }
+
+    demo("extrude", "extruded shape") {
+        extrude {
+            shape {
+                polygon(8, 50)
+            }
+            for (i in 0..100) {
+                layer(i * 5, 20 * sin(2 * PI / 100 * i), 20 * cos(2 * PI / 100 * i))
+            }
+            color(Colors.teal)
+            rotationX = -PI / 2
+        }
+    }
+
+    demo("lines", "Track / line segments") {
+        sphere(100) {
+            detail = 32
+            opacity = 0.4
+            color(Colors.blue)
+        }
+        repeat(20) {
+            polyline(Point3D(100, 100, 100), Point3D(-100, -100, -100)) {
+                thickness = 3.0
+                rotationX = it * PI2 / 20
+                color(Colors.green)
+                //rotationY = it * PI2 / 20
+            }
+        }
+    }
+
+    demo("text", "Box with a label") {
+        box(100, 100, 50) {
+            opacity = 0.3
+        }
+        label("Hello, world!", fontSize = 12) {
+            z = 26
+        }
+    }
+}
+
+fun OutputManager.showcaseCSG() {
+    demo("CSG.simple", "CSG operations") {
+        composite(CompositeType.UNION) {
+            box(100, 100, 100) {
+                z = 50
+            }
+            sphere(50)
+            material {
+                color(Colors.lightgreen)
+                opacity = 0.3f
+            }
+        }
+        composite(CompositeType.INTERSECT) {
+            y = 300
+            box(100, 100, 100) {
+                z = 50
+            }
+            sphere(50)
+            color(Colors.red)
+        }
+        composite(CompositeType.SUBTRACT) {
+            y = -300
+            box(100, 100, 100) {
+                z = 50
+            }
+            sphere(50)
+            color(Colors.blue)
+        }
+    }
+
+    demo("CSG.custom", "CSG with manually created object") {
+        intersect {
+            tube(60, 10) {
+                detail = 64
+            }
+            box(100, 100, 100)
+        }
+    }
+}
\ No newline at end of file
diff --git a/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoApp.kt b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoApp.kt
new file mode 100644
index 00000000..7d9adc3e
--- /dev/null
+++ b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoApp.kt
@@ -0,0 +1,56 @@
+package hep.dataforge.vis.spatial.demo
+
+import hep.dataforge.js.Application
+import hep.dataforge.js.startApplication
+import hep.dataforge.vis.spatial.three.MeshThreeFactory.Companion.EDGES_ENABLED_KEY
+import hep.dataforge.vis.spatial.three.MeshThreeFactory.Companion.WIREFRAME_ENABLED_KEY
+import hep.dataforge.vis.spatial.x
+import hep.dataforge.vis.spatial.y
+import kotlinx.coroutines.GlobalScope
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.isActive
+import kotlinx.coroutines.launch
+import kotlin.browser.document
+import kotlin.random.Random
+
+private class ThreeDemoApp : Application {
+
+    override fun start(state: Map<String, Any>) {
+
+        val element = document.getElementById("canvas") ?: error("Element with id 'canvas' not found on page")
+
+        ThreeDemoGrid(element).run {
+            showcase()
+            showcaseCSG()
+//            demo("dynamicBox", "Dancing boxes") {
+//                val boxes = (-10..10).flatMap { i ->
+//                    (-10..10).map { j ->
+//                        varBox(10, 10, 0, name = "cell_${i}_${j}") {
+//                            x = i * 10
+//                            y = j * 10
+//                            value = 128
+//                            setProperty(EDGES_ENABLED_KEY, false)
+//                            setProperty(WIREFRAME_ENABLED_KEY, false)
+//                        }
+//                    }
+//                }
+//                GlobalScope.launch {
+//                    while (isActive) {
+//                        delay(500)
+//                        boxes.forEach { box ->
+//                            box.value = (box.value + Random.nextInt(-15, 15)).coerceIn(0..255)
+//                        }
+//                    }
+//                }
+//            }
+        }
+
+
+    }
+
+    override fun dispose() = emptyMap<String, Any>()//mapOf("lines" put presenter.dispose())
+}
+
+fun main() {
+    startApplication(::ThreeDemoApp)
+}
\ No newline at end of file
diff --git a/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoGrid.kt b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoGrid.kt
new file mode 100644
index 00000000..44a71b5a
--- /dev/null
+++ b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoGrid.kt
@@ -0,0 +1,66 @@
+package hep.dataforge.vis.spatial.demo
+
+import hep.dataforge.context.Global
+import hep.dataforge.meta.Meta
+import hep.dataforge.meta.get
+import hep.dataforge.meta.invoke
+import hep.dataforge.meta.string
+import hep.dataforge.names.Name
+import hep.dataforge.output.OutputManager
+import hep.dataforge.output.Renderer
+import hep.dataforge.vis.common.VisualObject
+import hep.dataforge.vis.spatial.specifications.AxesSpec
+import hep.dataforge.vis.spatial.specifications.CameraSpec
+import hep.dataforge.vis.spatial.specifications.CanvasSpec
+import hep.dataforge.vis.spatial.three.ThreeCanvas
+import hep.dataforge.vis.spatial.three.ThreePlugin
+import hep.dataforge.vis.spatial.three.output
+import kotlinx.html.dom.append
+import kotlinx.html.dom.create
+import kotlinx.html.h2
+import kotlinx.html.hr
+import kotlinx.html.id
+import kotlinx.html.js.div
+import kotlinx.html.span
+import org.w3c.dom.Element
+import kotlin.browser.document
+import kotlin.dom.clear
+import kotlin.reflect.KClass
+
+class ThreeDemoGrid(element: Element, meta: Meta = Meta.EMPTY) : OutputManager {
+
+    private val gridRoot = document.create.div("row")
+    private val outputs: MutableMap<Name, ThreeCanvas> = HashMap()
+
+    private val three = Global.plugins.fetch(ThreePlugin)
+
+    init {
+        element.clear()
+        element.append(gridRoot)
+    }
+
+    @Suppress("UNCHECKED_CAST")
+    override fun <T : Any> get(type: KClass<out T>, name: Name, stage: Name, meta: Meta): Renderer<T> {
+
+        return outputs.getOrPut(name) {
+            if (type != VisualObject::class) error("Supports only DisplayObject")
+            lateinit var output: ThreeCanvas
+            //TODO calculate cell width here using jquery
+            gridRoot.append {
+                span("border") {
+                    div("col-6") {
+                        div { id = "output-$name" }.also {
+                            output = three.output(it, canvasOptions)
+                            //output.attach(it)
+                        }
+                        hr()
+                        h2 { +(meta["title"].string ?: name.toString()) }
+                    }
+                }
+            }
+
+            output
+        } as Renderer<T>
+    }
+}
+
diff --git a/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/VariableBox.kt b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/VariableBox.kt
new file mode 100644
index 00000000..20540777
--- /dev/null
+++ b/demo/spatial-showcase/src/jsMain/kotlin/hep/dataforge/vis/spatial/demo/VariableBox.kt
@@ -0,0 +1,104 @@
+@file:UseSerializers(Point3DSerializer::class)
+
+package hep.dataforge.vis.spatial.demo
+
+import hep.dataforge.meta.int
+import hep.dataforge.meta.number
+import hep.dataforge.names.plus
+import hep.dataforge.names.startsWith
+import hep.dataforge.vis.common.getProperty
+import hep.dataforge.vis.common.setProperty
+import hep.dataforge.vis.spatial.*
+import hep.dataforge.vis.spatial.VisualObject3D.Companion.GEOMETRY_KEY
+import hep.dataforge.vis.spatial.demo.VariableBoxThreeFactory.Z_SIZE_KEY
+import hep.dataforge.vis.spatial.three.*
+import hep.dataforge.vis.spatial.three.ThreeMaterials.getMaterial
+import info.laht.threekt.core.BufferGeometry
+import info.laht.threekt.core.Object3D
+import info.laht.threekt.geometries.BoxBufferGeometry
+import info.laht.threekt.objects.Mesh
+import kotlinx.serialization.UseSerializers
+import kotlin.math.max
+import kotlin.reflect.KClass
+
+internal var VisualObject3D.variableZSize: Number
+    get() = getProperty(Z_SIZE_KEY, false).number ?: 0f
+    set(value) {
+        setProperty(Z_SIZE_KEY, value)
+    }
+
+internal var VisualObject3D.value: Int
+    get() = getProperty("value", false).int ?: 0
+    set(value) {
+        setProperty("value", value)
+        val size = value.toFloat() / 255f * 20f
+        scaleZ = size
+        z = -size / 2
+
+        val b = max(0, 255 - value)
+        val r = max(0, value - 255)
+        val g = 255 - b - r
+        color(r.toUByte(), g.toUByte(), b.toUByte())
+    }
+
+fun VisualGroup3D.varBox(
+    xSize: Number,
+    ySize: Number,
+    zSize: Number,
+    name: String = "",
+    action: VisualObject3D.() -> Unit = {}
+) = CustomThreeVisualObject(VariableBoxThreeFactory).apply {
+    scaleX = xSize
+    scaleY = ySize
+    scaleZ = zSize
+}.apply(action).also { set(name, it) }
+
+private object VariableBoxThreeFactory : ThreeFactory<VisualObject3D> {
+    val X_SIZE_KEY = GEOMETRY_KEY + "xSize"
+    val Y_SIZE_KEY = GEOMETRY_KEY + "ySize"
+    val Z_SIZE_KEY = GEOMETRY_KEY + "zSize"
+
+    override val type: KClass<in VisualObject3D> get() = VisualObject3D::class
+
+    override fun invoke(obj: VisualObject3D): Object3D {
+        val xSize = obj.getProperty(X_SIZE_KEY, false).number?.toDouble() ?: 1.0
+        val ySize = obj.getProperty(Y_SIZE_KEY, false).number?.toDouble() ?: 1.0
+        val zSize = obj.getProperty(Z_SIZE_KEY, false).number?.toDouble() ?: 1.0
+        val geometry = BoxBufferGeometry(1, 1, 1)
+
+        //JS sometimes tries to pass Geometry as BufferGeometry
+        @Suppress("USELESS_IS_CHECK") if (geometry !is BufferGeometry) error("BufferGeometry expected")
+
+        val mesh = Mesh(geometry, getMaterial(obj)).apply {
+            applyEdges(obj)
+            applyWireFrame(obj)
+
+            //set position for mesh
+            updatePosition(obj)
+
+            layers.enable(obj.layer)
+            children.forEach {
+                it.layers.enable(obj.layer)
+            }
+        }
+
+        mesh.scale.set(xSize, ySize, zSize)
+
+        //add listener to object properties
+        obj.onPropertyChange(this) { name, _, _ ->
+            when {
+//                name.startsWith(GEOMETRY_KEY) -> {
+//                    val newXSize = obj.getProperty(X_SIZE_KEY, false).number?.toDouble() ?: 1.0
+//                    val newYSize = obj.getProperty(Y_SIZE_KEY, false).number?.toDouble() ?: 1.0
+//                    val newZSize = obj.getProperty(Z_SIZE_KEY, false).number?.toDouble() ?: 1.0
+//                    mesh.scale.set(newXSize, newYSize, newZSize)
+//                    mesh.updateMatrix()
+//                }
+                name.startsWith(MeshThreeFactory.WIREFRAME_KEY) -> mesh.applyWireFrame(obj)
+                name.startsWith(MeshThreeFactory.EDGES_KEY) -> mesh.applyEdges(obj)
+                else -> mesh.updateProperty(obj, name)
+            }
+        }
+        return mesh
+    }
+}
\ No newline at end of file
diff --git a/demo/spatial-showcase/src/jsMain/web/index.html b/demo/spatial-showcase/src/jsMain/web/index.html
new file mode 100644
index 00000000..e76b2dd4
--- /dev/null
+++ b/demo/spatial-showcase/src/jsMain/web/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Three js demo for particle physics</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <script type="text/javascript" src="main.bundle.js"></script>
+</head>
+<body class="testApp">
+<div class="container">
+    <h1>Demo grid</h1>
+</div>
+<div class="container" id="canvas"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/demo/spatial-showcase/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoApp.kt b/demo/spatial-showcase/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoApp.kt
new file mode 100644
index 00000000..109ed1da
--- /dev/null
+++ b/demo/spatial-showcase/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoApp.kt
@@ -0,0 +1,28 @@
+package hep.dataforge.vis.spatial.demo
+
+import hep.dataforge.vis.spatial.gdml.gdml
+import javafx.stage.Stage
+import tornadofx.*
+import java.nio.file.Paths
+
+class FXDemoApp : App(FXDemoGrid::class) {
+
+    val view: FXDemoGrid by inject()
+
+    override fun start(stage: Stage) {
+        super.start(stage)
+
+        stage.width = 600.0
+        stage.height = 600.0
+
+        view.showcase()
+        view.demo("gdml", "gdml-cubes") {
+            gdml(Paths.get("D:\\Work\\Projects\\gdml.kt\\gdml-source\\cubes.gdml"))
+            //setProperty(Material3D.MATERIAL_WIREFRAME_KEY, true)
+        }
+    }
+}
+
+fun main() {
+    launch<FXDemoApp>()
+}
\ No newline at end of file
diff --git a/demo/spatial-showcase/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoGrid.kt b/demo/spatial-showcase/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoGrid.kt
new file mode 100644
index 00000000..9357e5de
--- /dev/null
+++ b/demo/spatial-showcase/src/jvmMain/kotlin/hep/dataforge/vis/spatial/demo/FXDemoGrid.kt
@@ -0,0 +1,43 @@
+package hep.dataforge.vis.spatial.demo
+
+import hep.dataforge.context.Global
+import hep.dataforge.meta.Meta
+import hep.dataforge.meta.buildMeta
+import hep.dataforge.names.Name
+import hep.dataforge.output.OutputManager
+import hep.dataforge.output.Renderer
+import hep.dataforge.vis.common.VisualObject
+import hep.dataforge.vis.spatial.fx.FX3DPlugin
+import hep.dataforge.vis.spatial.fx.FXCanvas3D
+import hep.dataforge.vis.spatial.specifications.AxesSpec
+import hep.dataforge.vis.spatial.specifications.CanvasSpec
+import javafx.collections.FXCollections
+import javafx.scene.Parent
+import javafx.scene.control.Tab
+import tornadofx.*
+import kotlin.reflect.KClass
+
+class FXDemoGrid : View(title = "DataForge-vis FX demo"), OutputManager {
+    private val outputs = FXCollections.observableHashMap<Name, FXCanvas3D>()
+
+    override val root: Parent = borderpane {
+        center = tabpane {
+            tabs.bind(outputs) { key: Name, value: FXCanvas3D ->
+                Tab(key.toString(), value.root)
+            }
+        }
+    }
+
+    private val fx3d = Global.plugins.fetch(FX3DPlugin)
+
+    @Suppress("UNCHECKED_CAST")
+    override fun <T : Any> get(type: KClass<out T>, name: Name, stage: Name, meta: Meta): Renderer<T> {
+        return outputs.getOrPut(name) {
+            if (type != VisualObject::class) kotlin.error("Supports only DisplayObject")
+            val output = FXCanvas3D(fx3d, canvasOptions)
+
+            output
+        } as Renderer<T>
+    }
+
+}
\ No newline at end of file
diff --git a/gradle/artifactory.gradle b/gradle/artifactory.gradle
deleted file mode 100644
index 12e59642..00000000
--- a/gradle/artifactory.gradle
+++ /dev/null
@@ -1,31 +0,0 @@
-apply plugin: "com.jfrog.artifactory"
-
-artifactory {
-    def artifactory_user = project.hasProperty('artifactoryUser') ? project.property('artifactoryUser') : ""
-    def artifactory_password = project.hasProperty('artifactoryPassword') ? project.property('artifactoryPassword') : ""
-    def artifactory_contextUrl = 'http://npm.mipt.ru:8081/artifactory'
-    
-    contextUrl = artifactory_contextUrl   //The base Artifactory URL if not overridden by the publisher/resolver
-    publish {
-        repository {
-            repoKey = 'gradle-dev-local'
-            username = artifactory_user
-            password = artifactory_password
-        }
-
-        defaults {
-            publications('jvm', 'js', 'kotlinMultiplatform', 'metadata')
-            publishBuildInfo = false
-            publishArtifacts = true
-            publishPom = true
-            publishIvy = false
-        }
-    }
-    resolve {
-        repository {
-            repoKey = 'gradle-dev'
-            username = artifactory_user
-            password = artifactory_password
-        }
-    }
-}
\ No newline at end of file
diff --git a/gradle/bintray.gradle b/gradle/bintray.gradle
deleted file mode 100644
index 8da83c86..00000000
--- a/gradle/bintray.gradle
+++ /dev/null
@@ -1,85 +0,0 @@
-apply plugin: 'com.jfrog.bintray'
-
-def vcs = "https://github.com/mipt-npm/kmath"
-
-def pomConfig = {
-    licenses {
-        license {
-            name "The Apache Software License, Version 2.0"
-            url "http://www.apache.org/licenses/LICENSE-2.0.txt"
-            distribution "repo"
-        }
-    }
-    developers {
-        developer {
-            id "MIPT-NPM"
-            name "MIPT nuclear physics methods laboratory"
-            organization "MIPT"
-            organizationUrl "http://npm.mipt.ru"
-        }
-    }
-    scm {
-        url vcs
-    }
-}
-
-project.ext.configureMavenCentralMetadata = { pom ->
-    def root = asNode()
-    root.appendNode('name', project.name)
-    root.appendNode('description', project.description)
-    root.appendNode('url', vcs)
-    root.children().last() + pomConfig
-}
-
-project.ext.configurePom = pomConfig
-
-
-// Configure publishing
-publishing {
-    repositories {
-        maven {
-            url = "https://bintray.com/mipt-npm/scientifik"
-        }
-    }
-
-    // Process each publication we have in this project
-    publications.all { publication ->
-        // apply changes to pom.xml files, see pom.gradle
-        pom.withXml(configureMavenCentralMetadata)
-
-
-    }
-}
-
-bintray {
-    user = project.hasProperty('bintrayUser') ? project.property('bintrayUser') : System.getenv('BINTRAY_USER')
-    key = project.hasProperty('bintrayApiKey') ? project.property('bintrayApiKey') : System.getenv('BINTRAY_API_KEY')
-    publish = true
-    override = true // for multi-platform Kotlin/Native publishing
-
-    pkg {
-        userOrg = "mipt-npm"
-        repo = "scientifik"
-        name = "scientifik.kmath"
-        issueTrackerUrl = "https://github.com/mipt-npm/kmath/issues"
-        licenses = ['Apache-2.0']
-        vcsUrl = vcs
-        version {
-            name = project.version
-            vcsTag = project.version
-            released = new Date()
-        }
-    }
-}
-
-bintrayUpload.dependsOn publishToMavenLocal
-
-// This is for easier debugging of bintray uploading problems
-bintrayUpload.doFirst {
-    publications = project.publishing.publications.findAll {
-        !it.name.contains('-test') && it.name != 'kotlinMultiplatform'
-    }.collect {
-        println("Uploading artifact '$it.groupId:$it.artifactId:$it.version' from publication '$it.name'")
-        it.name//https://github.com/bintray/gradle-bintray-plugin/issues/256
-    }
-}
\ No newline at end of file
diff --git a/gradle/wrapper/gradle-wrapper.jar b/gradle/wrapper/gradle-wrapper.jar
index 5c2d1cf0..cc4fdc29 100644
Binary files a/gradle/wrapper/gradle-wrapper.jar and b/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
index b0acbdcd..94920145 100644
--- a/gradle/wrapper/gradle-wrapper.properties
+++ b/gradle/wrapper/gradle-wrapper.properties
@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.5-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.0.1-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/gradlew b/gradlew
index 8e25e6c1..2fe81a7d 100644
--- a/gradlew
+++ b/gradlew
@@ -125,8 +125,8 @@ if $darwin; then
     GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
 fi
 
-# For Cygwin, switch paths to Windows format before running java
-if $cygwin ; then
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
     APP_HOME=`cygpath --path --mixed "$APP_HOME"`
     CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
     JAVACMD=`cygpath --unix "$JAVACMD"`
@@ -154,19 +154,19 @@ if $cygwin ; then
         else
             eval `echo args$i`="\"$arg\""
         fi
-        i=$((i+1))
+        i=`expr $i + 1`
     done
     case $i in
-        (0) set -- ;;
-        (1) set -- "$args0" ;;
-        (2) set -- "$args0" "$args1" ;;
-        (3) set -- "$args0" "$args1" "$args2" ;;
-        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
-        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
     esac
 fi
 
@@ -175,14 +175,9 @@ save () {
     for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
     echo " "
 }
-APP_ARGS=$(save "$@")
+APP_ARGS=`save "$@"`
 
 # Collect all arguments for the java command, following the shell quoting and substitution rules
 eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
 
-# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
-if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
-  cd "$(dirname "$0")"
-fi
-
 exec "$JAVACMD" "$@"
diff --git a/settings.gradle.kts b/settings.gradle.kts
index 1c7412a3..7dbf2794 100644
--- a/settings.gradle.kts
+++ b/settings.gradle.kts
@@ -5,6 +5,7 @@ pluginManagement {
         gradlePluginPortal()
         maven("https://kotlin.bintray.com/kotlinx")
         maven("https://dl.bintray.com/kotlin/kotlin-eap")
+        maven("https://dl.bintray.com/mipt-npm/dataforge")
         maven("https://dl.bintray.com/mipt-npm/scientifik")
         maven("https://dl.bintray.com/mipt-npm/dev")
     }
@@ -12,13 +13,7 @@ pluginManagement {
     resolutionStrategy {
         eachPlugin {
             when (requested.id.id) {
-                "kotlinx-atomicfu" -> useModule("org.jetbrains.kotlinx:atomicfu-gradle-plugin:${requested.version}")
-                "kotlin-multiplatform" -> useModule("org.jetbrains.kotlin:kotlin-gradle-plugin:${requested.version}")
-                "org.jetbrains.kotlin.jvm" -> useModule("org.jetbrains.kotlin:kotlin-gradle-plugin:${requested.version}")
-                "org.jetbrains.kotlin.js" -> useModule("org.jetbrains.kotlin:kotlin-gradle-plugin:${requested.version}")
                 "kotlin-dce-js" -> useModule("org.jetbrains.kotlin:kotlin-gradle-plugin:${requested.version}")
-                "kotlin2js" -> useModule("org.jetbrains.kotlin:kotlin-gradle-plugin:${requested.version}")
-                "org.jetbrains.kotlin.frontend" -> useModule("org.jetbrains.kotlin:kotlin-frontend-plugin:${requested.version}")
                 "scientifik.mpp", "scientifik.publish", "scientifik.jvm", "scientifik.js" -> useModule("scientifik:gradle-tools:${requested.version}")
                 "org.openjfx.javafxplugin" -> useModule("org.openjfx:javafx-plugin:${requested.version}")
             }
@@ -26,16 +21,18 @@ pluginManagement {
     }
 }
 
-enableFeaturePreview("GRADLE_METADATA")
+//enableFeaturePreview("GRADLE_METADATA")
 
 rootProject.name = "dataforge-vis"
 
 include(
     ":dataforge-vis-common",
-    ":dataforge-vis-fx",
+//    ":wrappers",
     ":dataforge-vis-spatial",
     ":dataforge-vis-spatial-gdml",
-    ":spatial-js-demo"
+    ":demo:spatial-showcase",
+    ":demo:gdml",
+    ":demo:muon-monitor"
 )
 
 //if(file("../dataforge-core").exists()) {
diff --git a/spatial-js-demo/build.gradle.kts b/spatial-js-demo/build.gradle.kts
deleted file mode 100644
index d44b204e..00000000
--- a/spatial-js-demo/build.gradle.kts
+++ /dev/null
@@ -1,19 +0,0 @@
-plugins {
-    id("scientifik.js")
-    //id("kotlin-dce-js")
-}
-
-dependencies {
-    api(project(":dataforge-vis-spatial"))
-    api("info.laht.threekt:threejs-wrapper:0.106-npm-3")
-    testCompile(kotlin("test-js"))
-}
-
-//kotlin{
-//    sourceSets["main"].dependencies{
-//        implementation(npm("three","0.106.2"))
-//        implementation(npm("@hi-level/three-csg"))
-//        implementation(npm("style-loader"))
-//        implementation(npm("element-resize-event"))
-//    }
-//}
diff --git a/spatial-js-demo/src/main/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoApp.kt b/spatial-js-demo/src/main/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoApp.kt
deleted file mode 100644
index 496ec8fe..00000000
--- a/spatial-js-demo/src/main/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoApp.kt
+++ /dev/null
@@ -1,143 +0,0 @@
-package hep.dataforge.vis.spatial.demo
-
-import hep.dataforge.context.ContextBuilder
-import hep.dataforge.vis.common.Colors
-import hep.dataforge.vis.hmr.ApplicationBase
-import hep.dataforge.vis.hmr.startApplication
-import hep.dataforge.vis.spatial.*
-import kotlinx.coroutines.GlobalScope
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.isActive
-import kotlinx.coroutines.launch
-import kotlin.math.PI
-import kotlin.math.cos
-import kotlin.math.sin
-import kotlin.random.Random
-
-
-private class ThreeDemoApp : ApplicationBase() {
-
-    override val stateKeys: List<String> = emptyList()
-
-    override fun start(state: Map<String, Any>) {
-
-        //TODO replace by optimized builder after dataforge 0.1.3-dev-8
-        val context = ContextBuilder("three-demo").build()
-
-        context.plugins.load(ThreeDemoGrid()).run {
-            demo("shapes", "Basic shapes") {
-                box(100.0, 100.0, 100.0) {
-                    z = 110.0
-                }
-                sphere(50.0) {
-                    x = 110
-                    detail = 16
-                }
-                tube(50, height = 10, innerRadius = 25, angle = PI) {
-                    y = 110
-                    detail = 16
-                    rotationX = PI / 4
-                }
-            }
-
-            demo("dynamic", "Dynamic properties") {
-                val group = group {
-                    box(100, 100, 100) {
-                        z = 110.0
-                    }
-
-                    box(100, 100, 100) {
-                        visible = false
-                        x = 110.0
-                        //override color for this cube
-                        color(1530)
-
-                        GlobalScope.launch {
-                            while (isActive) {
-                                delay(500)
-                                visible = !(visible ?: false)
-                            }
-                        }
-                    }
-                }
-
-                GlobalScope.launch {
-                    val random = Random(111)
-                    while (isActive) {
-                        delay(1000)
-                        group.color(random.nextInt(0, Int.MAX_VALUE))
-                    }
-                }
-            }
-
-            demo("rotation", "Rotations") {
-                box(100, 100, 100)
-                group {
-                    x = 200
-                    rotationY = PI / 4
-                    box(100, 100, 100) {
-                        rotationZ = PI / 4
-                        color(Colors.red)
-                    }
-                }
-            }
-
-            demo("extrude", "extruded shape") {
-                extrude {
-                    shape {
-                        polygon(8, 50)
-                    }
-                    for (i in 0..100) {
-                        layer(i * 5, 20 * sin(2 * PI / 100 * i), 20 * cos(2 * PI / 100 * i))
-                    }
-                    color(Colors.teal)
-                }
-            }
-
-            demo("CSG.simple", "CSG operations") {
-                composite(CompositeType.UNION) {
-                    box(100, 100, 100) {
-                        z = 50
-                    }
-                    sphere(50)
-                    material {
-                        "color" to Colors.lightgreen
-                        "opacity" to 0.3
-                    }
-                }
-                composite(CompositeType.INTERSECT) {
-                    y = 300
-                    box(100, 100, 100) {
-                        z = 50
-                    }
-                    sphere(50)
-                    color(Colors.red)
-                }
-                composite(CompositeType.SUBTRACT) {
-                    y = -300
-                    box(100, 100, 100) {
-                        z = 50
-                    }
-                    sphere(50)
-                    color(Colors.blue)
-                }
-            }
-            demo("CSG.custom", "CSG with manually created object") {
-                intersect {
-                    box(100, 100, 100)
-                    tube(60, 10) {
-                        detail = 180
-                    }
-                }
-            }
-        }
-
-
-    }
-
-    override fun dispose() = emptyMap<String, Any>()//mapOf("lines" to presenter.dispose())
-}
-
-fun main() {
-    startApplication(::ThreeDemoApp)
-}
\ No newline at end of file
diff --git a/spatial-js-demo/src/main/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoGrid.kt b/spatial-js-demo/src/main/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoGrid.kt
deleted file mode 100644
index 17c8e330..00000000
--- a/spatial-js-demo/src/main/kotlin/hep/dataforge/vis/spatial/demo/ThreeDemoGrid.kt
+++ /dev/null
@@ -1,89 +0,0 @@
-package hep.dataforge.vis.spatial.demo
-
-import hep.dataforge.context.AbstractPlugin
-import hep.dataforge.context.Context
-import hep.dataforge.context.PluginFactory
-import hep.dataforge.context.PluginTag
-import hep.dataforge.meta.Meta
-import hep.dataforge.meta.buildMeta
-import hep.dataforge.meta.get
-import hep.dataforge.meta.string
-import hep.dataforge.names.Name
-import hep.dataforge.names.toName
-import hep.dataforge.output.Output
-import hep.dataforge.output.OutputManager
-import hep.dataforge.vis.common.VisualObject
-import hep.dataforge.vis.spatial.VisualGroup3D
-import hep.dataforge.vis.spatial.render
-import hep.dataforge.vis.spatial.three.ThreeOutput
-import hep.dataforge.vis.spatial.three.ThreePlugin
-import hep.dataforge.vis.spatial.three.output
-import kotlinx.html.dom.append
-import kotlinx.html.dom.create
-import kotlinx.html.h2
-import kotlinx.html.hr
-import kotlinx.html.id
-import kotlinx.html.js.div
-import kotlinx.html.span
-import kotlin.browser.document
-import kotlin.dom.clear
-import kotlin.reflect.KClass
-
-class ThreeDemoGrid(meta: Meta) : AbstractPlugin(meta), OutputManager {
-    override val tag: PluginTag get() = Companion.tag
-
-    private val gridRoot = document.create.div("row")
-    private val outputs: MutableMap<Name, ThreeOutput> = HashMap()
-
-    override fun dependsOn(): List<PluginFactory<*>> = listOf(ThreePlugin)
-
-    override fun attach(context: Context) {
-        super.attach(context)
-        val elementId = meta["elementID"].string ?: "canvas"
-        val element = document.getElementById(elementId) ?: error("Element with id $elementId not found on page")
-        element.clear()
-        element.append(gridRoot)
-    }
-
-    @Suppress("UNCHECKED_CAST")
-    override fun <T : Any> get(type: KClass<out T>, name: Name, stage: Name, meta: Meta): Output<T> {
-        val three = context.plugins.get<ThreePlugin>()!!
-
-        return outputs.getOrPut(name) {
-            if (type != VisualObject::class) error("Supports only DisplayObject")
-            val output = three.output(meta = meta) {
-                "axis" to {
-                    "size" to 500
-                }
-            }
-            //TODO calculate cell width here using jquery
-            gridRoot.append {
-                span("border") {
-                    div("col-6") {
-                        output.attach(div { id = "output-$name" }) { 500 }
-                        hr()
-                        h2 { +(meta["title"].string ?: name.toString()) }
-                    }
-                }
-            }
-
-            output
-        } as Output<T>
-    }
-
-    companion object : PluginFactory<ThreeDemoGrid> {
-        override val tag: PluginTag = PluginTag(group = "hep.dataforge", name = "vis.js.spatial.demo")
-
-        override val type: KClass<out ThreeDemoGrid> = ThreeDemoGrid::class
-
-        override fun invoke(meta: Meta): ThreeDemoGrid = ThreeDemoGrid(meta)
-    }
-}
-
-fun ThreeDemoGrid.demo(name: String, title: String = name, block: VisualGroup3D.() -> Unit) {
-    val meta = buildMeta {
-        "title" to title
-    }
-    val output = get<VisualObject>(VisualObject::class, name.toName(), meta = meta)
-    output.render(action = block)
-}
\ No newline at end of file
diff --git a/spatial-js-demo/src/main/web/index.html b/spatial-js-demo/src/main/web/index.html
deleted file mode 100644
index ef65002b..00000000
--- a/spatial-js-demo/src/main/web/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Three js demo for particle physics</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-    <script type="text/javascript" src="main.bundle.js"></script>
-</head>
-<body class="testApp">
-<!--
-<div class="container" id="drop_zone" data-toggle="tooltip" data-placement="right"
-     title="Для загрузки данных в текстовом формате, надо перетащить файл сюда">
-    Загрузить данные
-    <br/>
-    (перетащить файл сюда)
-</div>
--->
-<div class="container">
-    <h1>Demo grid</h1>
-</div>
-<div class="container" id="canvas"></div>
-
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-        crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
-        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
-        crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
-        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
-        crossorigin="anonymous"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/wrappers/build.gradle.kts b/wrappers/build.gradle.kts
new file mode 100644
index 00000000..0d79fcc0
--- /dev/null
+++ b/wrappers/build.gradle.kts
@@ -0,0 +1,23 @@
+plugins {
+    id("scientifik.js")
+    //id("kotlin-dce-js")
+}
+
+dependencies {
+    api(project(":dataforge-vis-common"))
+
+    testCompile(kotlin("test-js"))
+}
+
+kotlin{
+    sourceSets["main"].apply{
+        dependencies{
+            api(npm("style-loader"))
+//            api(npm("inspire-tree","6.0.1"))
+//            api(npm("inspire-tree-dom","4.0.6"))
+            api(npm("jsoneditor"))
+            api(npm("dat.gui"))
+            //api("org.jetbrains:kotlin-extensions:1.0.1-pre.83-kotlin-1.3.50")
+        }
+    }
+}
diff --git a/wrappers/src/main/kotlin/dat.kt b/wrappers/src/main/kotlin/dat.kt
new file mode 100644
index 00000000..7c56c20a
--- /dev/null
+++ b/wrappers/src/main/kotlin/dat.kt
@@ -0,0 +1,102 @@
+@file:Suppress(
+    "INTERFACE_WITH_SUPERCLASS",
+    "OVERRIDING_FINAL_MEMBER",
+    "RETURN_TYPE_MISMATCH_ON_OVERRIDE",
+    "CONFLICTING_OVERLOADS",
+    "EXTERNAL_DELEGATION"
+)
+@file:JsModule("dat.gui")
+@file:JsNonModule
+
+package hep.dataforge.vis.spatial.editor
+
+import org.w3c.dom.HTMLElement
+
+external interface GUIParams {
+    var autoPlace: Boolean? get() = definedExternally; set(value) = definedExternally
+    var closed: Boolean? get() = definedExternally; set(value) = definedExternally
+    var closeOnTop: Boolean? get() = definedExternally; set(value) = definedExternally
+    var hideable: Boolean? get() = definedExternally; set(value) = definedExternally
+    var load: Any? get() = definedExternally; set(value) = definedExternally
+    var name: String? get() = definedExternally; set(value) = definedExternally
+    var preset: String? get() = definedExternally; set(value) = definedExternally
+    var width: Number? get() = definedExternally; set(value) = definedExternally
+}
+
+external open class GUI(option: GUIParams? = definedExternally /* null */) {
+    open var __controllers: Array<GUIController>
+    open var __folders: Array<GUI>
+    open var domElement: HTMLElement
+    open fun add(
+        target: Any,
+        propName: String,
+        min: Number? = definedExternally /* null */,
+        max: Number? = definedExternally /* null */,
+        step: Number? = definedExternally /* null */
+    ): GUIController
+
+    open fun add(target: Any, propName: String, status: Boolean): GUIController
+    open fun add(target: Any, propName: String, items: Array<String>): GUIController
+    open fun add(target: Any, propName: String, items: Array<Number>): GUIController
+    open fun add(target: Any, propName: String, items: Any): GUIController
+    open fun addColor(target: Any, propName: String): GUIController
+    open fun remove(controller: GUIController)
+    open fun destroy()
+    open fun addFolder(propName: String): GUI
+    open fun removeFolder(subFolder: GUI)
+    open fun open()
+    open fun close()
+    open fun hide()
+    open fun show()
+    open fun remember(target: Any, vararg additionalTargets: Any)
+    open fun getRoot(): GUI
+    open fun getSaveObject(): Any
+    open fun save()
+    open fun saveAs(presetName: String)
+    open fun revert(gui: GUI)
+    open fun listen(controller: GUIController)
+    open fun updateDisplay()
+    open var parent: GUI
+    open var scrollable: Boolean
+    open var autoPlace: Boolean
+    open var preset: String
+    open var width: Number
+    open var name: String
+    open var closed: Boolean
+    open var load: Any
+    open var useLocalStorage: Boolean
+
+    companion object {
+        var CLASS_AUTO_PLACE: String
+        var CLASS_AUTO_PLACE_CONTAINER: String
+        var CLASS_MAIN: String
+        var CLASS_CONTROLLER_ROW: String
+        var CLASS_TOO_TALL: String
+        var CLASS_CLOSED: String
+        var CLASS_CLOSE_BUTTON: String
+        var CLASS_CLOSE_TOP: String
+        var CLASS_CLOSE_BOTTOM: String
+        var CLASS_DRAG: String
+        var DEFAULT_WIDTH: Number
+        var TEXT_CLOSED: String
+        var TEXT_OPEN: String
+    }
+}
+
+external open class GUIController {
+    open fun destroy()
+    open var onChange: (value: Any? /* = null */) -> GUIController
+    open var onFinishChange: (value: Any? /* = null */) -> GUIController
+    open fun setValue(value: Any): GUIController
+    open fun getValue(): Any
+    open fun updateDisplay(): GUIController
+    open fun isModified(): Boolean
+    open fun min(n: Number): GUIController
+    open fun max(n: Number): GUIController
+    open fun step(n: Number): GUIController
+    open fun fire(): GUIController
+    open fun options(option: Any): GUIController
+    open fun name(s: String): GUIController
+    open fun listen(): GUIController
+    open fun remove(): GUIController
+}
\ No newline at end of file
diff --git a/wrappers/src/main/kotlin/eventemitter2.kt b/wrappers/src/main/kotlin/eventemitter2.kt
new file mode 100644
index 00000000..36b925f2
--- /dev/null
+++ b/wrappers/src/main/kotlin/eventemitter2.kt
@@ -0,0 +1,65 @@
+@file:Suppress(
+    "INTERFACE_WITH_SUPERCLASS",
+    "OVERRIDING_FINAL_MEMBER",
+    "RETURN_TYPE_MISMATCH_ON_OVERRIDE",
+    "CONFLICTING_OVERLOADS",
+    "EXTERNAL_DELEGATION"
+)
+@file:JsModule("eventemitter2")
+@file: JsNonModule
+
+package hep.dataforge.vis.spatial.editor
+
+import kotlin.js.Promise
+
+//typealias eventNS = Array<String>
+
+external interface ConstructorOptions {
+    var wildcard: Boolean? get() = definedExternally; set(value) = definedExternally
+    var delimiter: String? get() = definedExternally; set(value) = definedExternally
+    var newListener: Boolean? get() = definedExternally; set(value) = definedExternally
+    var maxListeners: Number? get() = definedExternally; set(value) = definedExternally
+    var verboseMemoryLeak: Boolean? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface EventAndListener {
+    @nativeInvoke
+    operator fun invoke(event: String, vararg values: Any)
+
+    @nativeInvoke
+    operator fun invoke(event: Array<String>, vararg values: Any)
+}
+
+external open class EventEmitter2(options: ConstructorOptions? = definedExternally /* null */) {
+    open fun emit(event: String, vararg values: Any): Boolean
+    open fun emit(event: Array<String>, vararg values: Any): Boolean
+    open fun emitAsync(event: String, vararg values: Any): Promise<Array<Any>>
+    open fun emitAsync(event: Array<String>, vararg values: Any): Promise<Array<Any>>
+    open fun addListener(event: String, listener: Function<*>): EventEmitter2 /* this */
+    open fun on(event: String, listener: Function<*>): EventEmitter2 /* this */
+    open fun on(event: Array<String>, listener: Function<*>): EventEmitter2 /* this */
+    open fun prependListener(event: String, listener: Function<*>): EventEmitter2 /* this */
+    open fun prependListener(event: Array<String>, listener: Function<*>): EventEmitter2 /* this */
+    open fun once(event: String, listener: Function<*>): EventEmitter2 /* this */
+    open fun once(event: Array<String>, listener: Function<*>): EventEmitter2 /* this */
+    open fun prependOnceListener(event: String, listener: Function<*>): EventEmitter2 /* this */
+    open fun prependOnceListener(event: Array<String>, listener: Function<*>): EventEmitter2 /* this */
+    open fun many(event: String, timesToListen: Number, listener: Function<*>): EventEmitter2 /* this */
+    open fun many(event: Array<String>, timesToListen: Number, listener: Function<*>): EventEmitter2 /* this */
+    open fun prependMany(event: String, timesToListen: Number, listener: Function<*>): EventEmitter2 /* this */
+    open fun prependMany(event: Array<String>, timesToListen: Number, listener: Function<*>): EventEmitter2 /* this */
+    open fun onAny(listener: EventAndListener): EventEmitter2 /* this */
+    open fun prependAny(listener: EventAndListener): EventEmitter2 /* this */
+    open fun offAny(listener: Function<*>): EventEmitter2 /* this */
+    open fun removeListener(event: String, listener: Function<*>): EventEmitter2 /* this */
+    open fun removeListener(event: Array<String>, listener: Function<*>): EventEmitter2 /* this */
+    open fun off(event: String, listener: Function<*>): EventEmitter2 /* this */
+    open fun removeAllListeners(event: String? = definedExternally /* null */): EventEmitter2 /* this */
+    open fun removeAllListeners(event: Array<String>? = definedExternally /* null */): EventEmitter2 /* this */
+    open fun setMaxListeners(n: Number)
+    open fun eventNames(): Array<String>
+    open fun listeners(event: String): Array<Function<*>>
+    open fun listeners(event: Array<String>): Array<Function<*>>
+    open fun listenersAny(): Array<Function<*>>
+    open fun removeAllListeners(): EventEmitter2 /* this */
+}
\ No newline at end of file
diff --git a/wrappers/src/main/kotlin/inspire-tree-dom.kt b/wrappers/src/main/kotlin/inspire-tree-dom.kt
new file mode 100644
index 00000000..f3e00d08
--- /dev/null
+++ b/wrappers/src/main/kotlin/inspire-tree-dom.kt
@@ -0,0 +1,38 @@
+@file:Suppress(
+    "INTERFACE_WITH_SUPERCLASS",
+    "OVERRIDING_FINAL_MEMBER",
+    "RETURN_TYPE_MISMATCH_ON_OVERRIDE",
+    "CONFLICTING_OVERLOADS",
+    "EXTERNAL_DELEGATION"
+)
+
+package hep.dataforge.vis.spatial.editor
+
+import org.w3c.dom.HTMLElement
+
+external interface DropTargetValidator {
+    @nativeInvoke
+    operator fun invoke(dragNode: TreeNode, targetNode: TreeNode): Boolean
+}
+
+external interface DragAndDrop {
+    var enabled: Boolean? get() = definedExternally; set(value) = definedExternally
+    var validateOn: String? get() = definedExternally; set(value) = definedExternally
+    var validate: DropTargetValidator
+}
+
+external interface DomConfig {
+    var autoLoadMore: Boolean? get() = definedExternally; set(value) = definedExternally
+    var deferredRendering: Boolean? get() = definedExternally; set(value) = definedExternally
+    var dragAndDrop: DragAndDrop? get() = definedExternally; set(value) = definedExternally
+    var nodeHeight: Number? get() = definedExternally; set(value) = definedExternally
+    var showCheckboxes: Boolean? get() = definedExternally; set(value) = definedExternally
+    var dragTargets: Array<String>? get() = definedExternally; set(value) = definedExternally
+    var tabindex: Number? get() = definedExternally; set(value) = definedExternally
+    var target: HTMLElement
+}
+
+
+@JsModule("inspire-tree-dom")
+@JsNonModule
+open external class InspireTreeDOM(tree: Any, opts: DomConfig)
\ No newline at end of file
diff --git a/wrappers/src/main/kotlin/inspire-tree.kt b/wrappers/src/main/kotlin/inspire-tree.kt
new file mode 100644
index 00000000..74887be7
--- /dev/null
+++ b/wrappers/src/main/kotlin/inspire-tree.kt
@@ -0,0 +1,417 @@
+@file:Suppress(
+    "INTERFACE_WITH_SUPERCLASS",
+    "OVERRIDING_FINAL_MEMBER",
+    "RETURN_TYPE_MISMATCH_ON_OVERRIDE",
+    "CONFLICTING_OVERLOADS",
+    "EXTERNAL_DELEGATION",
+    "unused"
+)
+
+package hep.dataforge.vis.spatial.editor
+
+import kotlin.js.Promise
+import kotlin.js.RegExp
+
+external interface NodeIteratee {
+    @nativeInvoke
+    operator fun invoke(node: TreeNode): Any
+}
+
+external interface MatchProcessor {
+    @nativeInvoke
+    operator fun invoke(matches: TreeNodes): Any
+}
+
+external interface SearchMatcher {
+    @nativeInvoke
+    operator fun invoke(query: String, resolve: Any, reject: Any): Any
+}
+
+external interface `T$0` {
+    var add: Boolean? get() = definedExternally; set(value) = definedExternally
+    var edit: Boolean? get() = definedExternally; set(value) = definedExternally
+    var remove: Boolean? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface `T$1` {
+    var resetStateOnRestore: Boolean? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface `T$2` {
+    var limit: Number? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface `T$3` {
+    var matcher: SearchMatcher
+    var matchProcess: MatchProcessor
+}
+
+external interface Selection {
+    var allow: NodeIteratee? get() = definedExternally; set(value) = definedExternally
+    var autoDeselect: Boolean? get() = definedExternally; set(value) = definedExternally
+    var autoSelectChildren: Boolean? get() = definedExternally; set(value) = definedExternally
+    var disableDirectDeselection: Boolean? get() = definedExternally; set(value) = definedExternally
+    var mode: String? get() = definedExternally; set(value) = definedExternally
+    var multiple: Boolean? get() = definedExternally; set(value) = definedExternally
+    var require: Boolean? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface Config {
+    var allowLoadEvents: Array<String>? get() = definedExternally; set(value) = definedExternally
+//    var checkbox: dynamic get() = definedExternally; set(value) = definedExternally
+    var contextMenu: Boolean? get() = definedExternally; set(value) = definedExternally
+    val data: ((node: TreeNode, resolve: (nodes: Array<NodeConfig>) -> Any, reject: (err: Error) -> Any) -> dynamic)? get() = definedExternally
+    var deferredLoading: Boolean? get() = definedExternally; set(value) = definedExternally
+    var editable: Boolean? get() = definedExternally; set(value) = definedExternally
+    var editing: `T$0`? get() = definedExternally; set(value) = definedExternally
+    var nodes: `T$1`? get() = definedExternally; set(value) = definedExternally
+    var pagination: `T$2`? get() = definedExternally; set(value) = definedExternally
+    var renderer: Any? get() = definedExternally; set(value) = definedExternally
+    var search: `T$3`? get() = definedExternally; set(value) = definedExternally
+    var selection: Selection? get() = definedExternally; set(value) = definedExternally
+    var sort: String? get() = definedExternally; set(value) = definedExternally
+    var multiselect: Boolean? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface State {
+    var checked: Boolean? get() = definedExternally; set(value) = definedExternally
+    var collapsed: Boolean? get() = definedExternally; set(value) = definedExternally
+    var draggable: Boolean? get() = definedExternally; set(value) = definedExternally
+    //var `drop-target`: Boolean? get() = definedExternally; set(value) = definedExternally
+    var editable: Boolean? get() = definedExternally; set(value) = definedExternally
+    var focused: Boolean? get() = definedExternally; set(value) = definedExternally
+    var hidden: Boolean? get() = definedExternally; set(value) = definedExternally
+    var indeterminate: Boolean? get() = definedExternally; set(value) = definedExternally
+    var loading: Boolean? get() = definedExternally; set(value) = definedExternally
+    var matched: Boolean? get() = definedExternally; set(value) = definedExternally
+    var removed: Boolean? get() = definedExternally; set(value) = definedExternally
+    var rendered: Boolean? get() = definedExternally; set(value) = definedExternally
+    var selectable: Boolean? get() = definedExternally; set(value) = definedExternally
+    var selected: Boolean? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface InspireTag {
+    var attributes: Any? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface ITree {
+    var a: InspireTag? get() = definedExternally; set(value) = definedExternally
+    var icon: String? get() = definedExternally; set(value) = definedExternally
+    var li: InspireTag? get() = definedExternally; set(value) = definedExternally
+    var state: State? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface NodeConfig {
+    var children: dynamic /* Array<NodeConfig> | true */
+    var id: String? get() = definedExternally; set(value) = definedExternally
+    var text: String
+    @JsName("itree")
+    var itree: ITree? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface Pagination {
+    var limit: Number
+    var total: Number
+}
+
+@JsModule("inspire-tree")
+@JsNonModule
+open external class InspireTree(opts: Config) : EventEmitter2 {
+    constructor(tree: InspireTree)
+    constructor(tree: InspireTree, array: Array<Any>)
+    constructor(tree: InspireTree, array: TreeNodes)
+
+    open fun addNode(node: NodeConfig): TreeNode
+    open fun addNodes(node: Array<NodeConfig>): TreeNodes
+    open fun available(): TreeNodes
+    open fun blur(): TreeNodes
+    open fun blurDeep(): TreeNodes
+    open fun boundingNodes(): Array<TreeNode>
+    open fun canAutoDeselect(): Boolean
+    open fun checked(): TreeNodes
+    open fun clean(): TreeNodes
+    open fun clearSearch(): InspireTree
+    open fun clone(): TreeNodes
+    open fun collapse(): TreeNodes
+    open fun collapsed(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun collapseDeep(): TreeNodes
+    open fun context(): TreeNode
+    open fun copy(
+        dest: InspireTree,
+        hierarchy: Boolean? = definedExternally /* null */,
+        includeState: Boolean? = definedExternally /* null */
+    ): TreeNodes
+
+    open fun createNode(obj: Any): TreeNode
+    open fun deepest(): TreeNodes
+    open fun deselect(): TreeNodes
+    open fun deselectDeep(): TreeNodes
+    open fun disableDeselection(): InspireTree
+    open fun each(iteratee: NodeIteratee): TreeNodes
+    open fun editable(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun editing(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun enableDeselection(): InspireTree
+    open fun expand(): Promise<TreeNodes>
+    open fun expandDeep(): TreeNodes
+    open fun expanded(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun expandParents(): TreeNodes
+    open fun extract(predicate: String): TreeNodes
+    open fun extract(predicate: NodeIteratee): TreeNodes
+    open fun filterBy(predicate: String): TreeNodes
+    open fun filterBy(predicate: NodeIteratee): TreeNodes
+    open fun find(
+        predicate: (node: TreeNode, index: Number? /* = null */, obj: Array<TreeNode>? /* = null */) -> Boolean,
+        thisArg: Any? = definedExternally /* null */
+    ): TreeNode
+
+    open fun first(predicate: (node: TreeNode) -> Boolean): TreeNode
+    open fun flatten(predicate: String): TreeNodes
+    open fun flatten(predicate: NodeIteratee): TreeNodes
+    open fun focused(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun get(index: Number): TreeNode
+    open fun hidden(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun hide(): TreeNodes
+    open fun hideDeep(): TreeNodes
+    open var id: dynamic /* String | Number */
+    open var config: Config
+    open var preventDeselection: Boolean
+    open fun indeterminate(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun insertAt(index: Number, `object`: Any): TreeNode
+    open fun invoke(methods: String): TreeNodes
+    open fun invoke(methods: Array<String>): TreeNodes
+    open fun invokeDeep(methods: String): TreeNodes
+    open fun invokeDeep(methods: Array<String>): TreeNodes
+    open fun isEventMuted(eventName: String): Boolean
+    open fun last(predicate: (node: TreeNode) -> Boolean): TreeNode
+    open fun lastSelectedNode(): TreeNode
+    open fun load(loader: Promise<TreeNodes>): Promise<TreeNodes>
+    open fun loading(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun matched(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun move(index: Number, newIndex: Number, target: TreeNodes): TreeNode
+    open fun mute(events: Array<String>): InspireTree
+    open fun muted(): Boolean
+    open fun node(id: String): TreeNode
+    open fun node(id: Number): TreeNode
+    open fun nodes(ids: Array<String>? = definedExternally /* null */): TreeNodes
+    open fun nodes(ids: Array<Number>? = definedExternally /* null */): TreeNodes
+    open fun pagination(): Pagination
+    open fun recurseDown(iteratee: NodeIteratee): TreeNodes
+    open fun reload(): Promise<TreeNodes>
+    open fun removeAll(): InspireTree
+    open fun removed(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun restore(): TreeNodes
+    open fun restoreDeep(): TreeNodes
+    open fun search(query: String): Promise<TreeNodes>
+    open fun search(query: RegExp): Promise<TreeNodes>
+    open fun search(query: NodeIteratee): Promise<TreeNodes>
+    open fun select(): TreeNodes
+    open fun selectable(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun selectBetween(start: TreeNode, end: TreeNode): InspireTree
+    open fun selectDeep(): TreeNodes
+    open fun selected(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun selectFirstAvailableNode(): TreeNode
+    open fun show(): TreeNodes
+    open fun showDeep(): TreeNodes
+    open fun softRemove(): TreeNodes
+    open fun sortBy(sorter: String): TreeNodes
+    open fun sortBy(sorter: NodeIteratee): TreeNodes
+    open fun state(key: String, `val`: Boolean): TreeNodes
+    open fun stateDeep(key: String, `val`: Boolean): TreeNodes
+    open fun swap(node1: TreeNode, node2: TreeNode): TreeNodes
+    open fun toArray(): Array<Any>
+    open fun toArray(): Array<Any>
+    open fun tree(): InspireTree
+    open fun unmute(events: Array<String>): InspireTree
+    open fun visible(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun nodes(): TreeNodes
+
+    companion object {
+        fun isTreeNode(`object`: Any): Boolean
+        fun isTreeNodes(`object`: Any): Boolean
+    }
+}
+
+open external class TreeNodes(tree: InspireTree) {
+    constructor(tree: InspireTree, array: Array<Any>)
+    constructor(tree: InspireTree, array: TreeNodes)
+
+    open fun addNode(node: NodeConfig): TreeNode
+    open fun available(): TreeNodes
+    open fun blur(): TreeNodes
+    open fun blurDeep(): TreeNodes
+    open fun checked(): TreeNodes
+    open fun clean(): TreeNodes
+    open fun clone(): TreeNodes
+    open fun collapse(): TreeNodes
+    open fun collapsed(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun collapseDeep(): TreeNodes
+    open fun context(): TreeNode
+    open fun copy(
+        dest: InspireTree,
+        hierarchy: Boolean? = definedExternally /* null */,
+        includeState: Boolean? = definedExternally /* null */
+    ): TreeNodes
+
+    open fun deepest(): TreeNodes
+    open fun deselect(): TreeNodes
+    open fun deselectDeep(): TreeNodes
+    open fun each(iteratee: NodeIteratee): TreeNodes
+    open fun editable(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun editing(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun expand(): TreeNodes
+    open fun expandDeep(): Promise<TreeNodes>
+    open fun expanded(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun expandParents(): TreeNodes
+    open fun extract(predicate: String): TreeNodes
+    open fun extract(predicate: NodeIteratee): TreeNodes
+    open fun filterBy(predicate: String): TreeNodes
+    open fun filterBy(predicate: NodeIteratee): TreeNodes
+    open fun find(
+        predicate: (node: TreeNode, index: Number? /* = null */, obj: Array<TreeNode>? /* = null */) -> Boolean,
+        thisArg: Any? = definedExternally /* null */
+    ): TreeNode
+
+    open fun flatten(predicate: String): TreeNodes
+    open fun flatten(predicate: NodeIteratee): TreeNodes
+    open fun focused(full: Boolean? = definedExternally /* null */): TreeNodes
+    operator fun get(index: Number): TreeNode
+    open fun hidden(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun hide(): TreeNodes
+    open fun hideDeep(): TreeNodes
+    open fun indeterminate(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun insertAt(index: Number, `object`: Any): TreeNode
+    open fun invoke(methods: String): TreeNodes
+    open fun invoke(methods: Array<String>): TreeNodes
+    open fun invokeDeep(methods: String): TreeNodes
+    open fun invokeDeep(methods: Array<String>): TreeNodes
+    open fun loading(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun matched(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun move(index: Number, newIndex: Number, target: TreeNodes): TreeNode
+    open fun node(id: String): TreeNode
+    open fun node(id: Number): TreeNode
+    open fun nodes(ids: Array<String>? = definedExternally /* null */): TreeNodes
+    open fun nodes(ids: Array<Number>? = definedExternally /* null */): TreeNodes
+    open fun pagination(): Pagination
+    open fun recurseDown(iteratee: NodeIteratee): TreeNodes
+    open fun removed(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun restore(): TreeNodes
+    open fun restoreDeep(): TreeNodes
+    open fun select(): TreeNodes
+    open fun selectable(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun selectBetween(start: TreeNode, end: TreeNode): InspireTree
+    open fun selectDeep(): TreeNodes
+    open fun selected(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun show(): TreeNodes
+    open fun showDeep(): TreeNodes
+    open fun softRemove(): TreeNodes
+    open fun sortBy(sorter: String): TreeNodes
+    open fun sortBy(sorter: NodeIteratee): TreeNodes
+    open fun state(key: String, `val`: Boolean): TreeNodes
+    open fun stateDeep(key: String, `val`: Boolean): TreeNodes
+    open fun swap(node1: TreeNode, node2: TreeNode): TreeNodes
+    open fun toArray(): Array<Any>
+    open fun tree(): InspireTree
+    open fun visible(full: Boolean? = definedExternally /* null */): TreeNodes
+    open fun nodes(): TreeNodes
+}
+
+open external class TreeNode(tree: InspireTree) {
+    constructor(tree: InspireTree, source: Any, excludeKeys: Array<String>)
+    constructor(tree: InspireTree, source: TreeNode, excludeKeys: Array<String>)
+    constructor(tree: InspireTree, source: Any)
+    constructor(tree: InspireTree, source: TreeNode)
+
+    open fun addChild(node: NodeConfig): TreeNode
+    open fun addChildren(nodes: Array<NodeConfig>): TreeNodes
+    open fun assign(vararg sources: Any?): TreeNode
+    open fun available(): Boolean
+    open fun blur(): TreeNode
+    open fun check(shallow: Boolean? = definedExternally /* null */): TreeNode
+    open fun checked(): Boolean
+    open fun clean(): TreeNode
+    open fun clone(excludeKeys: Array<String>? = definedExternally /* null */): TreeNode
+    open fun collapse(): TreeNode
+    open fun collapsed(): Boolean
+    open var text: String
+    open var id: String
+    open var itree: Any
+    open fun context(): TreeNodes
+    open fun copy(
+        dest: InspireTree,
+        hierarchy: Boolean? = definedExternally /* null */,
+        includeState: Boolean? = definedExternally /* null */
+    ): TreeNode
+
+    open fun copyHierarchy(
+        excludeNode: Boolean? = definedExternally /* null */,
+        includeState: Boolean? = definedExternally /* null */
+    ): TreeNode
+
+    open fun deselect(shallow: Boolean? = definedExternally /* null */): TreeNode
+    open fun editable(): Boolean
+    open fun editing(): Boolean
+    open fun expand(): Promise<TreeNode>
+    open fun expanded(): Boolean
+    open fun expandParents(): TreeNode
+    open fun focus(): TreeNode
+    open fun focused(): Boolean
+    open fun getChildren(): TreeNodes
+    open fun getParent(): TreeNode
+    open fun getParents(): TreeNodes
+    open fun getTextualHierarchy(): Array<String>
+    open fun hasAncestor(): Boolean
+    open fun hasChildren(): Boolean
+    open fun hasOrWillHaveChildren(): Boolean
+    open fun hasParent(): Boolean
+    open fun hasVisibleChildren(): Boolean
+    open fun hidden(): Boolean
+    open fun hide(): TreeNode
+    open fun indeterminate(): Boolean
+    open fun indexPath(): String
+    open fun isFirstRenderable(): Boolean
+    open fun isLastRenderable(): Boolean
+    open fun lastDeepestVisibleChild(): TreeNode
+    open fun loadChildren(): Promise<TreeNodes>
+    open fun loading(): Boolean
+    open fun markDirty(): TreeNode
+    open fun matched(): TreeNodes
+    open fun nextVisibleAncestralSiblingNode(): TreeNode
+    open fun nextVisibleChildNode(): TreeNode
+    open fun nextVisibleNode(): TreeNode
+    open fun nextVisibleSiblingNode(): TreeNode
+    open fun pagination(): Pagination
+    open fun previousVisibleNode(): TreeNode
+    open fun previousVisibleSiblingNode(): TreeNode
+    open fun recurseDown(iteratee: NodeIteratee): TreeNode
+    open fun recurseUp(iteratee: NodeIteratee): TreeNode
+    open fun refreshIndeterminateState(): TreeNode
+    open fun reload(): Promise<TreeNodes>
+    open fun remove(includeState: Boolean? = definedExternally /* null */): Any
+    open fun removed(): Boolean
+    open fun renderable(): Boolean
+    open fun rendered(): Boolean
+    open fun restore(): TreeNode
+    open fun select(shallow: Boolean? = definedExternally /* null */): TreeNode
+    open fun selectable(): Boolean
+    open fun selected(): Boolean
+    open fun set(key: Number, `val`: Any): TreeNode
+    open fun set(key: String, `val`: Any): TreeNode
+    open fun show(): TreeNode
+    open fun softRemove(): TreeNode
+    open fun state(key: Any?, `val`: Boolean? = definedExternally /* null */): dynamic /* Boolean | Any? */
+    open fun state(key: String, `val`: Boolean? = definedExternally /* null */): dynamic /* Boolean | Any? */
+    open fun states(keys: Array<String>, `val`: Boolean): Boolean
+    open fun toggleCheck(): TreeNode
+    open fun toggleCollapse(): TreeNode
+    open fun toggleEditing(): TreeNode
+    open fun toggleSelect(): TreeNode
+    open fun toObject(
+        excludeChildren: Boolean? = definedExternally /* null */,
+        includeState: Boolean? = definedExternally /* null */
+    ): Any
+
+    override fun toString(): String
+    open fun tree(): InspireTree
+    open fun uncheck(shallow: Boolean? = definedExternally /* null */): TreeNode
+    open fun visible(): Boolean
+}
\ No newline at end of file
diff --git a/wrappers/src/main/kotlin/jsoneditor.kt b/wrappers/src/main/kotlin/jsoneditor.kt
new file mode 100644
index 00000000..a83f4b87
--- /dev/null
+++ b/wrappers/src/main/kotlin/jsoneditor.kt
@@ -0,0 +1,185 @@
+@file:Suppress(
+    "INTERFACE_WITH_SUPERCLASS",
+    "OVERRIDING_FINAL_MEMBER",
+    "RETURN_TYPE_MISMATCH_ON_OVERRIDE",
+    "CONFLICTING_OVERLOADS",
+    "EXTERNAL_DELEGATION"
+)
+
+package hep.dataforge.vis.spatial.editor
+
+import org.w3c.dom.HTMLElement
+
+external interface Node {
+    var field: String
+    var value: String? get() = definedExternally; set(value) = definedExternally
+    var path: dynamic
+}
+
+external interface NodeName {
+    var path: Array<String>
+    var type: dynamic /* 'object' | 'array' */
+    var size: Number
+}
+
+external interface ValidationError {
+    var path: dynamic
+    var message: String
+}
+
+external interface Template {
+    var text: String
+    var title: String
+    var className: String? get() = definedExternally; set(value) = definedExternally
+    var field: String
+    var value: Any
+}
+
+external interface `T$6` {
+    var startFrom: Number
+    var options: Array<String>
+}
+
+external interface AutoCompleteOptions {
+    var confirmKeys: Array<Number>? get() = definedExternally; set(value) = definedExternally
+    var caseSensitive: Boolean? get() = definedExternally; set(value) = definedExternally
+//    var getOptions: AutoCompleteOptionsGetter? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface SelectionPosition {
+    var row: Number
+    var column: Number
+}
+
+external interface SerializableNode {
+    var value: Any
+    var path: dynamic
+}
+
+external interface Color {
+    var rgba: Array<Number>
+    var hsla: Array<Number>
+    var rgbString: String
+    var rgbaString: String
+    var hslString: String
+    var hslaString: String
+    var hex: String
+}
+
+//external interface `T$0` {
+//    var field: Boolean
+//    var value: Boolean
+//}
+//
+//external interface `T$1` {
+//    @nativeGetter
+//    operator fun get(key: String): String?
+//
+//    @nativeSetter
+//    operator fun set(key: String, value: String)
+//}
+
+//external interface Languages {
+//    @nativeGetter
+//    operator fun get(lang: String): `T$1`?
+//
+//    @nativeSetter
+//    operator fun set(lang: String, value: `T$1`)
+//}
+
+external interface JSONEditorOptions {
+//    var ace: AceAjax.Ace? get() = definedExternally; set(value) = definedExternally
+//    var ajv: Ajv? get() = definedExternally; set(value) = definedExternally
+    var onChange: (() -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onChangeJSON: ((json: Any) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onChangeText: ((jsonString: String) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onEditable: ((node: Node) -> dynamic)? get() = definedExternally; set(value) = definedExternally
+    var onError: ((error: Error) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onModeChange: ((newMode: dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */, oldMode: dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onNodeName: ((nodeName: NodeName) -> String?)? get() = definedExternally; set(value) = definedExternally
+    var onValidate: ((json: Any) -> dynamic)? get() = definedExternally; set(value) = definedExternally
+    var escapeUnicode: Boolean? get() = definedExternally; set(value) = definedExternally
+    var sortObjectKeys: Boolean? get() = definedExternally; set(value) = definedExternally
+    var history: Boolean? get() = definedExternally; set(value) = definedExternally
+    var mode: dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */
+    var modes: Array<dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */>? get() = definedExternally; set(value) = definedExternally
+    var name: String? get() = definedExternally; set(value) = definedExternally
+    var schema: Any? get() = definedExternally; set(value) = definedExternally
+    var schemaRefs: Any? get() = definedExternally; set(value) = definedExternally
+    var search: Boolean? get() = definedExternally; set(value) = definedExternally
+    var indentation: Number? get() = definedExternally; set(value) = definedExternally
+    var theme: String? get() = definedExternally; set(value) = definedExternally
+    var templates: Array<Template>? get() = definedExternally; set(value) = definedExternally
+    var autocomplete: AutoCompleteOptions? get() = definedExternally; set(value) = definedExternally
+    var mainMenuBar: Boolean? get() = definedExternally; set(value) = definedExternally
+    var navigationBar: Boolean? get() = definedExternally; set(value) = definedExternally
+    var statusBar: Boolean? get() = definedExternally; set(value) = definedExternally
+    var onTextSelectionChange: ((start: SelectionPosition, end: SelectionPosition, text: String) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onSelectionChange: ((start: SerializableNode, end: SerializableNode) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var onEvent: ((node: Node, event: String) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var colorPicker: Boolean? get() = definedExternally; set(value) = definedExternally
+    var onColorPicker: ((parent: HTMLElement, color: String, onChange: (color: Color) -> Unit) -> Unit)? get() = definedExternally; set(value) = definedExternally
+    var timestampTag: Boolean? get() = definedExternally; set(value) = definedExternally
+    var language: String? get() = definedExternally; set(value) = definedExternally
+    //var languages: Languages? get() = definedExternally; set(value) = definedExternally
+    var modalAnchor: HTMLElement? get() = definedExternally; set(value) = definedExternally
+    var enableSort: Boolean? get() = definedExternally; set(value) = definedExternally
+    var enableTransform: Boolean? get() = definedExternally; set(value) = definedExternally
+    var maxVisibleChilds: Number? get() = definedExternally; set(value) = definedExternally
+}
+
+external interface JsonPath {
+    var path: dynamic
+}
+
+external interface EditorSelection {
+    var start: SerializableNode
+    var end: SerializableNode
+}
+
+external interface TextSelection {
+    var start: SelectionPosition
+    var end: SelectionPosition
+    var text: String
+}
+
+@JsModule("jsoneditor")
+@JsNonModule
+external open class JSONEditor(
+    container: HTMLElement,
+    options: JSONEditorOptions? = definedExternally /* null */,
+    json: dynamic = definedExternally /* null */
+) {
+    open fun collapseAll()
+    open fun destroy()
+    open fun expandAll()
+    open fun focus()
+    open fun get(): Any
+    open fun getMode(): dynamic /* 'tree' | 'view' | 'form' | 'code' | 'text' */
+    open fun getName(): String?
+    open fun getNodesByRange(start: JsonPath, end: JsonPath): Array<SerializableNode>
+    open fun getSelection(): EditorSelection
+    open fun getText(): String
+    open fun getTextSelection(): TextSelection
+    open fun refresh()
+    open fun set(json: Any)
+    open fun setMode(mode: String /* 'tree' */)
+    open fun setMode(mode: String /* 'view' */)
+    open fun setMode(mode: String /* 'form' */)
+    open fun setMode(mode: String /* 'code' */)
+    open fun setMode(mode: String /* 'text' */)
+    open fun setName(name: String? = definedExternally /* null */)
+    open fun setSchema(schema: Any?, schemaRefs: Any? = definedExternally /* null */)
+    open fun setSelection(start: JsonPath, end: JsonPath)
+    open fun setText(jsonString: String)
+    open fun setTextSelection(start: SelectionPosition, end: SelectionPosition)
+    open fun update(json: Any)
+    open fun updateText(jsonString: String)
+
+    companion object {
+        var VALID_OPTIONS: Array<String>
+//        var ace: AceAjax.Ace
+//        var Ajv: Ajv
+        var VanillaPicker: Any
+    }
+}
\ No newline at end of file