Home › Forums › General Questions › Use Verge3d with three.js
Tagged: threejs
- This topic has 4 replies, 3 voices, and was last updated 2 years, 7 months ago by nooki.
-
AuthorPosts
-
2022-05-03 at 10:53 am #51594techmoboParticipant
Hello, in my company we have a pipeline for internal 3d approval and camera sets based on an internal developed tool wich use three.js as engine.
We have some problems exporting gltf models with materials, because we start from very big files in maya and export to fbx (and then convert to gltf) produces very big files.
So I was looking at verge3d plugin for maya just for exporting optimized gltf.I managed to convert models and use them in our process but I have a problem with materials not showing.
I think that gltf generated is not completely standard. If I upload it in autodesk viewer no materials are shown neither.
If I use sneak peak function (in verge3dviewer) everything is fine.I was wondering if there is a way to export standard three.js usable models, with verge3d.
Of course we would buy a license to do that, even if we will not use the frontmost part of verge3d (too difficult to integrate in our system now).See attached picture for details
Attachments:
You must be logged in to view attached files.2022-05-03 at 6:52 pm #51609xeonCustomerHi Techmobo,
There is alot going on in your comments above so I will attempt to assist but may get some things incorrect base on what I am reading vs what you are really doing.
First and foremost, Verge3d is based on three.js. Because of this anything that can be done in three.js can be done using Verge3d but not necessarily using only native V3D puzzles. You might have to use some JavaScript etc. as well.
A pipeline using MAYA, MAX or Blender that starts off creating high res models and textures will require that those same models and textures be optimized in MAYA, MAX or Blender before being exported as V3D GLTFs. This may include but is not limited to, poly reduction, atlas map for shadows, normals, reflection and AO maps, etc. All optimization has to be done before the scene is exported to GLTF.
Not all materials/shader nodes and not all animation methods are supported in Verge3d so you will need to determine if all the items you are exporting are compatible. So when you say you start off with really big models in MAYA then export to GLTF and get really big GLTFs. You don’t want to do that, it will create really big GLTFs that are not usable. Browser memory allocation is very low and you have to manage your number of vertices, triangles, objects, materials, textures, etc. or you will just run out of memory.Shaders are the easiest to diagnose as they will be black, or not visible at all. But if they are all black, you will want to determine if your HDR background (main light source) is loaded or if your lights loaded (I don’t recommend using any lights but that’s another subject).
Also, note you may have different methods of exporting the GLTF. You must have the Verge3d plugin installed and export using the Verge3d GLTF. It is uniquely different from other GLTF exporters. You can export a generic version of GLTF to Autodesk but it will have the same memory limitations as Verge3d. The fact you are getting black materials, it seems likely you have exceeded the memory allocation, missing lights or textures are too big to load.
Exporting standard GLTF models for use with three.js can be exported via Verge3d but it’s better to export from your 3D application. It will be much more efficient and will not contain the Verge3D overhead that is not needed in standard output. Not to mention it will be free since you already have the 3D application.
Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com2022-05-04 at 9:25 am #51640techmoboParticipantHello xeon, and thank you for your response.
I appreciate very much the time you took for analyzing our request.Unfortunately Maya doesn’t have a direct export to gltf, this is mainly the reason why I am searching for alternatives.
My first attempt (working) was exporting model in fbx (natively from maya) and then use fbx2gltf (open source program) to have my gltf. Everything is fine (materials too), for small models (<100mb) but the problem is that no automatic optimization are done in this way on bigger models. (unusable 1Tb gltf done on big project).
Verge3d indeed does a pretty good job in exporting, reducing poly (same big model produces very usable 150mb gltf). Even external textures png are produced in the gltf folder.
The only problem is that if I load this model, or something simpler in a standard player or in our three.js based system (example the cube of attached images), the materials are not shown. N.B. in verge3d preview everything works fine, so I think that the problem is the way verge3d exporter put material links in gltf file.
So I’m asking you if I have to put something different (js call of preload materials?) of GltfLoader of three.js to load materials too.Just to clarify … these are the step to reproduce:
– Take some very simple verge3d gltf generated file with simple texture on it (working in verge3d viewer). No puzzle or interaction.
– Open it in some gltf viewer free online:
https://gltf-viewer.donmccurdy.com/
https://viewer.autodesk.com/it will show no materials at all.
If you think that verge3d it’s not the solution for us, ok, I’ll search something different, but it’s a little bit sad, because it seems to work very well, except for this little issue (i think it’s just some non standard js function to call for loading materials – but I may be wrong).
2022-05-04 at 2:29 pm #51664xeonCustomerTry blender. Export to fbx then import to blender then export to gltf.
Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com2022-05-13 at 1:14 pm #52029nookiParticipantI will use this thread for my question, hope thats ok:
As verge3d is built on top of threejs, is it possible to load the exported “advanced” verge3d gltf in a basic threejs setup?
Im looking for a solution for our team consisting of developers (js / ts with nodejs environment) and artists (mainly blender).
Right now, there is no good solution for the artist to setup a scene in threejs (lighting/ env reflection/ post processing etc.) without getting into coding or building custom solutions. For me, it looks like verge3d could fill this gap with its blender export, so the artist could setup the hole scene in blender and hand it over to dev. The puzzle feature looks very nice, but for our case, we want to build the logic the “classic” way. Is this somhow possible? -
AuthorPosts
- You must be logged in to reply to this topic.