npm - @hienlh/ppm - Versions diffs - 0.9.81 → 0.9.83 - Mend

@hienlh/ppm 0.9.81 → 0.9.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1754) hide show

package/.opencode/skills/threejs/data/use-cases.csv DELETED Viewed

@@ -1,21 +0,0 @@
-ID,Use Case,Keywords,Recommended Examples,Complexity,Technologies,Description
-1,Product Configurator,"configurator, e-commerce, product, 3d viewer",webgl_loader_gltf; webgl_materials_variations_physical; webgl_lights_rectarealight,Medium,"GLTF, PBR Materials, Environment Maps",Interactive product visualization with material/color options
-2,Data Visualization,"data viz, charts, 3d graphs, analytics",webgl_buffergeometry_points; webgl_interactive_points; webgl_geometry_dynamic,Medium,"BufferGeometry, Points, Custom Shaders",3D data visualization and interactive charts
-3,Architectural Visualization,"archviz, building, interior, real estate",webgl_loader_gltf; webgl_materials_envmaps_hdr; webgl_shadowmap_csm; webgl_postprocessing_ssr,High,"GLTF, HDR, CSM Shadows, SSR",Architectural and interior design visualization
-4,Game Development,"game, fps, rpg, interactive",webgl_animation_skinning_blending; physics; webgpu_compute_birds; webgl_portal,High,"Animation, Physics, Compute, Controls",Game mechanics and interactive experiences
-5,Medical Visualization,"medical, anatomy, ct scan, volume",webgl_loader_nrrd; webgl_volume_cloud; webgl_loader_pdb,High,"Volume Rendering, NRRD, PDB",Medical imaging and anatomical visualization
-6,Scientific Visualization,"scientific, simulation, physics, research",webgl_gpgpu_protoplanet; webgl_gpgpu_water; webgpu_compute_particles,High,"GPGPU, Compute Shaders, Simulation",Scientific data and physics simulation
-7,360 Panorama Viewer,"360, panorama, vr, virtual tour",webgl_panorama_equirectangular; webgl_video_panorama_equirectangular; webxr_vr_panorama,Low-Medium,"Equirectangular, Video, WebXR",360-degree photo and video viewing
-8,E-commerce 3D,"e-commerce, shopping, ar, product view",webgl_loader_gltf; webgl_loader_usdz; webgl_materials_physical_transmission,Medium,"GLTF, USDZ, Transmission",Product viewing for online shopping
-9,Character Animation,"character, avatar, animation, rigging",webgl_animation_keyframes; webgl_animation_skinning_ik; webgl_morphtargets_face,Medium-High,"Animation, IK, Morph Targets",Character animation and avatar systems
-10,Particle Effects,"particles, effects, vfx, simulation",webgl_gpgpu_birds; webgl_points_dynamic; webgpu_compute_particles_rain,Medium-High,"GPGPU, Points, Compute",Particle systems and visual effects
-11,CAD Viewer,"cad, engineering, step, iges",webgl_loader_3mf; webgl_loader_stl; webgl_geometry_nurbs; webgl_clipping,Medium,"Loaders, NURBS, Clipping",CAD and engineering model viewing
-12,Virtual Reality,"vr, immersive, headset, quest",webxr_vr_sandbox; webxr_vr_teleport; webxr_vr_rollercoaster,High,"WebXR, Controllers, Hand Tracking",VR experiences and applications
-13,Augmented Reality,"ar, mobile, camera, overlay",webxr_ar_cones; webxr_ar_hittest; webxr_ar_lighting,High,"WebXR AR, Hit Test, Lighting Estimation",AR experiences on mobile devices
-14,Portfolio Website,"portfolio, creative, art, showcase",webgl_postprocessing_unreal_bloom; webgl_shaders_ocean; webgl_trails,Medium,"Post-processing, Custom Shaders, Effects",Creative portfolio and artistic showcases
-15,Real-time Collaboration,"collaboration, multiplayer, networking",webgl_multiple_scenes_comparison; webgl_multiple_views,Medium,"Multiple Scenes, Sync, State",Multi-user collaborative 3D environments
-16,Point Cloud Visualization,"point cloud, lidar, scan, photogrammetry",webgl_loader_pcd; webgl_loader_ply; webgl_points_sprites,Medium,"PCD, PLY, Point Rendering",Point cloud data visualization
-17,Terrain and Landscape,"terrain, landscape, heightmap, outdoor",webgl_geometry_terrain; webgl_geometry_minecraft; webgl_water,Medium,"Heightmap, LOD, Water",Outdoor and terrain visualization
-18,Car Configurator,"car, automotive, paint, configurator",webgl_materials_car; webgl_materials_physical_clearcoat; webgl_materials_envmaps_groundprojected,High,"Clearcoat, Environment, Reflection",Automotive visualization and configuration
-19,Educational 3D,"education, learning, interactive, simulation",webgl_loader_pdb; webgl_morphtargets; webgl_geometry_text,Low-Medium,"Models, Animation, Interaction",Educational and learning applications
-20,WebGPU Modern,"webgpu, modern, compute, next-gen",webgpu_compute_birds; webgpu_tsl_editor; webgpu_postprocessing_bloom,High,"WebGPU, TSL, Compute Shaders",Modern WebGPU-based applications

