[Solved] GLTFLoader DRACOLoader in nodejs

Alejandro_Insua · February 2, 2019, 1:54pm

Hi.

I am trying to load a GLTF binary file (glb) with DRACO compression in a nodejs script.
Is there any way to achieve this?

Best regards

Mugen87 · February 2, 2019, 5:35pm

GLTFLoader has a dependency to XMLHttpRequest so it’s not possible to use GLTFLoader.load() without a XHR emulation. Instead, can you try to use fs to load the glb and then pass it directly to the .parse() method. So something like:

const loader = new GLTFLoader();
loader.parse( data, path, onLoad, onError );

There will be problems if your model has textures since HTMLImageElement is not available on node. Same for URL.createObjectURL() which is needed for processing binary image data.

TBH I don’t know if it works at all, so I guess you have to find it out. I would start with a simple glb first and move on with Draco if the everything works.

Alejandro_Insua · February 2, 2019, 7:05pm

Hi.

I am aware of these dependecies.

I was able to load a GLB file without DRACO compression.

My problem is on making Draco decoder working.

Best regards

donmccurdy · February 3, 2019, 8:26pm

I don’t think THREE.DRACOLoader is set up to work in node.js. You’ll probably need to some changes to it, like loading the decoder from the NPM package instead of a script tag. https://www.npmjs.com/package/draco3dgltf

Alejandro_Insua · February 4, 2019, 7:31am

Hi.

Many thanks for the info.

I installed this module in my npm installation but I didn’t see any example about how to parse a gltf file compressed with DRACO compression. The example is related to load a native draco file.

Could you assist me providing me an example?

Many thanks in advanced.

donmccurdy · February 4, 2019, 4:29pm

I don’t have an example of this, but look at the THREE.DRACOLoader source code. It loads a plain Draco decoder using a script tag, which won’t work in nodejs. You need a modified version of DRACOLoader that uses the npm package instead.

Alejandro_Insua · February 4, 2019, 8:46pm

Msny thanks.

I wilk try.

Best regards

Alejandro_Insua · February 26, 2019, 4:59pm

Hi.

After many tries, I have not been able to make GLTFLoader with DRACO compression uder nodejs context.

I have tried to use draco3dgltf npm module but there is any valid example loading a gltf file compressed with DRACO compression.

Could anybody help me?

Many thanks in advanced

donmccurdy · March 4, 2019, 6:10pm

Here’s an example:

gist.github.com

https://gist.github.com/donmccurdy/323c6363ac7ca8a7de6a3362d7fdddb4

DRACOLoader.patch

diff --git a/node_modules/three/examples/js/loaders/DRACOLoader.js b/NodeDRACOLoader.js
index 57767d7..cc46f2c 100644
--- a/node_modules/three/examples/js/loaders/DRACOLoader.js
+++ b/NodeDRACOLoader.js
@@ -14,10 +14,12 @@
 //
 'use strict';
 
+const decoder = require('draco3dgltf').createDecoderModule();
+

This file has been truncated. show original

NodeDRACOLoader.js

// Copyright 2016 The Draco Authors.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,

This file has been truncated. show original

_test.js

/**
 * THREE.GLTFLoader with Draco support in Node.js.
 */

const fs = require('fs');

// All packages in 'three/examples/js' currently require access to the THREE
// variable in global scope. Work on supporting ES modules is in progress.
const THREE = global.THREE = require('three');

This file has been truncated. show original

There are more than three files. show original

Note that, as mentioned in a comment in the gist, GLTFLoader cannot load embedded textures in a Node.js context, because of reliance on browser APIs.

Alejandro_Insua · March 8, 2019, 1:12pm

Many, many thanks.

But the link you have sent to me is no longer valid.

COuld you publish it again?

And very sorry for the delay in aswering you.

Best regards

Alejandro_Insua · March 8, 2019, 1:35pm

Hi.

DOn’t worry.

The change was very easy to implement.

