hofk / threeg.js Goto Github PK

Hi there, I really appreciate the work you've put in to the road geometry creation logic, it seems to work very well. However I am seeing a large number of draw calls (it appears to be correlated with the # of lengthSegments and "segments" of road)

To reproduce issue:

• Go to sample "roadrace" scene, such as https://threeg-road.glitch.me/ or https://hofk.de/main/threejs/sandboxthreeg/RoadRace.html
• Open console
• Type in renderer.info.render and press enter
• Notice calls: 5006 (or similar number)

Impact:

• it is difficult for me to use this inside of a more complicated scene that is already draw call constrained
• For example opening this scene in an oculus quest results in dropped frames, ostensibly due to draw call count not total polygon count

Instead:

• is it possible to refactor the road creation functions such that only 1 draw call is used for the length of each segment? ie in this demo case there would be 5 draw calls regardless of lengthSegments value

Workaround:

• In the meantime I will try testing with much lower values for lengthSegments and curvePoints to see if I can get draw calls to a useable threshold with the existing code base

Hello, I'm new to three.js and my question might sound stupid... but I wonder if it is possible to add THREEg.js as a module (from NPM repository). Otherwise, how could I download and add it to my project, through zip archive ? if so, where must I extract the files ?
Thanks a lot.

How to generate multi-branch roads?

Only THREE.MeshBasicMaterial seems to work on the generated mesh.

`
const gradientMaps = ( function () {

    const threeTone = new THREE.TextureLoader().load( './images/threeTone.jpg' );
    threeTone.minFilter = THREE.NearestFilter;
    threeTone.magFilter = THREE.NearestFilter;

    return {
        threeTone: threeTone
    };

} )();

var gRoad = new THREE.BufferGeometry( );
        gRoad.createRoad = THREEg.createRoad;
        gRoad.createRoad( curvePoints, lengthSegments, trackDistances);
        var material = new THREE.MeshToonMaterial( { color: 0x049EF4, gradientMap: gradientMaps.threeTone, side: THREE.DoubleSide } );
        material.needsUpdate = true;

        var mesh = new THREE.Mesh( gRoad, material );
        mainScene.append(mesh);`
        
       The road gets created and added to the scene but is black