BestPractice: JPG attached to model or Load WebP to Model?

Thanks, for the response, still getting the Error: THREE.DRACOLoader: Unexpected geometry type.

#

Fixed the issues, fresh gltf file, renamed decoder files, then new problem ([.setDecoderPath()]is not a function (Issue with .setDecoderPath()))
use Issue with .setDecoderPath() - #2 by Mugen87

All Working!!!

@Samuel-Morgan-Tyghe

ahh ok, thought that was odd, have you declared you gltf loader at all or as the same “const loader” as the draco one? try your loaders setup like this…

const gltfLoader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '../vendor/draco/' );
gltfLoader.setDRACOLoader( dracoLoader );
gltfLoader.load('models/'Draco.gltf', function (gltf) {

    gltf.scene.traverse(function (child) {
        if (child.isMesh) {

// do stuff with meshes.....            

        } 
    });
        scene.add(gltf.scene);
}

@Samuel-Morgan-Tyghe
what version of three and loaders are you using? latest?

I am using the latest, the filename had a mistype so the decoder wasn’t working, In trying to fix it i swapped >

     dracoLoader.setDecoderPath( '../vendor/draco/' );

to

     gltfLoader.setDecoderPath( '../vendor/draco/' );

Because of something I read in a threejs forum post, and forgot to swap it back as I had corrected the mistype.

1 Like

@Samuel-Morgan-Tyghe
Ah OK great, all fixed?

1 Like

Yes all fixed, only thing left is to uninstall all this extra stuff.

60fps,18/19ms, 22mb
from
60fps, 17/18ms, 23mb

There’s a slight increase, thanks everyone.

1 Like

@Samuel-Morgan-Tyghe
after some testing of my own i have found that basisu is the best approach for me as i optimise geometry while modelling in maya therefore draco will only decrese my model size by about 2kb, whereas basis texture format has solidly decresed texture sizes by 50% consistently with pretty good results!!

have a look into npm basisu and give me a shout if you need help with the process!

Thanks Forerunrun, am I right in saying , this requires a command

basisu 3dmodelImage.png

will create 3dmodelImage.basis,
then I use the Three Basis Loader to add to the model.

Is there a shortcut to converting them, For example a model with multiple mesh/material …
and loading that model with all its associated media files converted to Basis files?

also I got as far as adding the Cmake.txt file to project, and experimenting with cmake -help,

```
cmake CMakeLists.txt
make
```

results with

PS C:\Users\Sam\Coding Projects\3d-desk-2\3d-Desk-CV> cmake CMakeLists.txt
>> make
-- The C compiler identification is unknown
-- The CXX compiler identification is unknown
CMake Error at CMakeLists.txt:1 (project):
  The CMAKE_C_COMPILER:

    cl

  is not a full path and was not found in the PATH.

  To use the NMake generator with Visual C++, cmake must be run from a shell
  that can use the compiler cl from the command line.  This environment is
  unable to invoke the cl compiler.  To fix this problem, run cmake from the
  Visual Studio Command Prompt (vcvarsall.bat).

  Tell CMake where to find the compiler by setting either the environment
  variable "CC" or the CMake cache entry CMAKE_C_COMPILER to the full path to
  the compiler, or to the compiler name if it is in the PATH.


CMake Error at CMakeLists.txt:1 (project):
  The CMAKE_CXX_COMPILER:

    cl

  is not a full path and was not found in the PATH.

  To use the NMake generator with Visual C++, cmake must be run from a shell
  that can use the compiler cl from the command line.  This environment is
  unable to invoke the cl compiler.  To fix this problem, run cmake from the
  Visual Studio Command Prompt (vcvarsall.bat).

  Tell CMake where to find the compiler by setting either the environment
  variable "CXX" or the CMake cache entry CMAKE_CXX_COMPILER to the full path
  to the compiler, or to the compiler name if it is in the PATH.