package/.opencode/skills/threejs/references/00-fundamentals.md DELETED Viewed

@@ -1,487 +0,0 @@
-# Three.js Fundamentals
-## Overview
-Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
-## Quick Start
-```javascript
-import * as THREE from "three";
-// Create scene, camera, renderer
-const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera(
-  75,
-  window.innerWidth / window.innerHeight,
-  0.1,
-  1000,
-);
-const renderer = new THREE.WebGLRenderer({ antialias: true });
-renderer.setSize(window.innerWidth, window.innerHeight);
-renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-document.body.appendChild(renderer.domElement);
-// Add a mesh
-const geometry = new THREE.BoxGeometry(1, 1, 1);
-const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
-const cube = new THREE.Mesh(geometry, material);
-scene.add(cube);
-// Add light
-scene.add(new THREE.AmbientLight(0xffffff, 0.5));
-const dirLight = new THREE.DirectionalLight(0xffffff, 1);
-dirLight.position.set(5, 5, 5);
-scene.add(dirLight);
-camera.position.z = 5;
-// Animation loop
-function animate() {
-  requestAnimationFrame(animate);
-  cube.rotation.x += 0.01;
-  cube.rotation.y += 0.01;
-  renderer.render(scene, camera);
-}
-animate();
-// Handle resize
-window.addEventListener("resize", () => {
-  camera.aspect = window.innerWidth / window.innerHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize(window.innerWidth, window.innerHeight);
-});
-```
-## Core Classes
-### Scene
-Container for all 3D objects, lights, and cameras.
-```javascript
-const scene = new THREE.Scene();
-scene.background = new THREE.Color(0x000000); // Solid color
-scene.background = texture; // Skybox texture
-scene.background = cubeTexture; // Cubemap
-scene.environment = envMap; // Environment map for PBR
-scene.fog = new THREE.Fog(0xffffff, 1, 100); // Linear fog
-scene.fog = new THREE.FogExp2(0xffffff, 0.02); // Exponential fog
-```
-### Cameras
-**PerspectiveCamera** - Most common, simulates human eye.
-```javascript
-// PerspectiveCamera(fov, aspect, near, far)
-const camera = new THREE.PerspectiveCamera(
-  75, // Field of view (degrees)
-  window.innerWidth / window.innerHeight, // Aspect ratio
-  0.1, // Near clipping plane
-  1000, // Far clipping plane
-);
-camera.position.set(0, 5, 10);
-camera.lookAt(0, 0, 0);
-camera.updateProjectionMatrix(); // Call after changing fov, aspect, near, far
-```
-**OrthographicCamera** - No perspective distortion, good for 2D/isometric.
-```javascript
-// OrthographicCamera(left, right, top, bottom, near, far)
-const aspect = window.innerWidth / window.innerHeight;
-const frustumSize = 10;
-const camera = new THREE.OrthographicCamera(
-  (frustumSize * aspect) / -2,
-  (frustumSize * aspect) / 2,
-  frustumSize / 2,
-  frustumSize / -2,
-  0.1,
-  1000,
-);
-```
-**ArrayCamera** - Multiple viewports with sub-cameras.
-```javascript
-const cameras = [];
-for (let i = 0; i < 4; i++) {
-  const subcamera = new THREE.PerspectiveCamera(40, 1, 0.1, 100);
-  subcamera.viewport = new THREE.Vector4(
-    Math.floor(i % 2) * 0.5,
-    Math.floor(i / 2) * 0.5,
-    0.5,
-    0.5,
-  );
-  cameras.push(subcamera);
-}
-const arrayCamera = new THREE.ArrayCamera(cameras);
-```
-**CubeCamera** - Renders environment maps for reflections.
-```javascript
-const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256);
-const cubeCamera = new THREE.CubeCamera(0.1, 1000, cubeRenderTarget);
-scene.add(cubeCamera);
-// Use for reflections
-material.envMap = cubeRenderTarget.texture;
-// Update each frame (expensive!)
-cubeCamera.position.copy(reflectiveMesh.position);
-cubeCamera.update(renderer, scene);
-```
-### WebGLRenderer
-```javascript
-const renderer = new THREE.WebGLRenderer({
-  canvas: document.querySelector("#canvas"), // Optional existing canvas
-  antialias: true, // Smooth edges
-  alpha: true, // Transparent background
-  powerPreference: "high-performance", // GPU hint
-  preserveDrawingBuffer: true, // For screenshots
-});
-renderer.setSize(width, height);
-renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-// Tone mapping
-renderer.toneMapping = THREE.ACESFilmicToneMapping;
-renderer.toneMappingExposure = 1.0;
-// Color space (Three.js r152+)
-renderer.outputColorSpace = THREE.SRGBColorSpace;
-// Shadows
-renderer.shadowMap.enabled = true;
-renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-// Clear color
-renderer.setClearColor(0x000000, 1);
-// Render
-renderer.render(scene, camera);
-```
-### Object3D
-Base class for all 3D objects. Mesh, Group, Light, Camera all extend Object3D.
-```javascript
-const obj = new THREE.Object3D();
-// Transform
-obj.position.set(x, y, z);
-obj.rotation.set(x, y, z); // Euler angles (radians)
-obj.quaternion.set(x, y, z, w); // Quaternion rotation
-obj.scale.set(x, y, z);
-// Local vs World transforms
-obj.getWorldPosition(targetVector);
-obj.getWorldQuaternion(targetQuaternion);
-obj.getWorldDirection(targetVector);
-// Hierarchy
-obj.add(child);
-obj.remove(child);
-obj.parent;
-obj.children;
-// Visibility
-obj.visible = false;
-// Layers (for selective rendering/raycasting)
-obj.layers.set(1);
-obj.layers.enable(2);
-obj.layers.disable(0);
-// Traverse hierarchy
-obj.traverse((child) => {
-  if (child.isMesh) child.material.color.set(0xff0000);
-});
-// Matrix updates
-obj.matrixAutoUpdate = true; // Default: auto-update matrices
-obj.updateMatrix(); // Manual matrix update
-obj.updateMatrixWorld(true); // Update world matrix recursively
-```
-### Group
-Empty container for organizing objects.
-```javascript
-const group = new THREE.Group();
-group.add(mesh1);
-group.add(mesh2);
-scene.add(group);
-// Transform entire group
-group.position.x = 5;
-group.rotation.y = Math.PI / 4;
-```
-### Mesh
-Combines geometry and material.
-```javascript
-const mesh = new THREE.Mesh(geometry, material);
-// Multiple materials (one per geometry group)
-const mesh = new THREE.Mesh(geometry, [material1, material2]);
-// Useful properties
-mesh.geometry;
-mesh.material;
-mesh.castShadow = true;
-mesh.receiveShadow = true;
-// Frustum culling
-mesh.frustumCulled = true; // Default: skip if outside camera view
-// Render order
-mesh.renderOrder = 10; // Higher = rendered later
-```
-## Coordinate System
-Three.js uses a **right-handed coordinate system**:
-- **+X** points right
-- **+Y** points up
-- **+Z** points toward viewer (out of screen)
-```javascript
-// Axes helper
-const axesHelper = new THREE.AxesHelper(5);
-scene.add(axesHelper); // Red=X, Green=Y, Blue=Z
-```
-## Math Utilities
-### Vector3
-```javascript
-const v = new THREE.Vector3(x, y, z);
-v.set(x, y, z);
-v.copy(otherVector);
-v.clone();
-// Operations (modify in place)
-v.add(v2);
-v.sub(v2);
-v.multiply(v2);
-v.multiplyScalar(2);
-v.divideScalar(2);
-v.normalize();
-v.negate();
-v.clamp(min, max);
-v.lerp(target, alpha);
-// Calculations (return new value)
-v.length();
-v.lengthSq(); // Faster than length()
-v.distanceTo(v2);
-v.dot(v2);
-v.cross(v2); // Modifies v
-v.angleTo(v2);
-// Transform
-v.applyMatrix4(matrix);
-v.applyQuaternion(q);
-v.project(camera); // World to NDC
-v.unproject(camera); // NDC to world
-```
-### Matrix4
-```javascript
-const m = new THREE.Matrix4();
-m.identity();
-m.copy(other);
-m.clone();
-// Build transforms
-m.makeTranslation(x, y, z);
-m.makeRotationX(theta);
-m.makeRotationY(theta);
-m.makeRotationZ(theta);
-m.makeRotationFromQuaternion(q);
-m.makeScale(x, y, z);
-// Compose/decompose
-m.compose(position, quaternion, scale);
-m.decompose(position, quaternion, scale);
-// Operations
-m.multiply(m2); // m = m * m2
-m.premultiply(m2); // m = m2 * m
-m.invert();
-m.transpose();
-// Camera matrices
-m.makePerspective(left, right, top, bottom, near, far);
-m.makeOrthographic(left, right, top, bottom, near, far);
-m.lookAt(eye, target, up);
-```
-### Quaternion
-```javascript
-const q = new THREE.Quaternion();
-q.setFromEuler(euler);
-q.setFromAxisAngle(axis, angle);
-q.setFromRotationMatrix(matrix);
-q.multiply(q2);
-q.slerp(target, t); // Spherical interpolation
-q.normalize();
-q.invert();
-```
-### Euler
-```javascript
-const euler = new THREE.Euler(x, y, z, "XYZ"); // Order matters!
-euler.setFromQuaternion(q);
-euler.setFromRotationMatrix(m);
-// Rotation orders: 'XYZ', 'YXZ', 'ZXY', 'XZY', 'YZX', 'ZYX'
-```
-### Color
-```javascript
-const color = new THREE.Color(0xff0000);
-const color = new THREE.Color("red");
-const color = new THREE.Color("rgb(255, 0, 0)");
-const color = new THREE.Color("#ff0000");
-color.setHex(0x00ff00);
-color.setRGB(r, g, b); // 0-1 range
-color.setHSL(h, s, l); // 0-1 range
-color.lerp(otherColor, alpha);
-color.multiply(otherColor);
-color.multiplyScalar(2);
-```
-### MathUtils
-```javascript
-THREE.MathUtils.clamp(value, min, max);
-THREE.MathUtils.lerp(start, end, alpha);
-THREE.MathUtils.mapLinear(value, inMin, inMax, outMin, outMax);
-THREE.MathUtils.degToRad(degrees);
-THREE.MathUtils.radToDeg(radians);
-THREE.MathUtils.randFloat(min, max);
-THREE.MathUtils.randInt(min, max);
-THREE.MathUtils.smoothstep(x, min, max);
-THREE.MathUtils.smootherstep(x, min, max);
-```
-## Common Patterns
-### Proper Cleanup
-```javascript
-function dispose() {
-  // Dispose geometries
-  mesh.geometry.dispose();
-  // Dispose materials
-  if (Array.isArray(mesh.material)) {
-    mesh.material.forEach((m) => m.dispose());
-  } else {
-    mesh.material.dispose();
-  }
-  // Dispose textures
-  texture.dispose();
-  // Remove from scene
-  scene.remove(mesh);
-  // Dispose renderer
-  renderer.dispose();
-}
-```
-### Clock for Animation
-```javascript
-const clock = new THREE.Clock();
-function animate() {
-  const delta = clock.getDelta(); // Time since last frame (seconds)
-  const elapsed = clock.getElapsedTime(); // Total time (seconds)
-  mesh.rotation.y += delta * 0.5; // Consistent speed regardless of framerate
-  requestAnimationFrame(animate);
-  renderer.render(scene, camera);
-}
-```
-### Responsive Canvas
-```javascript
-function onWindowResize() {
-  const width = window.innerWidth;
-  const height = window.innerHeight;
-  camera.aspect = width / height;
-  camera.updateProjectionMatrix();
-  renderer.setSize(width, height);
-  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-}
-window.addEventListener("resize", onWindowResize);
-```
-### Loading Manager
-```javascript
-const manager = new THREE.LoadingManager();
-manager.onStart = (url, loaded, total) => console.log("Started loading");
-manager.onLoad = () => console.log("All loaded");
-manager.onProgress = (url, loaded, total) => console.log(`${loaded}/${total}`);
-manager.onError = (url) => console.error(`Error loading ${url}`);
-const textureLoader = new THREE.TextureLoader(manager);
-const gltfLoader = new GLTFLoader(manager);
-```
-## Performance Tips
-1. **Limit draw calls**: Merge geometries, use instancing, atlas textures
-2. **Frustum culling**: Enabled by default, ensure bounding boxes are correct
-3. **LOD (Level of Detail)**: Use `THREE.LOD` for distance-based mesh switching
-4. **Object pooling**: Reuse objects instead of creating/destroying
-5. **Avoid `getWorldPosition` in loops**: Cache results
-```javascript
-// Merge static geometries
-import { mergeGeometries } from "three/examples/jsm/utils/BufferGeometryUtils.js";
-const merged = mergeGeometries([geo1, geo2, geo3]);
-// LOD
-const lod = new THREE.LOD();
-lod.addLevel(highDetailMesh, 0);
-lod.addLevel(medDetailMesh, 50);
-lod.addLevel(lowDetailMesh, 100);
-scene.add(lod);
-```
-## See Also
-- `threejs-geometry` - Geometry creation and manipulation
-- `threejs-materials` - Material types and properties
-- `threejs-lighting` - Light types and shadows

