finally starting to get the example working

examples/basic.js

@@ -1,8 +1,68 @@
 import * as THREE from "https://esm.sh/three";
 import * as NODE from "https://esm.sh/three/nodes";
+import {global}  from "https://esm.sh/three/nodes";
 import * as PlanetTech from "https://esm.sh/planettech";
+import { nodeFrame }  from "https://esm.sh/three/addons/renderers/webgl-legacy/nodes/WebGLNodes.js";
+import {OrbitControls} from "https://esm.sh/three/addons/controls/OrbitControls.js";
 
-function init(){
+global.set('TSL', NODE);
+
+let scene, camera, renderer,controls,
+rightColorTexture,leftColorTexture,topColorTexture,
+bottomColorTexture,frontColorTexture,backColorTexture,
+rightDisplaceTexture,leftDisplaceTexture,topDisplaceTexture,
+bottomDisplaceTexture,frontDisplaceTexture,backDisplaceTexture
+
+let aspect = window.innerWidth / window.innerHeight;
+let lightVector = new THREE.Vector3(0.0,0.0,1.0)
+let camPos = new THREE.Vector3(0,0,110000*12)
+let backGroundColor = 'white'
+let fov    =  10
+let near   = .01
+let far    =  Number.MAX_SAFE_INTEGER
+let ambientLightParams = {c:0x404040,i:5}
+let directionalLightParams = {c:0xffffff,i:5.5}
+let clock = new THREE.Clock();
+
+function loadTextuers(){
+    rightColorTexture  = new THREE.TextureLoader().load("./textuers/color/right_color_image.png")
+    leftColorTexture   = new THREE.TextureLoader().load("./textuers/color/left_color_image.png")
+    topColorTexture    = new THREE.TextureLoader().load("./textuers/color/top_color_image.png")
+    bottomColorTexture = new THREE.TextureLoader().load("./textuers/color/bottom_color_image.png")
+    frontColorTexture  = new THREE.TextureLoader().load("./textuers/color/front_color_image.png")
+    backColorTexture   = new THREE.TextureLoader().load("./textuers/color/back_color_image.png")
+
+    rightDisplaceTexture  = new THREE.TextureLoader().load("./textuers/displacement/right_displacement_image.png")
+    leftDisplaceTexture   = new THREE.TextureLoader().load("./textuers/displacement/left_displacement_image.png")
+    topDisplaceTexture    = new THREE.TextureLoader().load("./textuers/displacement/top_displacement_image.png")
+    bottomDisplaceTexture = new THREE.TextureLoader().load("./textuers/displacement/bottom_displacement_image.png")
+    frontDisplaceTexture  = new THREE.TextureLoader().load("./textuers/displacement/front_displacement_image.png")
+    backDisplaceTexture   = new THREE.TextureLoader().load("./textuers/displacement/back_displacement_image.png")
+}
+
+
+function setUp(){
+    renderer = new THREE.WebGLRenderer({
+        powerPreference: "high-performance",
+        logarithmicDepthBuffer: true,
+        antialias: true,
+      });
+    renderer.setSize( window.innerWidth, window.innerHeight );
+    renderer.setClearColor(backGroundColor);
+    document.body.appendChild( renderer.domElement );
+
+     scene = new THREE.Scene();
+     camera = new THREE.PerspectiveCamera( fov, aspect, near,  far );
+     camera.position.copy(camPos);
+     controls = new OrbitControls( camera, renderer.domElement );
+    const light = new THREE.AmbientLight( ambientLightParams.c, ambientLightParams.i ); 
+    const directionalLight = new THREE.DirectionalLight( directionalLightParams.c, directionalLightParams.i );
+    directionalLight.position.copy(lightVector)
+    scene.add(directionalLight)
+    scene.add( light );    
+}
+
+function initPlanet(){
     const params = {
         width:            10000,
         height:           10000,
@@ -11,10 +71,10 @@ function init(){
         quadTreeDimensions: 2,
         levels:             1,
         radius:          80000,
-        displacmentScale:  165.,
-        lodDistanceOffset:   6,
+        displacmentScale:  165,
+        lodDistanceOffset:  6,
         material: new NODE.MeshPhysicalNodeMaterial({}),
-        color: () => NODE.vec3(1,0,0),
+        //color: () => NODE.vec3(1,0,0),
       }
 
       let s = new PlanetTech.Sphere(
@@ -33,7 +93,25 @@ function init(){
         params.material,
         params.color,
       )
-      console.log(s)
+
+      s.right .addTexture([rightColorTexture,rightDisplaceTexture],params.displacmentScale,false)
+      s.left  .addTexture([leftColorTexture,leftDisplaceTexture],params.displacmentScale,false)
+      s.top   .addTexture([topColorTexture,topDisplaceTexture],params.displacmentScale,false)
+      s.bottom.addTexture([bottomColorTexture,bottomDisplaceTexture],params.displacmentScale,false)
+      s.front .addTexture([frontColorTexture,frontDisplaceTexture],params.displacmentScale,false)
+      s.back  .addTexture([backColorTexture,backDisplaceTexture],params.displacmentScale,false)
+
+    scene.add( s.sphere );      
 }
 
-init()
+function render() {
+    requestAnimationFrame( render );
+    controls.update(clock.getDelta())
+    renderer.render( scene, camera );
+    nodeFrame.update();
+    };
+
+setUp()
+loadTextuers()
+initPlanet()
+render();

examples/index.html

@@ -5,15 +5,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
 
-    <title>PlaneTTechJS Hello World</title>
+    <title>PlanetTechJS Hello-World</title>
     <script src="./coi-serviceworker.js"></script>
     <script type="importmap">
         {
           "imports": {
             "three": "https://unpkg.com/[email protected]/build/three.module.js", 
             "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/",
             "three/nodes": "https://unpkg.com/[email protected]/examples/jsm/nodes/Nodes.js",
-            "planettech": "https://unpkg.com/planettech"
+            "planettech": "https://unpkg.com/planettech@0.0.8-alpha.0.1.3"
           }
         }
       </script>      

package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "https://miguelmyers8.github.io/PlanetTechJS/examples/",
   "name": "planettech",
-  "version": "0.0.8-alpha.0.1.1",
+  "version": "0.0.8-alpha.0.1.4",
   "description": "Toolkit for creating real 3D planets that can be transtioned from ground to sky.",
   "main": "index.js",
   "type": "module",

src/engine/quad.js

@@ -2,8 +2,8 @@ import * as NODE    from 'three/nodes';
 import * as THREE   from 'three';
 import {QuadTrees}  from './quadtree.js'
 import {norm}       from './utils.js'
-import { QuadWorker } from './utils.js';
-
+import {QuadWorker} from './utils.js';
+import {worker} from './worker'
 
   export class Quad{
     constructor(w,h,ws,hs,d){
@@ -121,7 +121,8 @@ import { QuadWorker } from './utils.js';
         const parentPositionVector = params.parentPositionVector
         const bufferIdx            = arrybuffers.idx
 
-       let promiseWorker =  new QuadWorker(new Worker(new URL('./worker.js', import.meta.url).toString(),{ type: "module" }));
+      let blob = new Blob([worker()], {type: 'application/javascript'}); 
+       let promiseWorker =  new QuadWorker(new Worker(URL.createObjectURL(blob),{ type: "module" }));
       promiseWorker.sendWork({
         parentPositionVector: parentPositionVector,
         positionBuffer: bufferPositionF,

src/engine/worker.js

@@ -1,102 +1,105 @@
 
-import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';
-
-function toSphereSegement(plane,cnt,r) {
-  let center = new THREE.Vector3().copy(cnt);
-  let localCenter = new THREE.Vector3();
-  let v3 = new THREE.Vector3();
-  let v = new THREE.Vector3();
-
-	const u = new THREE.Vector3();   // create once
-	const w = new THREE.Vector3();   // create once
-
-  let p = plane
-    p.worldToLocal(localCenter.copy(center));
-    let pos = p.geometry.attributes.position;
-    for(let i = 0; i < pos.count; i++){
-      v3.fromBufferAttribute(pos, i);
-      p.localToWorld( v3.clone() );
-      u.copy(v3);
-      w.copy(v3);
-      v3.sub(localCenter);
-      v3.normalize().multiplyScalar(r).add(localCenter);
-      pos.setXYZ(i, v3.x, v3.y, v3.z);
-
-      u.x += 0.1;
-      u.sub(localCenter);
-      u.normalize().multiplyScalar(r).add(localCenter);
-
-      w.y += 0.1;
-      w.sub(localCenter);
-      w.normalize().multiplyScalar(r).add(localCenter);
-
-      u.sub(v3).cross(w.sub(v3)).normalize();      
-      p.geometry.attributes.normal.setXYZ(i,u.x,u.y,u.z)
-
-    }
-}
-
-
-
-function doCalculation(data, cb) {
-    let result = null, err = null
+export function worker(){
+  return `
+  import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';
+
+  function toSphereSegement(plane,cnt,r) {
+    let center = new THREE.Vector3().copy(cnt);
+    let localCenter = new THREE.Vector3();
+    let v3 = new THREE.Vector3();
+    let v = new THREE.Vector3();
+
+    const u = new THREE.Vector3();   // create once
+    const w = new THREE.Vector3();   // create once
+
+    let p = plane
+      p.worldToLocal(localCenter.copy(center));
+      let pos = p.geometry.attributes.position;
+      for(let i = 0; i < pos.count; i++){
+        v3.fromBufferAttribute(pos, i);
+        p.localToWorld( v3.clone() );
+        u.copy(v3);
+        w.copy(v3);
+        v3.sub(localCenter);
+        v3.normalize().multiplyScalar(r).add(localCenter);
+        pos.setXYZ(i, v3.x, v3.y, v3.z);
+
+        u.x += 0.1;
+        u.sub(localCenter);
+        u.normalize().multiplyScalar(r).add(localCenter);
+    
+        w.y += 0.1;
+        w.sub(localCenter);
+        w.normalize().multiplyScalar(r).add(localCenter);
 
-let wh = data.parentPositionVector[data.parentPositionVector.length - 1];
+        u.sub(v3).cross(w.sub(v3)).normalize();      
+        p.geometry.attributes.normal.setXYZ(i,u.x,u.y,u.z)
 
-//console.log(wh)
+      }
+  }
 
-const geometry = new THREE.PlaneGeometry( wh, wh );
-const material = new THREE.MeshBasicMaterial( );
-const parent = new THREE.Mesh( geometry, material );
-parent.position.set(...data.parentPositionVector)
 
-if (data.side=='right'){
-    parent.rotation.y =  Math.PI/2;
-}else if(data.side=='left'){
-    parent.rotation.y =  -Math.PI/2;
-}else if(data.side=='top'){
-    parent.rotation.x = -Math.PI/2;
-}else if(data.side=='bottom'){
-    parent.rotation.x =  Math.PI/2;
-}else if(data.side=='front'){
-    //pass
-}else if(data.side=='back'){
-    parent.rotation.y =  Math.PI;
-}
-
-    var arrp = new Float32Array(data.positionBuffer);
-    var arrn = new Float32Array(data.normalBuffer);
 
-    let f2 =  JSON.parse("[" + data.positionStr + "]")
-    let f2n = JSON.parse("[" + data.normalStr + "]")
+  function doCalculation(data, cb) {
+      let result = null, err = null
 
-    let f3 = Float32Array.from(f2)
-    let f3n = Float32Array.from(f2n)
+  let wh = data.parentPositionVector[data.parentPositionVector.length - 1];
 
-    let geoCore = new THREE.BufferGeometry()
-    geoCore.setAttribute( 'position', new THREE.Float32BufferAttribute( f3, 3 ) );
-    geoCore.setAttribute( 'normal', new THREE.Float32BufferAttribute( f3n, 3 ) );
-   // geoCore.translate(...data.positionVector)
-
-    let m = new THREE.Mesh(geoCore,new THREE.Material())
-    m.position.set(...data.positionVector)
-    parent.add(m)
+  //console.log(wh)
 
-    toSphereSegement(m,new THREE.Vector3(...data.center),data.radius)
-    arrp.set(geoCore.attributes.position.array)
-    arrn.set(geoCore.attributes.normal.array)
+  const geometry = new THREE.PlaneGeometry( wh, wh );
+  const material = new THREE.MeshBasicMaterial( );
+  const parent = new THREE.Mesh( geometry, material );
+  parent.position.set(...data.parentPositionVector)
 
-    result = 'complete'
-    cb(err, result)
+  if (data.side=='right'){
+      parent.rotation.y =  Math.PI/2;
+  }else if(data.side=='left'){
+      parent.rotation.y =  -Math.PI/2;
+  }else if(data.side=='top'){
+      parent.rotation.x = -Math.PI/2;
+  }else if(data.side=='bottom'){
+      parent.rotation.x =  Math.PI/2;
+  }else if(data.side=='front'){
+      //pass
+  }else if(data.side=='back'){
+      parent.rotation.y =  Math.PI;
   }
+      
+      var arrp = new Float32Array(data.positionBuffer);
+      var arrn = new Float32Array(data.normalBuffer);
+
+      let f2 =  JSON.parse("[" + data.positionStr + "]")
+      let f2n = JSON.parse("[" + data.normalStr + "]")
+
+      let f3 = Float32Array.from(f2)
+      let f3n = Float32Array.from(f2n)
+
+      let geoCore = new THREE.BufferGeometry()
+      geoCore.setAttribute( 'position', new THREE.Float32BufferAttribute( f3, 3 ) );
+      geoCore.setAttribute( 'normal', new THREE.Float32BufferAttribute( f3n, 3 ) );
+    // geoCore.translate(...data.positionVector)
+      
+      let m = new THREE.Mesh(geoCore,new THREE.Material())
+      m.position.set(...data.positionVector)
+      parent.add(m)
+
+      toSphereSegement(m,new THREE.Vector3(...data.center),data.radius)
+      arrp.set(geoCore.attributes.position.array)
+      arrn.set(geoCore.attributes.normal.array)
+
+      result = 'complete'
+      cb(err, result)
+    }
 
-  self.onmessage = function(msg) {
-    const payload = msg.data
-    doCalculation(payload, function(err, result) {
-      const msg = {
-        err,
-        payload: result
-      }
-      self.postMessage(msg)
-    })
-  }
+    self.onmessage = function(msg) {
+      const payload = msg.data
+      doCalculation(payload, function(err, result) {
+        const msg = {
+          err,
+          payload: result
+        }
+        self.postMessage(msg)
+      })
+    }`
+}

src/sphere/sphere.js

@@ -125,11 +125,11 @@ export class Sphere{
       e.center = wp
       e.isRoot = true
 
-      const g = new THREE.SphereGeometry( 1005, 5, 5 ); 
+      /*const g = new THREE.SphereGeometry( 1005, 5, 5 ); 
       var ma = new THREE.MeshBasicMaterial({color:'blue'});
       let m  = new THREE.Mesh( g, ma );
       e.plane.add(m)
-      m.position.copy( wp)
+      m.position.copy( wp)*/
     })
   }