-- Configuring incomplete, errors occurred!
See also "C:/Users/Sam/Coding Projects/3d-desk-2/3d-Desk-CV/CMakeFiles/CMakeOutput.log".
See also "C:/Users/Sam/Coding Projects/3d-desk-2/3d-Desk-CV/CMakeFiles/CMakeError.log".
make : The term 'make' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:2 char:1
+ make
+ ~~~~
    + CategoryInfo          : ObjectNotFound: (make:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

@Samuel-Morgan-Tyghe

i don’t think you need cMake if you use this…

the from node.js cmd you can run the function to convert to basis, i found it best if you first cd into the directory you want to save the basis files to and then in notepad++ you can layout a batch of images you want to process like this…

npx basisu G:/path/to/image1.png
npx basisu G:/path/to/image2.png

this will take theses images and the output them as .basis files to the directory you originally cd’d to, you can then setup yout three scene with basis image loader and decoder…

here is an example that uses .basis images

1 Like

Fantastic, I was overcomplicating things. Yes it does work.

1 Like

after installing [glTF-Transform] then said I needed to install KTX, and to install that I needed to install Cmake to build KTX to run the GLTF-Transform command to optimise the gltf/glb file.

No need to install Cmake or to build KTX-Software — it has prebuilt binaries in the releases tab here: Releases · KhronosGroup/KTX-Software · GitHub

Is This right? And is this better than BasisU?

The compression technology is the same, both use Basis Universal libraries. The difference is that .basis (output of basisu CLI) is a custom container format and can’t be embedded in a glTF file in any official way - you’d need to load your textures and models separately. Whereas .ktx2 is a more standard container format, is supported in glTF, and you can bundle the compressed textures into your glTF files.

Note that Draco affects only geometry, whereas BasisU and KTX affect only textures, so these are complementary.

2 Likes

Thanks, how do I install KTX-Software?

@donmccurdy I didn’t know this, I managed to change the gltf file so all mime types are basis and simply changed all .jpg to .basis and it loaded through the gltf loader with basis decoder, nevertheless gonna try ktx software install again was having the same problem thinking I need cmake

Thanks, how do I install KTX-Software?

From the Releases page, open the “Assets” dropdown and download the automated installer for your operating system.

2 Likes

Perfect, it worked when adding the options ‘development’ and add PATH to user.

@donmccurdy
glTF-Transform works great!
image
not that much of a reduction but still, i think i had already majorly compressed these images…

Edit:
these output files actually resulted in larger file sizes…
image
any idea why that might be?

thanks for the help with KTX install!!

I have the same,

info: gltfdesk.gltf (5.64 MB) → gt.gltf (5.93 MB)

and i havent been able to load it

TypeError: Cannot read property ‘uri’ of undefined
at GLTFParser.loadTexture (main.js:108966)

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";

import * as THREE from "three";

import { MeshoptDecoder } from "../vendor/meshopt_decoder.module.js";

export function addModel() {

  const gltfLoader = new GLTFLoader();

  // const dracoLoader = new DRACOLoader();

  // dracoLoader.setDecoderPath("../vendor/draco/");

  // gltfLoader.setDRACOLoader(dracoLoader);

  return new Promise((resolve, reject) => {

    gltfLoader.load(

      "../dist/assets/models/output/gt.gltf",

      (data) => resolve(data),

      null,

      reject

    );


  });

}

@Samuel-Morgan-Tyghe
you should be able to load that, you now need to use basis texture loader in conjunction with basis decoder and gltf loader, not draco, unless you’ve also used draco compression on your mesh?

should look like this…

const basisLoader = new BasisTextureLoader();
basisLoader.setTranscoderPath('../../../examples/js/libs/basis/');
basisLoader.detectSupport(renderer);
1 Like

these output files actually resulted in larger file sizes…

Making smaller files is not really the purpose of Basis — sometimes it will, depending on your compression settings, but it’s not always better than JPEG for size. The main goal is to reduce GPU memory (JPG and PNG textures have to be fully decompressed in GPU memory) and to have the textures upload from JS memory to GPU memory much faster, avoiding rendering freezes while loading a new texture. See the gltf-transform etc1s -h documentation for a bit more detail here.

2 Likes