it works like a charm.

: )

Many thanks.

Alejandro_Insua · March 8, 2019, 2:44pm

Hi again.

Very sorry.

I was loading glbs without DRACO compression, this was the reason that it worked:

I have modified the DRACOLoader.js just including the line:
const decoder = require('draco3dgltf').createDecoderModule();
after the line use strict at the beginning.

Let me attach my example: example.js

/* Instructions:
* Have node-v10.13.0-win-x64 installed
* set PATH=%PATH%;C:\Users\ua4192\Documents\Viewer3d\node-v10.13.0-win-x64
* node --max-old-space-size=32000  example.js  <input_file> <input_folder>
*                           <input_file> --> is a plain text with 1 filename (<filename>.glb) in each line
*                           <input_folder> --> is the folder where glb files are allocated.
* 
 * Example:
*            node --max-old-space-size=32000  Generate_CMS_Scene_toDeliver.js lista.txt c:\temp\

*/
// ---------------------------------------------------------------------------------------------------------
// - REQUIREMENTS:
// ---------------------------------------------------------------------------------------------------------
               var  start = Date.now();
               var  before = Date.now();
               var  fs = require("fs")
               global.THREE = require('three')
               //require('./node_modules/three/examples/js/libs/draco/draco_decoder.js');
               require('./node_modules/three/examples/js/loaders/DRACOLoader.js')
               require('./node_modules/three/examples/js/loaders/GLTFLoader.js')

// ---------------------------------------------------------------------------------------------------------
// - ARGUMENTS::
// ---------------------------------------------------------------------------------------------------------
               var listFile = process.argv[2]; // Plain text with filenames separated by lines (each line one filename)
               var inFolder = process.argv[3]; // Input folder where glb files are allocated
               before = Date.now();

               // ---------------------------------------------------------------------------------------------------------
               // - FUNCTIONS:
               // ---------------------------------------------------------------------------------------------------------
               function toArrayBuffer(buf) {
                              var ab = new ArrayBuffer(buf.length);
                              var view = new Uint8Array(ab);
                              for (var i = 0; i < buf.length; ++i) {
                                             view[i] = buf[i];
                              }
                              return ab;
               }

// ---------------------------------------------------------------------------------------------------------
// - GLOBAL VARIABLES::
// ---------------------------------------------------------------------------------------------------------
               var fileArray = fs.readFileSync(listFile, 'utf8').toString().split("\n");
               console.log(fileArray);
               var glbLoader = new THREE.GLTFLoader();
               //THREE.DRACOLoader.setDecoderPath( './node_modules/three/examples/js/libs/draco/gltf/' );
               //THREE.DRACOLoader.setDecoderConfig({type: 'js'});
               
               glbLoader.setDRACOLoader( new THREE.DRACOLoader() );
               
               for (var i=0; i<fileArray.length-1;i++) {
                              var inFilename = inFolder + fileArray[i];
                              console.log("opening file " + inFilename);
                              if (fs.existsSync(inFilename)) {
                                             console.log("loading glb " + inFilename);
                                             var data = fs.readFileSync(inFilename);
                                             var arrayBuffer = toArrayBuffer(data);
                                             console.log(arrayBuffer);
                                             glbLoader.parse( arrayBuffer, '', function ( glb ) {
                                                            console.log(glb.scene);
                                             }, function (event){
                                                            console.log(event);
                                                            console.log("loader failed");
                                             } );
                              } else {
                                             console.log("File doesn't exist " + inFilename);
                              }
               }

COuld you tell me where is my mistake?

Many thanks in advanced.

Alejandro_Insua · March 8, 2019, 2:53pm

Hi.

Afer adding JSDOM requirements in my example Here the code:

