diff --git a/src/tests/browser/index.html b/src/tests/browser/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..f28af95b2858709af424bf4ff1cbf49396329846
--- /dev/null
+++ b/src/tests/browser/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+ <title>Mol* Browser Test</title>
+ <style>
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+ html, body {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="text/javascript">
+ function urlQueryParameter (id) {
+ if (typeof window === 'undefined') return undefined
+ const a = new RegExp(`${id}=([^&#=]*)`)
+ const m = a.exec(window.location.search)
+ return m ? decodeURIComponent(m[1]) : undefined
+ }
+
+ const name = urlQueryParameter('name')
+ if (name) {
+ const script = document.createElement('script')
+ script.src = name + '.js'
+ document.body.appendChild(script)
+ }
+ </script>
+ </body>
+</html>
\ No newline at end of file
diff --git a/src/tests/browser/render-mesh.ts b/src/tests/browser/render-mesh.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6722814452a39e4803af10838c07d7816e40499a
--- /dev/null
+++ b/src/tests/browser/render-mesh.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import './index.html'
+import { Canvas3D } from 'mol-canvas3d/canvas3d';
+import { MeshBuilder } from 'mol-geo/geometry/mesh/mesh-builder';
+import { Sphere } from 'mol-geo/primitive/sphere';
+import { Mat4 } from 'mol-math/linear-algebra';
+import { Mesh } from 'mol-geo/geometry/mesh/mesh';
+import { Geometry } from 'mol-geo/geometry/geometry';
+import { createMeshRenderObject } from 'mol-gl/render-object';
+import { Representation } from 'mol-repr/representation';
+import { Color } from 'mol-util/color';
+
+const parent = document.getElementById('app')!
+parent.style.width = '100%'
+parent.style.height = '100%'
+
+const canvas = document.createElement('canvas')
+canvas.style.width = '100%'
+canvas.style.height = '100%'
+parent.appendChild(canvas)
+
+const canvas3d = Canvas3D.create(canvas, parent)
+canvas3d.animate()
+
+const builderState = MeshBuilder.createState()
+const t = Mat4.identity()
+const sphere = Sphere(2)
+MeshBuilder.addPrimitive(builderState, t, sphere)
+const mesh = MeshBuilder.getMesh(builderState)
+
+const values = Mesh.createValuesSimple(mesh, {}, Color(0xFF0000))
+const state = Geometry.createRenderableState()
+const renderObject = createMeshRenderObject(values, state)
+const repr = Representation.fromRenderObject('sphere-mesh', renderObject)
+
+canvas3d.add(repr)
+canvas3d.resetCamera()
\ No newline at end of file
diff --git a/src/tests/browser/render-spheres.ts b/src/tests/browser/render-spheres.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bd5bbc08bd582684b088839353ac99eff0598747
--- /dev/null
+++ b/src/tests/browser/render-spheres.ts
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import './index.html'
+import { Canvas3D } from 'mol-canvas3d/canvas3d';
+import { SpheresBuilder } from 'mol-geo/geometry/spheres/spheres-builder';
+import { Geometry } from 'mol-geo/geometry/geometry';
+import { createSpheresRenderObject } from 'mol-gl/render-object';
+import { Representation } from 'mol-repr/representation';
+import { Spheres } from 'mol-geo/geometry/spheres/spheres';
+import { Color } from 'mol-util/color';
+
+const parent = document.getElementById('app')!
+parent.style.width = '100%'
+parent.style.height = '100%'
+
+const canvas = document.createElement('canvas')
+canvas.style.width = '100%'
+canvas.style.height = '100%'
+parent.appendChild(canvas)
+
+const canvas3d = Canvas3D.create(canvas, parent)
+canvas3d.animate()
+
+function spheresRepr() {
+ const spheresBuilder = SpheresBuilder.create(3, 1)
+ spheresBuilder.add(0, 0, 0, 0)
+ spheresBuilder.add(5, 0, 0, 0)
+ spheresBuilder.add(-4, 1, 0, 0)
+ const spheres = spheresBuilder.getSpheres()
+
+ const values = Spheres.createValuesSimple(spheres, {}, Color(0xFF0000), 1)
+ const state = Geometry.createRenderableState()
+ const renderObject = createSpheresRenderObject(values, state)
+ console.log(renderObject)
+ const repr = Representation.fromRenderObject('spheres', renderObject)
+ return repr
+}
+
+canvas3d.add(spheresRepr())
+canvas3d.resetCamera()
\ No newline at end of file
diff --git a/src/tests/browser/text-atlas.ts b/src/tests/browser/text-atlas.ts
new file mode 100644
index 0000000000000000000000000000000000000000..60c0fd7169dc95b6789d2799e5d8d00ab71d7bb5
--- /dev/null
+++ b/src/tests/browser/text-atlas.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import './index.html'
+import { TextAtlas } from 'mol-geo/geometry/text/text-atlas';
+import { printImageData } from 'mol-gl/renderable/util';
+
+function test() {
+ console.time('TextAtlas')
+ const textAtlas = new TextAtlas()
+ console.timeEnd('TextAtlas')
+ const ctx = textAtlas.context
+ const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height)
+ printImageData(imageData)
+}
+
+test();
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 0f85d141c04135fc627cc8855fcab338f179ef88..f4c1b4228046a93a2a19023e752823d9c53a0289 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,7 +2,8 @@ const path = require('path');
const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const CircularDependencyPlugin = require('circular-dependency-plugin');
-module.exports = {
+
+const sharedConfig = {
module: {
rules: [
{
@@ -46,5 +47,26 @@ module.exports = {
],
}),
new MiniCssExtractPlugin({ filename: "app.css" })
- ],
-}
\ No newline at end of file
+ ]
+}
+
+function createEntryPoint(name, dir, out) {
+ return {
+ entry: path.resolve(__dirname, `build/node_modules/${dir}/${name}.js`),
+ output: { filename: `${name}.js`, path: path.resolve(__dirname, `build/${out}`) },
+ ...sharedConfig
+ }
+}
+
+function createApp(name) { return createEntryPoint('index', `apps/${name}`, name) }
+function createBrowserTest(name) { return createEntryPoint(name, 'tests/browser', 'tests') }
+
+module.exports = [
+ createApp('viewer'),
+ createApp('model-server-query'),
+
+ createBrowserTest('text-atlas'),
+ createBrowserTest('render-text'),
+ createBrowserTest('render-spheres'),
+ createBrowserTest('render-mesh')
+]
\ No newline at end of file