add skill

Author: lo-th

assets/logo/skill.png

@@ -12,8 +12,7 @@ demo = () => {
     phy.add({ type:'plane', name:'floor', size:[300,1,300], visible:false });
     //phy.add({ pos:[0,20,0], rot:[0,0,0], size:[0.5,0.5,0.5], mass:30})
     //phy.add({ type:'box', size:[4,1,6], rot:[1,0,0], pos:[0,0.5,0],  radius:0.025 })
-
-    // phy.add({ type:'box', size:[4,4,1],  pos:[0,2,10],  radius:0.025 })
+    //phy.add({ type:'box', size:[4,4,1],  pos:[0,2,10],  radius:0.025 })
 
     // preLoad
     const maps = [
@@ -39,8 +38,6 @@ onComplete = () => {
     const suspension = model['h_susp_base']
     const brake = model['h_brake']
 
-    
-
     buggy = phy.add( { 
 
         type:'vehicle', 
@@ -125,8 +122,8 @@ terrainTest = () => {
 
 update = () => {
 
+    // decal terrain > 50
     let p = buggy.position;
-    //let d = math.distance({ x:p.x, z:p.z });
     let d = math.distanceArray([p.x, 0, p.z])
 
     if( d > 50 ){
@@ -136,50 +133,41 @@ update = () => {
         ])
     }
 
-    //let key = phy.getKey()
-    //phy.update( { name:'buggy', key:key } )
-
 }
 
 applyMaterial = ( model ) => {
 
     const mat = {}
 
-
-    //let Mat = phy.getMat()
-    //let clear = Mat.get('clear')
-
-    const path = './assets/textures/buggy/'
-
     mat['carGlass'] = phy.getMat('carGlass');
 
     mat['body'] = phy.material({
         name:'body',
         roughness: 0.5,
         metalness: 1.0,
         envMapIntensity: 1.35,
-        map: phy.texture({ url:path + 'body_c.jpg' }),
+        map: phy.getTexture('body_c'),
         clearcoat: 1.0, clearcoatRoughness: 0.03, sheen: 0.5,
     });
 
     mat['extra'] = phy.material({
         name:'extra',
         roughness: 0.1,
         metalness: 0.6,
-        map: phy.texture({ url:path + 'extra_c.jpg' }),
-        normalMap: phy.texture({ url:path + 'extra_n.jpg' }),
+        map: phy.getTexture('extra_c'),
+        normalMap: phy.getTexture('extra_n'),
         normalScale: [ 1, -1 ],
     });
 
     mat['pilote'] = phy.material({
         name:'pilote',
         roughness: 0.4,
         metalness: 0.6,
-        map: phy.texture({ url:path + 'pilote_c.jpg' }),
+        map: phy.getTexture('pilote_c'),
     });
 
-    let wheel_map = phy.texture({ url:path + 'wheel_c.jpg' })
-    let wheel_normal = phy.texture({ url:path + 'wheel_n.jpg' })
+    let wheel_map = phy.getTexture('wheel_c')
+    let wheel_normal = phy.getTexture('wheel_n')
 
     mat['wheel'] = phy.material({
         name:'wheel',
@@ -204,7 +192,7 @@ applyMaterial = ( model ) => {
         name:'susp',
         roughness: 0.6,
         metalness: 0.4,
-        map: phy.texture({ url:path + 'suspension_c.jpg' }),
+        map: phy.getTexture('suspension_c'),
     });
 
     mat['brake'] = phy.material({

assets/models/buggy.glb

@@ -83,6 +83,15 @@ onComplete2 = () => {
     const models = phy.getMesh('palette')
     let m = models.palette;
 
+    /*
+    // test basic material
+    const mat = phy.material({type:'basic', map:m.material.map })
+    m.children[0].children[0].material = mat
+    m.children[1].children[0].material = mat
+    */
+
+    console.log(m)
+
     m.castShadow = true
     m.receiveShadow = false;
     m.position.set(0,0.3125,1.2)

demos/buggy.js

@@ -1,6 +1,6 @@
 {
   "name": "phy-engine",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "description": "JavaScript 3D Physics for three.js",
   "type": "module",
   "main": "./build/Phy.cjs",

demos/material.js

@@ -105,6 +105,8 @@ let dayColor = ['#000', '#444', '#feb', 'rgba(213,211,212,0.32)'];
 let nightColor = ['#fff', '#bee', '#bfb', 'rgba(0,0,0,0.4)'];
 
 let engineLogo = null;
+let engineSkill = null;
+let engineCanvas = null
 
 let setting = {
     cross:4,
@@ -914,7 +916,12 @@ export class Hub {
 
         if(!engineLogo) return;
         menu.removeChild(engineLogo);
+        topDown.removeChild(engineCanvas);
+        topDown.removeChild(engineSkill);
+
         engineLogo = null;
+        engineSkill = null;
+        engineCanvas = null;
 
     }
 
@@ -925,6 +932,16 @@ export class Hub {
         engineLogo = new Image(256, 128);
         engineLogo.style.cssText = 'position:absolute; top:40px; left:200px; width:256px; height: 128px;';
         menu.appendChild(engineLogo);
+
+        engineSkill = new Image(256, 256);
+        engineSkill.style.cssText = 'position:absolute; top:0px; left:500px; height:100%; width:auto;';
+        topDown.appendChild(engineSkill);
+
+        engineCanvas = document.createElement( 'canvas' );
+        engineCanvas.width = engineCanvas.height = 256;
+        engineCanvas.style.cssText = 'position:absolute; top:0px; left:500px; height:100%; width:auto;';//'position:absolute; width:100%; height:100%;';
+        topDown.appendChild(engineCanvas);
+
         Hub.setLogoImage();
 
     }
@@ -934,6 +951,60 @@ export class Hub {
         if(!engineLogo) return;
         name = name ? name.toLowerCase() : Main.engineType.toLowerCase();
         engineLogo.src = './assets/logo/'+name+'.png';
+        engineSkill.src = './assets/logo/skill.png';
+        Hub.setEnginSkill(name);
+
+    }
+
+    static setEnginSkill( name ) {
+
+        const ctx = engineCanvas.getContext( '2d' );
+        const data = Main.engineSkill[name]
+
+        ctx.clearRect(0, 0, 256, 256);
+
+        //console.log(data)
+        ctx.fillStyle = data.c;
+        ctx.strokeStyle = data.c;
+
+        ctx.beginPath();
+        let p = Hub.getPoint('speed', data.speed )
+        ctx.moveTo(p.x, p.y);
+        p = Hub.getPoint('option', data.option )
+        ctx.lineTo(p.x, p.y);
+        p = Hub.getPoint('vehicle', data.vehicle )
+        ctx.lineTo(p.x, p.y);
+        p = Hub.getPoint('constraint', data.constraint )
+        ctx.lineTo(p.x, p.y);
+        p = Hub.getPoint('stability', data.stability )
+        ctx.lineTo(p.x, p.y);
+        p = Hub.getPoint('precision', data.precision )
+        ctx.lineTo(p.x, p.y);
+        p = Hub.getPoint('speed', data.speed )
+        ctx.lineTo(p.x, p.y);
+        ctx.fill();
+        ctx.stroke();
+
+
+    }
+
+    static getPoint( d, v ) {
+        let a = 0
+        switch(d){
+            case 'speed': a = 0; break;
+            case 'option': a = 300; break;
+            case 'vehicle': a = 240; break;
+            case 'constraint': a = 180; break;
+            case 'stability': a = 120; break;
+            case 'precision': a = 60; break;
+            
+        }
+
+        let angle = (a-180) * (Math.PI/180)
+        let x = 128 + ((75*v) * Math.sin(angle))
+        let y = 128 + ((75*v) * Math.cos(angle))
+
+        return {x:x,y:y}
 
     }
 

package.json

@@ -113,7 +113,7 @@ const setting = {
 	shadow:0.75,
 
 	exposure: 0.5,//0.68,//1,
-	direct:8, //3.14,
+	direct:13, //9,
 	spherical: 1,
 	envIntensity:2.0,//1.3,
 	bgIntensity:1.5,//1,
@@ -233,6 +233,14 @@ export const Main = {
 	isWorker:true,
 	devMode:false,
 	engineList: [ 'OIMO', 'AMMO', 'PHYSX', 'HAVOK', 'RAPIER', 'JOLT' ],
+	engineSkill: {
+		physx: {c:'rgba(125,201,0,0.5)',   speed:0.9, option:1.0, precision:0.9, stability:0.9, constraint:1.0, vehicle:1.0 },
+		havok: {c:'rgba(255,187,0,0.5)',   speed:1.0, option:0.9, precision:1.0, stability:1.0, constraint:0.8, vehicle:0.1 },
+		jolt:  {c:'rgba(22,147,197,0.5)',  speed:0.6, option:0.9, precision:0.8, stability:0.8, constraint:0.6, vehicle:0.7 },
+		rapier:{c:'rgba(168,251,194,0.5)', speed:0.6, option:0.8, precision:0.9, stability:0.5, constraint:0.7, vehicle:0.2 },
+		ammo : {c:'rgba(255,154,0,0.5)',   speed:0.4, option:0.7, precision:0.6, stability:0.5, constraint:0.8, vehicle:0.8 },
+		oimo:  {c:'rgba(246,82,22,0.5)',   speed:0.3, option:0.5, precision:0.6, stability:0.5, constraint:0.8, vehicle:0.2 },
+	},
 	demoList:[],
 	demoLink:[],
 	devLink:[],