bucciafico-lib 1.0.4-BETA → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bucciafico-lib",
-  "version": "1.0.4-BETA",
+  "version": "1.0.5",
   "description": "Modular 3D rendering engine for Minecraft skins based on Three.js",
   "type": "module",
   "main": "./index.js",
@@ -36,4 +36,4 @@
     "url": "https://github.com/HappyGFX/bucciafico-lib/issues"
   },
   "homepage": "https://github.com/HappyGFX/bucciafico-lib#readme"
-}
+}

package/src/core/SkinViewer.js

@@ -17,6 +17,7 @@ export class SkinViewer {
      * @param {boolean} [config.transparent=false] - Background transparency.
      * @param {number} [config.bgColor=0x141417] - Background hex color.
      * @param {boolean} [config.cameraEnabled=true] - OrbitControls state.
+     * @param {boolean} [config.renderPaused=false] - If true, rendering only happens on interaction/change.
      */
     constructor(containerElement, config = {}) {
         this.container = containerElement;
@@ -25,6 +26,7 @@ export class SkinViewer {
             transparent: config.transparent ?? false,
             bgColor: config.bgColor ?? 0x141417,
             cameraEnabled: config.cameraEnabled ?? true,
+            renderPaused: config.renderPaused ?? false,
             ...config
         };
 
@@ -34,6 +36,9 @@ export class SkinViewer {
         /** @type {boolean} Flag to stop the animation loop. */
         this.isDisposed = false;
 
+        this.isVisible = true;
+        this.needsRender = true;
+
         // --- 1. RENDERER SETUP ---
         this.renderer = new THREE.WebGLRenderer({
             antialias: true,
@@ -62,17 +67,38 @@ export class SkinViewer {
         this.sceneSetup = new SceneSetup(this.scene);
         this.sceneSetup.setGridVisible(this.config.showGrid);
 
-        this.cameraManager = new CameraManager(this.renderer.domElement, w, h);
+        this.cameraManager = new CameraManager(this.renderer.domElement, w, h, () => {
+            this.needsRender = true;
+        });
         this.cameraManager.setEnabled(this.config.cameraEnabled);
 
         this.skinModel = new SkinModel();
         this.scene.add(this.skinModel.getGroup());
 
+        this.observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                this.isVisible = true;
+                this.needsRender = true;
+                this.animate();
+            } else {
+                this.isVisible = false;
+            }
+        }, { threshold: 0 });
+        this.observer.observe(this.container);
+
         // --- 3. START LOOP ---
         this.animate = this.animate.bind(this);
         this.animate();
     }
 
+    /**
+     * Manually requests a frame to be rendered.
+     * Use this when changing model properties via code.
+     */
+    requestRender() {
+        this.needsRender = true;
+    }
+
     /**
      * Registers and initializes a plugin.
      * @param {Object} plugin - The plugin instance (must have an init() method).
@@ -84,6 +110,7 @@ export class SkinViewer {
 
         if (plugin.init) plugin.init(this);
         this.plugins.set(name, plugin);
+        this.requestRender();
 
         return plugin;
     }
@@ -118,6 +145,7 @@ export class SkinViewer {
                 this.skinModel.setPose(currentPose);
                 this.skinData = { type: 'url', value: imageUrl };
 
+                this.requestRender();
                 resolve(isSlim);
             }, undefined, reject);
         });
@@ -139,6 +167,7 @@ export class SkinViewer {
         if (editor) editor.saveHistory();
 
         this.skinModel.setPose(poseData);
+        this.requestRender();
     }
 
     /**
@@ -156,14 +185,20 @@ export class SkinViewer {
         this.plugins.forEach(p => {
             if (p.onResize) p.onResize(w, h);
         });
+
+        this.requestRender();
     }
 
     animate() {
-        if (this.isDisposed) return;
+        if (this.isDisposed || !this.isVisible) return;
         requestAnimationFrame(this.animate);
 
         this.cameraManager.update();
 
+        if (this.config.renderPaused && !this.needsRender) {
+            return;
+        }
+
         const effects = this.getPlugin('EffectsPlugin');
 
         if (effects) {
@@ -175,10 +210,13 @@ export class SkinViewer {
 
         this.renderer.clearDepth();
         this.renderer.render(this.overlayScene, this.cameraManager.camera);
+
+        this.needsRender = false;
     }
 
     dispose() {
         this.isDisposed = true;
+        this.observer.disconnect();
 
         if (this.container && this.renderer.domElement) {
             this.container.removeChild(this.renderer.domElement);

package/src/managers/CameraManager.js

@@ -5,7 +5,14 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
  * Wraps Three.js Camera and OrbitControls.
  */
 export class CameraManager {
-    constructor(domElement, width, height) {
+
+    /**
+     * @param {HTMLElement} domElement
+     * @param {number} width
+     * @param {number} height
+     * @param {Function} [onChange] - Callback fired when camera moves
+     */
+    constructor(domElement, width, height, onChange) {
         this.defaultFOV = 45;
         this.defaultPosition = new THREE.Vector3(20, 10, 40);
         this.defaultTarget = new THREE.Vector3(0, 0, 0);
@@ -17,6 +24,8 @@ export class CameraManager {
         this.controls.enableDamping = true;
         this.controls.dampingFactor = 0.05;
         this.controls.target.copy(this.defaultTarget);
+
+        if (onChange) this.controls.addEventListener('change', onChange);
     }
 
     update() { this.controls.update(); }

package/src/managers/PostProcessingManager.js

@@ -18,7 +18,7 @@ export class PostProcessingManager {
         this.bloomComposer.renderToScreen = false;
         this.bloomComposer.addPass(new RenderPass(scene, camera));
 
-        this.bloomPass = new UnrealBloomPass(new THREE.Vector2(width, height), 1.5, 0.4, 0.0);
+        this.bloomPass = new UnrealBloomPass(new THREE.Vector2(width, height), 1.5, 0.4, 0.85);
         this.bloomComposer.addPass(this.bloomPass);
 
         // 2. FINAL COMPOSER
@@ -49,13 +49,26 @@ export class PostProcessingManager {
                 uniform sampler2D tDiffuse;
                 uniform sampler2D bloomTexture;
                 varying vec2 vUv;
+                
                 void main() {
                     vec4 baseColor = texture2D(tDiffuse, vUv);
                     vec4 bloomColor = texture2D(bloomTexture, vUv);
                     
-                    // Add only colors (RGB), keep the Base Alpha.
-                    // This prevents the black background of the bloom pass from overwriting transparency.
-                    gl_FragColor = vec4(baseColor.rgb + (bloomColor.rgb * 2.5), baseColor.a);
+                    vec3 bloomRGB = bloomColor.rgb;
+                    float brightness = max(bloomRGB.r, max(bloomRGB.g, bloomRGB.b));
+                    
+                    if (brightness < 0.15) {
+                        bloomRGB = vec3(0.0);
+                        brightness = 0.0;
+                    } else {
+                        bloomRGB = (bloomRGB - 0.15) * 1.2; 
+                    }
+
+                    vec3 finalColor = baseColor.rgb + (bloomRGB * 2.0);
+                    float glowAlpha = clamp(brightness, 0.0, 1.0);
+                    float finalAlpha = max(baseColor.a, glowAlpha);
+
+                    gl_FragColor = vec4(finalColor, finalAlpha);
                 }
             `
         };

package/src/materials/GlowMaterial.js

@@ -6,7 +6,6 @@ const vertexShader = `
     varying vec3 vNormal;
     void main() {
         vNormal = normal;
-        // Extrude vertex along normal
         vec3 newPos = position + normal * thickness;
         vY = position.y;
         gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
@@ -21,10 +20,8 @@ const fragmentShader = `
     varying vec3 vNormal;
     void main() {
         if (opacity <= 0.01) discard;
-        // Discard bottom faces to avoid "floor" artifact
         if (vNormal.y < -0.9) discard;
         
-        // Gradient logic
         float normalizedY = (vY + (partHeight / 2.0)) / partHeight;
         float alpha = smoothstep(1.0 - gradientLimit, 1.0, normalizedY);
         alpha *= smoothstep(0.0, 0.2, normalizedY);
@@ -49,8 +46,11 @@ export function createGlowMaterial(partHeight) {
         vertexShader,
         fragmentShader,
         transparent: true,
-        side: THREE.BackSide, // Render inside of the extruded box
+        side: THREE.BackSide,
         depthWrite: false,
-        blending: THREE.AdditiveBlending
+        blending: THREE.AdditiveBlending,
+        polygonOffset: true,
+        polygonOffsetFactor: 1.0,
+        polygonOffsetUnits: 4.0
     });
 }

package/src/plugins/EffectsPlugin.js

@@ -35,7 +35,7 @@ export class EffectsPlugin {
         if (config.height !== undefined) skin.updateGlowHeight(config.height);
 
         // Update Composer Pass
-        this.composer.setBloom(config.enabled, config.strength, config.radius, 0.1);
+        this.composer.setBloom(config.enabled, config.strength, config.radius, 0.85);
     }
 
     /**