wip

Author: aardgoose

package-lock.json

@@ -52,6 +52,8 @@
     "x18n": "^2.0.3"
   },
   "dependencies": {
-    "acorn-walk": "^8.2.0"
+    "acorn-walk": "^8.2.0",
+    "escope": "^4.0.0",
+    "estree-toolkit": "^1.7.3"
   }
 }

package.json

@@ -1,10 +1,12 @@
 import { simple } from 'acorn-walk';
+import { traverse } from 'estree-toolkit';
 
 const nodeElements = {};
 
 export default function threeNodes () {
 
 	return {
+
 		name: 'three-nodes', // this name will show up in logs and errors
 
 		transform: {
@@ -22,16 +24,24 @@ export default function threeNodes () {
 				const newImports = [];
 				const currentImports = {};
 
-				simple( ast, {
 
-					ImportSpecifier( node ) {
+//				simple( ast, {
+				traverse( ast, {
+
+					$: { scope: true },
+
+					ImportSpecifier ( nodepath ) {
+
+						const node = nodepath.node;
 
 						// track file's current imports
 						currentImports[ node.imported.name ] = true;
 
 					},
 
-					CallExpression ( node ) {
+					CallExpression ( nodepath ) {
+
+						const node = nodepath.node;
 
 						if ( node.callee.type == 'Identifier' && node.callee.name == 'addNodeElement'  ) {
 
@@ -57,6 +67,9 @@ export default function threeNodes () {
 							newImports.push( `import { ${propertyName} } from '${moduleId.replaceAll( '\\', '\/' ) }';` );
 							newImports.push( `console.log( 'custard:', ${propertyName});` );
 
+							console.log( "\n\nfile:", fileName, "\nprop:", propertyName, "\n" ,nodepath.scope );
+							console.log( "\nparent", nodepath.parent);
+
 							delete nodeElements[ propertyName ];
 
 						}

rollup-plugin-three-nodes.mjs

@@ -88,7 +88,7 @@ ColorManagement.enabled = true;
 Object3D.onUploadDropBuffer = function () {
 
 	// call back from BufferAttribute to drop JS buffers after data has been transfered to GPU
-//	this.array = null;
+	this.array = new this.array.constructor( 1 );
 
 };
 
@@ -113,4 +113,5 @@ Object3D.prototype.dropBuffers = function ( colors = true ) {
 
 	if ( geometry.index ) geometry.index.onUpload( Object3D.onUploadDropBuffer );
 
-};
+};
+export { Object3D };

src/js/Three.js

@@ -1,9 +1,9 @@
 import { CanvasTexture } from '../Three';
-import { SpriteNodeMaterial } from '../Nodes';
+import { PopupMaterial } from './PopupMaterial';
 
-class ClusterMaterial extends SpriteNodeMaterial {
+class ClusterMaterial extends PopupMaterial {
 
-	constructor ( params ) {
+	constructor ( params, cvCtx ) {
 
 		const count = params.count;
 
@@ -49,8 +49,11 @@ class ClusterMaterial extends SpriteNodeMaterial {
 
 		const texture = new CanvasTexture( canvas );
 
-		super( { map: texture, depthTest: false, transparent: true, alphaTest: 0.8, sizeAttenuation: false } );
+		super( cvCtx.container, texture );
 
+		//super( { map: texture, depthTest: false, transparent: true, alphaTest: 0.8, sizeAttenuation: false } );
+
+//		this.scaleNode = float( 4 );
 		//texture.onUpdate = function _dropCanvas ( texture ) { texture.image = null; };
 
 	}

src/js/materials/ClusterMaterial.js

@@ -21,7 +21,7 @@ class DepthMaterial extends SubsurfaceMaterial {
 		// FIXME double check all depth calcs
 		const depth = terrainHeight( positionLocal ).sub( positionLocal.z ).mul( du.depthScale );
 
-		this.colorNode = texture( textureCache.getTexture( gradient ), vec2( depth, 1.0 ) ); // FIXME vertex colot
+		this.colorNode = texture( textureCache.getTexture( gradient ), vec2( depth, 1.0 ) ); // FIXME vertex color
 
 	}
 

src/js/materials/DepthMaterial.js

@@ -1,4 +1,4 @@
-import { CanvasTexture, LinearFilter, NearestFilter } from '../Three';
+import { CanvasTexture, NearestFilter } from '../Three';
 
 class GlyphAtlas {
 
@@ -58,7 +58,7 @@ class GlyphAtlas {
 
 		const texture = new CanvasTexture( canvas );
 
-		texture.minFilter = LinearFilter;
+		texture.minFilter = NearestFilter;
 		this.generateMipmaps = false;
 
 		function addGlyphToCanvas ( glyph, i ) {

src/js/materials/GlyphAtlas.js

@@ -18,15 +18,25 @@ class PopupMaterial extends NodeMaterial {
 		this.generateMipmaps = false;
 
 		const pixelRatio = window.devicePixelRatio || 1;
-		const canvas = popupImage.image;
+
+		let { width, height } = popupImage.image;
+
+		if ( popupImage.isCanvasTexture ) {
+
+			width  *= pixelRatio;
+			height *= pixelRatio;
+
+		}
 
 		// const cos = Math.cos( rotation );
 		// const sin = Math.sin( rotation );
+
 		// const rotationMatrix = new Float32Array( [ cos, sin, -sin, cos ] );
+
 		this.vertexNode = new ShaderNode( ( stack ) => {
 
 			const viewPort = new Vector2( Math.floor( pixelRatio * container.clientWidth ) / 2, Math.floor( pixelRatio * container.clientHeight ) / 2 );
-			const scale = new Vector2( canvas.width, canvas.height ).divide( viewPort );
+			const scale = new Vector2( width, height ).divide( viewPort );
 
 			// const rotate = uniform( mat2( cos, sin, -sin, cos ) );
 

src/js/materials/PopupMaterial.js

@@ -321,7 +321,7 @@ class CommonTerrain extends Group {
 	}
 
 	getHeight ( point ) {
-
+		return 0;
 		return this.heightLookup.lookup( point );
 
 	}

src/js/terrain/CommonTerrain.js

@@ -1,13 +1,15 @@
 import { ClusterMaterial } from '../materials/ClusterMaterial';
-import { Sprite } from '../Three';
+import { Popup } from '../ui/Popup';
 
-class Marker extends Sprite {
+class Marker extends Popup {
 
 	isMarker = true;
 
 	constructor ( ctx, count ) {
 
-		super( ctx.materials.getMaterial( ClusterMaterial, { count: count } ) );
+		super();
+
+		this.material = ctx.materials.getMaterial( ClusterMaterial, { count: count } );
 		this.renderOrder = 1;
 		this.scale.set( 100, 100 );