Accueil Explorer Aide
Connexion
web
/
TmMolStar
3
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

wip, added 'tests' that run in the browser

Alexander Rose il y a 6 ans
Parent
4332d131ad
commit
b7cf42824d
5 fichiers modifiés avec 169 ajouts et 3 suppressions
Vue séparée Afficher les stats Diff
  1. 38 0
      src/tests/browser/index.html
  2. 42 0
      src/tests/browser/render-mesh.ts
  3. 44 0
      src/tests/browser/render-spheres.ts
  4. 20 0
      src/tests/browser/text-atlas.ts
  5. 25 3
      webpack.config.js

+ 38 - 0
src/tests/browser/index.html
Voir le fichier 

@@ -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>

+ 42 - 0
src/tests/browser/render-mesh.ts
Voir le fichier 

@@ -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()

+ 44 - 0
src/tests/browser/render-spheres.ts
Voir le fichier 

@@ -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()

+ 20 - 0
src/tests/browser/text-atlas.ts
Voir le fichier 

@@ -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();

+ 25 - 3
webpack.config.js
Voir le fichier 

@@ -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" })
 
-    ],
 
-}
 
+    ]
 
+}
 
+
 
+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')
 
+]