// ---------------------------------------------------------------------------------------------------------
// - REQUIREMENTS:
// ---------------------------------------------------------------------------------------------------------
var start = Date.now();
var before = Date.now();
var fs = require(“fs”)
require(‘jsdom-global’)()
global.DOMParser = window.DOMParser
var DOMParser = window.DOMParser
global.THREE = require(‘three’)
require(’./node_modules/three/examples/js/loaders/DRACOLoader.js’)
require(’./node_modules/three/examples/js/loaders/GLTFLoader.js’)

// ---------------------------------------------------------------------------------------------------------
// - ARGUMENTS::
// ---------------------------------------------------------------------------------------------------------
var listFile = process.argv[2]; // Plain text with filenames separated by lines (each line one filename)
var inFolder = process.argv[3]; // Input folder where glb files are allocated
before = Date.now();

// ---------------------------------------------------------------------------------------------------------
// - FUNCTIONS:
// ---------------------------------------------------------------------------------------------------------
function toArrayBuffer(buf) {
var ab = new ArrayBuffer(buf.length);
var view = new Uint8Array(ab);
for (var i = 0; i < buf.length; ++i) {
view[i] = buf[i];
}
return ab;
}

// ---------------------------------------------------------------------------------------------------------
// - GLOBAL VARIABLES::
// ---------------------------------------------------------------------------------------------------------
var fileArray = fs.readFileSync(listFile, ‘utf8’).toString().split("\n");
console.log(fileArray);
var glbLoader = new THREE.GLTFLoader();
//THREE.DRACOLoader.setDecoderPath( ‘./node_modules/three/examples/js/libs/draco/gltf/’ );
//THREE.DRACOLoader.setDecoderConfig({type: ‘js’});

glbLoader.setDRACOLoader( new THREE.DRACOLoader() );

for (var i=0; i<fileArray.length-1;i++) {
var inFilename = inFolder + fileArray[i];
console.log("opening file " + inFilename);
if (fs.existsSync(inFilename)) {
console.log("loading glb " + inFilename);
var data = fs.readFileSync(inFilename);
var arrayBuffer = toArrayBuffer(data);
console.log(arrayBuffer);
glbLoader.parse( arrayBuffer, ‘’, function ( glb ) {
console.log(glb.scene);
}, function (event){
console.log(event);
console.log(“loader failed”);
} );
} else {
console.log("File doesn’t exist " + inFilename);
}
}

Here are my results:

C:\Users\ua4192\DOCUME~1\Viewer3d\app>node --max-old-space-size=32000 dracoLoaderExample.js C:\Users\ua4192\DOCUME~1\Viewer3d\LAST\ASDESIGN\listaGLB
2.txt C:\Users\ua4192\DOCUME~1\Viewer3d\LAST\ASDESIGN\glb2
[ ‘F0221-FH386-STD00002.glb’,
‘M532A375D00200-FDT01.glb’,
‘M879A011D000F3-BS001.glb’,
‘M994A018D20000.glb’,
‘TP201114-------P0001.glb’,
‘’ ]
opening file C:\Users\ua4192\DOCUME~1\Viewer3d\LAST\ASDESIGN\glb2\F0221-FH386-STD00002.glb
loading glb C:\Users\ua4192\DOCUME~1\Viewer3d\LAST\ASDESIGN\glb2\F0221-FH386-STD00002.glb
ArrayBuffer { byteLength: 16824 }
opening file C:\Users\ua4192\DOCUME~1\Viewer3d\LAST\ASDESIGN\glb2\M532A375D00200-FDT01.glb
loading glb C:\Users\ua4192\DOCUME~1\Viewer3d\LAST\ASDESIGN\glb2\M532A375D00200-FDT01.glb
ArrayBuffer { byteLength: 36140 }
opening file C:\Users\ua4192\DOCUME~1\Viewer3d\LAST\ASDESIGN\glb2\M879A011D000F3-BS001.glb
loading glb C:\Users\ua4192\DOCUME~1\Viewer3d\LAST\ASDESIGN\glb2\M879A011D000F3-BS001.glb
ArrayBuffer { byteLength: 39268 }
opening file C:\Users\ua4192\DOCUME~1\Viewer3d\LAST\ASDESIGN\glb2\M994A018D20000.glb
loading glb C:\Users\ua4192\DOCUME~1\Viewer3d\LAST\ASDESIGN\glb2\M994A018D20000.glb
ArrayBuffer { byteLength: 5344 }
opening file C:\Users\ua4192\DOCUME~1\Viewer3d\LAST\ASDESIGN\glb2\TP201114-------P0001.glb
loading glb C:\Users\ua4192\DOCUME~1\Viewer3d\LAST\ASDESIGN\glb2\TP201114-------P0001.glb
ArrayBuffer { byteLength: 17704 }