package/.opencode/skills/threejs/references/01-getting-started.md DELETED Viewed

@@ -1,177 +0,0 @@
-# Getting Started with Three.js
-Core concepts for building your first 3D scene.
-## Essential Components
-Every Three.js app needs 3 core elements:
-### 1. Scene
-Container for all 3D objects, lights, cameras.
-```javascript
-const scene = new THREE.Scene();
-scene.background = new THREE.Color(0x000000); // black background
-scene.fog = new THREE.Fog(0xffffff, 1, 5000); // distance fog
-```
-### 2. Camera
-Viewpoint into the 3D scene.
-**PerspectiveCamera** (realistic, most common):
-```javascript
-const camera = new THREE.PerspectiveCamera(
-  75,  // fov - field of view in degrees
-  window.innerWidth / window.innerHeight,  // aspect ratio
-  0.1,  // near clipping plane
-  1000  // far clipping plane
-);
-camera.position.set(0, 0, 5);
-camera.lookAt(0, 0, 0);
-```
-**OrthographicCamera** (no perspective distortion):
-```javascript
-const camera = new THREE.OrthographicCamera(
-  left, right, top, bottom, near, far
-);
-```
-### 3. Renderer
-Renders scene using camera perspective.
-```javascript
-const renderer = new THREE.WebGLRenderer({ antialias: true });
-renderer.setSize(window.innerWidth, window.innerHeight);
-renderer.setPixelRatio(window.devicePixelRatio);
-document.body.appendChild(renderer.domElement);
-```
-## Basic Geometries
-Primitive shapes ready to use:
-```javascript
-// Box
-new THREE.BoxGeometry(width, height, depth);
-// Sphere
-new THREE.SphereGeometry(radius, widthSegments, heightSegments);
-// Plane
-new THREE.PlaneGeometry(width, height);
-// Cylinder
-new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments);
-// Cone
-new THREE.ConeGeometry(radius, height, radialSegments);
-// Torus
-new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments);
-```
-## Basic Materials
-Materials define surface appearance:
-**MeshBasicMaterial** - unlit, flat color:
-```javascript
-new THREE.MeshBasicMaterial({ color: 0xff0000 });
-```
-**MeshStandardMaterial** - PBR, responds to lights:
-```javascript
-new THREE.MeshStandardMaterial({
-  color: 0x00ff00,
-  metalness: 0.5,
-  roughness: 0.5
-});
-```
-**MeshPhongMaterial** - specular highlights:
-```javascript
-new THREE.MeshPhongMaterial({
-  color: 0x0000ff,
-  shininess: 100
-});
-```
-## Creating Mesh
-Combine geometry + material:
-```javascript
-const geometry = new THREE.BoxGeometry(1, 1, 1);
-const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
-const cube = new THREE.Mesh(geometry, material);
-scene.add(cube);
-```
-## Basic Lights
-Materials (except Basic) need lights to be visible:
-```javascript
-// Ambient - global illumination
-const ambient = new THREE.AmbientLight(0x404040); // soft white
-scene.add(ambient);
-// Directional - sun-like, infinite distance
-const directional = new THREE.DirectionalLight(0xffffff, 1);
-directional.position.set(5, 5, 5);
-scene.add(directional);
-// Point - lightbulb, radiates in all directions
-const point = new THREE.PointLight(0xff0000, 1, 100);
-point.position.set(0, 10, 0);
-scene.add(point);
-```
-## Animation Loop
-Continuously render and update scene:
-```javascript
-function animate() {
-  requestAnimationFrame(animate);
-  // Update objects
-  cube.rotation.x += 0.01;
-  cube.rotation.y += 0.01;
-  // Render
-  renderer.render(scene, camera);
-}
-animate();
-```
-## Handle Window Resize
-Keep aspect ratio correct:
-```javascript
-window.addEventListener('resize', () => {
-  camera.aspect = window.innerWidth / window.innerHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize(window.innerWidth, window.innerHeight);
-});
-```
-## Object3D Hierarchy
-Transform and group objects:
-```javascript
-const group = new THREE.Group();
-group.add(cube1);
-group.add(cube2);
-scene.add(group);
-// Transform
-object.position.set(x, y, z);
-object.rotation.set(x, y, z); // Euler angles
-object.scale.set(x, y, z);
-// Hierarchy transforms are relative to parent
-```