Unfinished demos - root paths to textures

[sylwesterdigital]

Hi Osei, did you have a chance to make one more of these commented demos working? I know you are busy but I think 'threeCube' is not enough to showcase to awesome plugin :)

//threeDepth(args); //threeCrate(args); //skinningAndMorphing(args); //nearestNeighbour(args); //threeOcean(args); //threeCube(args); //threeCar(args);
//threeOcean(args)

I noticed that you need to tweak the root path to textures adding "assets" folder at the beginning. I've mocked up something ugly last night but the texture seems to me pretty much desaturated. Also did you succesfuly loaded aby 3D models, I could not. The workflow is for very patient people and every time when I change a single bit of code I am waiting 15 seonds to see that something is wrong. Do you recommend anything to speed up the whole preview/reload time?

https://youtu.be/HmrZUQOTiSU

here is what I have done

var myWorld = function (args) {
    var camera, scene, renderer;
    var geometry, material, mesh;
    var cylinder;
    var cone, gC, mC;
    var meshes = [];
    var materials = []
    var colors = []
    var mL = 8;
    var light;
    var crve, pts, gP, mP, crveObj;
    var gT, mT, tors;
    var sky, sunSphere;
    var uniforms;
    var distance = 400000;
    var controls;
    var water, waterGeometry;
    var textureImg;
    var groundTexture, groundMaterial, ground;
    var cirK = 0;

    init();
    animate();

    function init() {

        // Canvas
        canvas = args.object;
        const context = canvas.getContext("webgl");

        // Camera
        // 1 - Field Of View in deg
        // 2 - Aspect Ratio
        // 3 - Near
        // 4 - Far clipping plan
        camera = new PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            100
        );
        camera.position.z = 3;

        // Scene
        scene = new Scene();
        scene.background = new Color(0xe0e0e0);
        scene.fog = new Fog(0xe0e0e0, 20, 100);
        // Light
        light = new DirectionalLight(0xffffff, 0.8);
        scene.add(light);    

        // Water
        textureImg = new TextureLoader().load(  root + "assets/textures/waternormals.jpg" );
        textureImg.wrapS = RepeatWrapping;
        textureImg.wrapT = RepeatWrapping;
        textureImg.repeat.set( 2, 2 );    

        // torus
        gT = new TorusGeometry( 1.6, 0.05, 16, 6, 6.3 );
        mT = new MeshBasicMaterial({ map: textureImg } );
        tors = new Mesh( gT, mT );
        scene.add( tors );     

        // ground
        groundTexture = new TextureLoader().load( root + "assets/txs/Sahara.jpg");
        groundTexture.wrapS = RepeatWrapping;
        groundTexture.wrapT = RepeatWrapping;
        groundTexture.repeat.set( 25,25 );
        //groundTexture.anisotropy = 16;
        // groundTexture.encoding = sRGBEncoding;
        groundMaterial = new MeshPhongMaterial( { map: groundTexture } );
        ground = new Mesh( new PlaneGeometry( 250, 250 ), groundMaterial );
        ground.position.y = - 10;
        ground.rotation.x = - Math.PI / 2;
        ground.receiveShadow = true;
        scene.add( ground );    

        // Octahedron aka cone
        gC = new OctahedronGeometry( 0.25, 3 );
        //mC = new MeshBasicMaterial( {color: 0xffff00} );
        mC = new MeshBasicMaterial({ map: textureImg } );
        cone = new Mesh( gC, mC ); 
        scene.add( cone );    

        // squares
        for(var i=0; i<mL; i++) {
          var geometry = new BoxGeometry(0.08, 0.08, 0.5+Math.random()*4);
          colors.push({color:1000+Math.random()*999999999})
          //materials.push(new MeshBasicMaterial(colors[i]))
          materials.push(new MeshNormalMaterial())
          var r  = new Mesh(geometry, materials[i]);
          r["sX"] = i*0.002;
          r["sY"] = Math.random()*0.05;
          r["sZ"] = Math.random()*0.01;
          r.position.y = 1+ i*0.2
          meshes.push(r);
          scene.add(r);
        }
        renderer = new WebGLRenderer({ context, antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);

    }
    function animate() {
        requestAnimationFrame(animate);
        for(var i=0; i<mL; i++) {
          var r = meshes[i];
          r.rotation.x += r.sX;
          r.rotation.y += r.sY;
          r.rotation.z += r.sZ;
        }

        cirK += 0.005;
        cone.position.y = Math.sin(cirK)*1.5
        cone.rotation.y += 0.02
        tors.rotation.x += 0.015
        tors.rotation.y += 0.002
        tors.rotation.z += 0.005

        renderer.render(scene, camera);

       //camera.position.x += 0.1 
        camera.lookAt(cone.position.x, cone.position.y, cone.position.z);

        canvas.flush();
    }
};

[triniwiz]

skinningAndMorphing should be demo with a model also you should use Renderer({ context, antialias: true }) from the plugin vs WebGLRenderer({ context, antialias: true }) it handles the height/width the render uses since nativescript can return an object

[sylwesterdigital]

Nice! SkinninAndMorphing it's working, lovely. Youtube preview: https://youtu.be/FpO8MSl-qqs

However I have some memory warnings and CPU issues

CONSOLE WARN file: node_modules/three/build/three.module.js:16023:0: THREE.WebGLRenderer: EXT_frag_depth extension not supported.
got GAX status change notification. on: 0
CONSOLE WARN file: node_modules/three/build/three.module.js:35820:0: THREE.FileLoader: HTTP Status 0 received.
CONSOLE LOG file: app/home/home-page.ts:605:28: model loaded
HTHangEventCreate: HangTracing is disabled. Not creating a new event.
got GAX status change notification. on: 0
Received memory warning.
Received memory warning.
demo[2952] () used 144.00s of CPU over 161.54 seconds (averaging 89%), violating a CPU usage limit of 144.00s over 180 seconds.

Also on my ancient iPad Mini 2012 the framerate seems like about 12fps, but maybe this a clock thing (?) or some settings hack should be considered?

[triniwiz]

1. The first warning is fine it’s up to the device to support the extension.
2. File loader (in the polyfill) can be updated to return a 200 status instead of 0.
3. I may have never experience any high memory usage or cpu usage due to using one of their latest device to test (Iphone 11 Pro Max)

With the high memory usage can you run the app in Xcode to monitor for any memory leaks :)

[triniwiz]

My demo running on the 11 pro max https://twitter.com/triniwiz/status/1261158267818053632?s=21

[sylwesterdigital]

Nice one. I have very old iOS testing hardware :( Did you load GLB files with backed image textures? I will come back to this - just realized that I need to build my 3D world first in normal web environment, it will be a waaaay faster. Cheers

[triniwiz]

A couple new things has been added an I'm always trying to improve the performance also I have initial support (works but it's a bit ugly to use atm) for using workers with the canvas so you can keep your main thread light .... this has a new home