As you can see, the scene object is never shown in line
console.log(glb.scene); .

And the glbs are Ok, I can open them via THREE.JS editor.
Best regards

Alejandro_Insua · March 8, 2019, 3:16pm

Forget it

I finally found my error.

Best regards and many thanks for your support.

Skylar_Thomas · October 3, 2019, 9:40pm

Sorry, how did you eventually resolve this?

benolayinka · May 16, 2020, 9:59am

I used your custom loader but I had to do this (I was getting a preload not defined error):

// Custom-built version of DRACOLoader, for Node.js.
const NodeDRACOLoader = require('./NodeDRACOLoader.js');

const DRACOLoader = new NodeDRACOLoader()

// GLTFLoader prefetches the decoder module, when Draco is needed, to speed up
// parsing later. This isn't necessary for our custom decoder, so set the
// method to a no-op.
DRACOLoader.getDecoderModule = () => {};
DRACOLoader.preload = () => {};

loader.setDRACOLoader( DRACOLoader );
loader.load('draco.drc', (gltf)=> ...

and change the imports + exports in NodeDRACOLoader.js because the globals weren’t working right

const THREE = require('three');

const decoder = require('draco3dgltf').createDecoderModule();

function DRACOLoader(manager)

module.exports = DRACOLoader

Lems · July 13, 2021, 11:34am

require('draco3dgltf').createDecoderModule() returns a promise for me, so later on in the NodeDRACOLoader it gives me the following error:
TypeError: dracoDecoder.DecoderBuffer is not a constructor

I resolved this error by replacing the decodeDracoFile function in NodeDRACOLoader.js with

decodeDracoFile: function(rawBuffer, callback, attributeUniqueIdMap, attributeTypeMap) {
    decoderPromise.then(decoder => {
      this.decodeDracoFileInternal( rawBuffer, decoder, callback, attributeUniqueIdMap, attributeTypeMap);
    })
  },

drcmda · July 13, 2021, 4:41pm

do you need gltf under node with full binary unpack, or is this just for structural testing, for instance jest checking gtlf integrity or something? in the latter case i’ve made a node compatible gltfloader that only creates structure (GLTFStructureLoader): GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components

donmccurdy · July 13, 2021, 10:07pm

I think the async method here is just a change in the API for recent versions of the Draco package. You can use await similar to the previous setup:

const draco3dgltf = require('draco3dgltf');
const decoder = await draco3dgltf.createDecoderModule();

Florent · October 21, 2021, 12:16pm

It doesn’t work for me:

const decoder = await draco3dgltf.createDecoderModule();
                ^^^^^

SyntaxError: await is only valid in async function

Topic		Replies	Views
Draco compression and node JS? Questions loaders , geometry	1	1048	November 12, 2019
GLTFLoader parse method not works with dracoloader Questions gltf-loader , draco	4	1728	January 14, 2021
A .glb model loaded using GLTFLoader isn't compressing despite using DRACOLoader Questions loaders , gltf-loader , draco	4	4980	April 5, 2018
Load draco gltf Questions loaders , draco	2	4288	January 22, 2019
How to use draco loader? Questions gltf-loader , draco	32	22639	October 7, 2021

[Solved] GLTFLoader DRACOLoader in nodejs

Related topics