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

Questions
, ,
42

How do you use it in conjunction,
I know with draco its,

gltfLoader.setDRACOLoader(dracoLoader);

but it’s not

gltfLoader.setBasisTextureLoader(basisLoader);

43

like this, after this you can go on to load gltf as normal i think

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

import * as THREE from "three";

import {BasisTextureLoader} from 'three/examples/jsm/loaders/BasisTextureLoader'

export function addModel(renderer) {

  const gltfLoader = new GLTFLoader();

  const basisLoader = new BasisTextureLoader();

  basisLoader.setTranscoderPath( '../vendor/basis/' );

  basisLoader.detectSupport( renderer );

  // gltfLoader.setBasisTextureLoader(basisLoader);

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

    gltfLoader.load(

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

      

      (data) => resolve(data),

      null,

      reject

    );

  });

}
45

If you’re compressing with glTF-Transform, the Basis texture data will be embedded as .ktx2 files and need KTX2Loader to process. Here’s how I’d set that up:

This assumes the msc_basis_transcoder.js file is already added as a script to the page… trying to make that part automatic, until then see the three.js KTX2 example.

2 Likes
46

I need to read up on how to use Loading Manager, thanks for the example.

47

Sorry to be a pain, but I’m getting this error now.

ReferenceError: MSC_TRANSCODER is not defined

import { GLTFLoader } from “three/examples/jsm/loaders/GLTFLoader”;

import * as THREE from "three";

import {KTX2Loader} from 'three/examples/jsm/loaders/KTX2Loader'

import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader'

export function addModel(renderer) {

  const manager = new THREE.LoadingManager( () => {})

  const gltfLoader = new GLTFLoader(manager)

  .setCrossOrigin('anonymous')

  .setDRACOLoader( new DRACOLoader( manager ).setDecoderPath( '../vendor/draco/' ) )

  .setKTX2Loader( new KTX2Loader( manager ).detectSupport( renderer ) );

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

    gltfLoader.load(

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

      

      (data) => resolve(data),

      null,

      reject

    );

  });

}
48

@Samuel-Morgan-Tyghe

see the example three.js KTX2 example. suggested…

image

1 Like
50

Perfect, to summarise model Optimistation currently for 2021-01-19T00:00:00Z

  • WebP is the best for smallest file size, it will be supported for iOS 14 but currently best practice of inclusivity means stick to JPG and PNG

  • For fastest GPU and potentially the smallest file size use a Basis/.ktx2 compressor and use the Three Loaders to add to model

  • For faster GPU compress Geometries using Draco compressor then load with Draco Loader

  • Currently, one of the best things to do is use gltf-transform created by the wonderful @donmccurdy .It can input a Model(gltf) compress the Geometrys , Textures and then output as a loadable Model

alternatives are:

To compress your first Model / TLDR

npm install --global @gltf-transform/cli

from the ‘Asset’ section of here download and install

To implement follow the below trend
gltf-transform <command> <input> <output>

gltf-transform etc1s input/file/gltf.gltf /output/gt.gltf

more commands and options available here

Download and add Draco Transcoders from THREE GitHub, add to your project msc_basis_transcoder.js file

reference the

msc_basis_transcoder.js

In the html (this file might be skippable/embedded in the future, I think)

<script src="../wherever/the/path/to/the/file/in/your/project/is/msc_basis_transcoder.js"></script>

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
export function addModel(renderer) {
const gltfLoader = new GLTFLoader()
.setCrossOrigin("anonymous")
.setDRACOLoader(new DRACOLoader().setDecoderPath("../where/you/saved/the/draco/decoder/folder/"))
.setKTX2Loader(new KTX2Loader().detectSupport(renderer));
gltfLoader.load(
// resource URL
'models/gltf/duck/duck.gltf',
// called when the resource is loaded
function ( gltf ) {
scene.add( gltf.scene );}    )    }
2 Likes
51

Yep, this all looks right to me! I’m hoping to change the installation process of msc_basis_transcoder.js in the next month to make that work more like DRACOLoader currently does, not requiring a <script/> tag on the page.

I’d add that gltfpack has some really nice features for simplification and optimization, including very fast decompression at loading time, so it’s a great alternative, too. But the optimization process does simplify the internal structure of the model in more opinionated ways than the other tools, so you do need to be careful of that part.

2 Likes