DRACOLoader doesn’t work when uploaded to the web (How to use DRACOLoader without using wasm) (Threejs)

Things I want to do

How to fix the issue where the following implementation works locally but fails when uploaded to the web.

圧縮されたglTF(.glb)ファイルをLoadして表示(Threejs)

やりたいこと圧縮されたglTF(.glb)ファイルをThreejsを読み込む。圧縮方法は↓環境Threejs：　r150Chrome：　111.0.5563.65準備...

blog.marunokan.com

2023.04.06

When I uploaded a locally running Javascript to Conoha, the following error was displayed and it failed to load.

4f251973-f58e-42c3-b428-9252c0610ca9:39 failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected 97 bytes, fell off end @+187
4f251973-f58e-42c3-b428-9252c0610ca9:25 Aborted(CompileError: WebAssembly.instantiate(): expected 97 bytes, fell off end @+187)
4f251973-f58e-42c3-b428-9252c0610ca9:25 Uncaught (in promise) RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected 97 bytes, fell off end @+187). Build with -sASSERTIONS for more info.
    at f (4f251973-f58e-42c3-b428-9252c0610ca9:25:34)
    at 4f251973-f58e-42c3-b428-9252c0610ca9:39:438

Environment

Threejs：　r150

Chrome：　111.0.5563.65

Use DRACOLoader instead of wasm.

JavaScript

Modify the DracoLoader creation as follows: Set the type to js.

	const loader = new GLTFLoader();
	const dracoLoader = new DRACOLoader();
	dracoLoader.setDecoderPath('./js/libs/draco/');
	dracoLoader.setDecoderConfig({ type: 'js' });　//追加
	loader.setDRACOLoader(dracoLoader);

The additional code is the following single line:

	dracoLoader.setDecoderConfig({ type: 'js' });　

This will allow it to run using only Javascript without using Wasm.

However, loading seems to be slower than with wasm. (I didn’t notice much difference in my experience.)

Result

I was able to load and display the compressed dice-c.glb file on the web, just as I did locally.

Websites I used as references

three.js/examples/jsm/libs/draco/README.md at dev · mrdoob/three.js

JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.

github.com

Related pages

A summary of how to load and display 3D objects created in Blender using Threejs.