GitHubDragonFly's Website - access it here.
Even though this is all usable, none of it is perfect so try to set your expectations accordingly.
The description below is a bit lengthy but should provide pertinent information.
Pictures or intro video might not reflect the current looks of any GUI.
This website is designed to serve as a hub with links to:
- My repositories
- Number Type Converter up to 128-bit
- nunuStudio games and experiences examples
- FREE online in-browser three.js based
3D Model
andTexture
viewers - Three.js based
Cube Shading
,Celestial Bodies
andIMG2MESH
pages
Originally designed for a desktop but has been adapted to also show properly on mobile devices with some limitations:
- See screenshots below for different appearances of the main menu page
- Mobile viewers are available on desktop computers
- Desktop viewers can be opened on mobile devices by clicking the
D
button:- Kind of intended for tablets, might look cluttered on mobile phones
- As per the PageSpeed Insights basic tests, almost all the pages / code:
- Are highly performant:
- relatively scored depending on how busy and responsive
github
cdn.jsdelivr.net
esm.sh
networks are at the time of testing
- relatively scored depending on how busy and responsive
- Follow Best Practices
- Are SEO optimized
- Are Accessibility optimized (AODA in Ontario)
- keyboard users might be somewhat limited to what's implemented within three.js library
- Are highly performant:
The Mobile 3D
button provides access to stripped down and simplified version of mobile friendly 3D viewers:
- Almost all viewers are currently available and should work fine on desktop devices as well
- Mobile
Quick Viewer
,GM Viewer
andGLTF Viewer
also include some export options and more features - Consider bookmarking the mobile main page for continuous access to all viewers
- Consider bookmarking any single viewer's link for continuous access to that particular viewer
- Consider using WiFi connection, whenever possible, since the library files still need to be downloaded
- All mobile testing was done on an Android mobile phone and an iPad
- You might need to use the
URL
loading on an iPad - Android users should be aware of the following:
- Some browser updates could break some functionality (either Chrome or Firefox or any other):
- Always rely on using multiple browsers, one of them might still be working properly
- Some browser updates could break some functionality (either Chrome or Firefox or any other):
- You might need to use the
GitHub servers are providing correct access to all files:
- Cloning or downloading this repository and using it offline will have a somewhat reduced functionality if run locally without some server
- These GitHub servers are also setting
CacheControl
to last only for 10 minutes so you might need to refresh the current page as needed - No cookies will be served by my pages
Repositories do contain projects in several different programming languages, or a mix of:
HTML / CSS / JavaScript / jQuery
Java
VB.Net
C#
python
shell
There is a lot of information and descriptions, some intended for Industrial Automation and some for general or personal use. All is good as an educational resource as well.
For those who either deal with or are just learning about Programmable Logic Controllers (PLC):
- Use whatever you can from my repositories
- Make the AdvancedHMI website your next stop for highly functional FREE software.
The Intro
button on the desktop main menu page will connect to the intro video below:
- The video shows a little bit of info on the main menu interface
- The video shows how to start using 3D viewers by browsing and loading OBJ model files from a hard drive
- This button is not available on the mobile menu
- It might be simpler to open models via any viewer's
URL
option, provided that you have the actual model's URL available - This video was captured by using the free and open source OBS Studio software
- Videos available in my other repositories were also captured by the OBS Studio.
Intro.mp4
Main Menu Page (desktop)
Main Menu Page (mobile)
- Appears to be fully functional for conversion between:
- binary
- hexadecimal
- octal
- signed and unsigned 8, 16, 32, 64 and 128 bit integers
- 32 and 64 bit floating-point numbers
- This is an online version of the Windows App found here so check its description
- An open mind and some knowledge of number systems, hopefully binary, will help understand the displayed values
- Not all numbers might be easily visible on mobile devices so use only when needed
- Possibly of good use to those who deal with Programmable Logic Controllers (PLC) and students
- Note about float parser: if it encounters an invalid character, as per standard number rules, then it will stop and complete parsing of the string as a valid number which was present up to that point (ex. if you would enter
-75-88.5
under Float32 then it will be parsed as-75
) - Integer representation of the floating-point values might be inaccurate due to precision and / or rounding
Number Type Converter
- This page is just showcasing the nunuStudio games and experiences examples
- These examples are interesting and could keep you busy and entertained for a little while
- Designed for a desktop, might not be as good on mobile devices but are available regardless:
- As for the AR / VR experience,
AR
and/orVR
button should remain visible if your device supports it:- got at least VR working on an Android phone with Chrome + Cardboard
- As for the AR / VR experience,
- The code of my page shows how to import and use the latest available nunuStudio version from CDN
- The nunuStudio repository has not been updated in a while and appears to have some unresolved issues
-
They are functional
AS THEY ARE
-
Purely designed as an online convenience
-
Intended for viewing a single 3D model or scene:
- Remote loading is done via the
URL
button, which has associated URL textbox - Local loading is done via the browse button:
- Browser specific, desktop viewers might show this button as either
Browse...
orChoose Files
- Mobile viewers show it as the
Browse
button
- Browser specific, desktop viewers might show this button as either
- Remote loading is done via the
-
Any of the viewers might have bugs and interface / library related limitations
- Some viewers might be slow to load some models, usually if using
WASM
of some library
- Some viewers might be slow to load some models, usually if using
-
Currently experimental three.js
WebGPU
support is included in experimentalGLTF
,OBJ+MTL
andPDB
WebGPU viewers:- Use either Chrome or Safari browser with its
WebGPU experimental features
enabled to test these viewers (and your computer):- Not really sure if WebGPU in Firefox Nightly browser works properly yet
- All 3 viewers are customized and also have some export options available:
GLTF WebGPU
viewer can also be used to optimize and compress GLTF / GLB models
- Mobile versions of these 3 viewers are available but not properly tested yet
- Standalone versions of
GLTF WebGPU
andOBJ+MTL WebGPU
viewers are available in theviewers/webgpu/
folder:GLTF WebGPU
standalone viewer is using the official three.jsGLTF Loader
importOBJ+MTL WebGPU
standalone viewer is using built-in custom version ofOBJ Loader
andMTL Loader
- Both viewers additionally support drag-and-drop and ZIP files
- Export functionality is currently limited to GLTF / GLB exports in these standalone viewers:
- Both viewers are using the official three.js GLTF Exporter
- Emissive bloom post processing effect (represented with the
PP
button):- Currently available in both standalone and desktop versions of GLTF and OBJ+MTL WebGPU viewers
- This emissive bloom effect can only be applied to a model which has a built-in emissive component:
- Maybe try the Emissive Strength Test GLB example from Khronos Group
- It should only work with an unmodified originally loaded model:
- Manipulating any of the following will disable the bloom effect until their initial values are restored:
equirectangular background
andgradient color background
edges
,wireframe
andopacity
- Manipulating any of the following will require a full model reset in order to use the bloom effect:
material side
,flatShading
andxtra smooth
- Manipulating any of the following will disable the bloom effect until their initial values are restored:
- This is currently set as a somewhat mild effect so try lowering the lights intensity to see it better
- Use either Chrome or Safari browser with its
-
Memory handling should be good, relatively speaking:
- With every next model loaded the previous model geometries / materials are being disposed of
- Viewers are webpages so it might be easier to just refresh the whole page before loading the next model
-
Desktop viewers should be usable on as low as 800 x 600 screen resolution:
- Page zoom might need to be adjusted to keep controls uncluttered
- There is a full-screen switching button which can also help or just use your browser shortcut keys
- 640 x 480 screen resoultion should also work but might present a limited workspace and visibility
- Workaround for any low desktop resolution is to use stripped down and mobile friendly viewers instead
-
Different three.js revisions are used throughout and with lots of customized code:
- Applicable to desktop usage - the page title of most viewers, when visible, should show what three.js revision is being used
- Most viewers currently use
importmap
andmodule
imports:- If, for whatever reason, you might need a
non-module
version of three.js files then consider using the Demoduler which might have some limitations
- If, for whatever reason, you might need a
-
Error handling narrows down to showing the
ERROR!
message so check the console output for details -
On a desktop computer, most viewers will show some renderer info in the console after the model is loaded (like number of draw calls, triangles ... etc)
-
To modify or customize your 3D model:
- Use the Blender software
- Use either the official three.js editor or try its customized version
- Additional tool for textures, requires an account and compatible hardware: NVIDIA Texture Tools Exporter
-
These would be the mouse controls:
- Rotation = left-click + hold + drag
- Move = right-click + hold + drag
- Zoom In / Out = mouse scroll wheel
- The equivalent touch controls should work fine on mobile devices
- Most viewers have the
zoomToCursor
feature enabled, which should work with touch controls as well - Hover the mouse over controls in the desktop viewers to se a popup description of the control:
- If the control is not disabled then it might show a red border around it (applicable to button, color and select controls)
-
Special notes about
Image to 3D Mesh Viewer
:- It shows as
IMG2MESH
under theGeneral
option of the main menu - Based on thrax version of code:
https://tartan-swanky-plutonium.glitch.me/
- Original code:
https://github.com/shaoruu/three-extruded-image
- Supported import image formats:
- BMP, DDS, DIB, GIF, ICO, JPEG, PNG, SVG, TGA, TIFF, WEBP
- Local blobs and remote URL loading are supported:
- URLs have to end with supported extension
- GitHub URLs are supported
- Supports exporting to the following formats:
- Animated GIF and PNG (see general notes about these formats further below)
- 3DM, GLB, GLTF, JSON, OBJ+MTL, USDZ:
- Maximum exported texture size is currently limited to 2k
- It shows as
-
Special notes about
AR / VR Viewer
:- Using slightly modified version of the three.js
DeviceOrientationControls
, last available in r133 - Currently highly experimental so it might work or it might not work properly or at all
- My tests had it working with Chrome browser on both the desktop and an Android mobile phone:
- Either as a standard viewer or with AR / VR support
- Supported import formats (single model or scene only):
- 3MF, BIM, DAE, FBX, GLB, GLTF, PLY, USDZ
- Local blobs and remote URL loading are supported
- Local model files should be self-contained (embedded or binary)
- Currently available features:
- Model resizing
- Auto rotation
- Equirectangular background
- Using slightly modified version of the three.js
-
Special notes about
A-FRAME Viewer
:- It is using A-Frame Library / Framework which makes it A-Frame specific
- It is currently highly experimental so not sure if everything works as it should be
- It is supposed to be used mainly on mobile devices supporting AR / VR
- Supported import formats (single model or scene only):
- BIM, DAE, FBX, GLB, GLTF, PLY, USDZ
- Local blobs and remote URL loading are supported
- Local model files should be self-contained (embedded or binary)
-
Special notes about
SPLAT Viewer
:- It is using @pmndrs/drei-vanilla splat loader built around antimatter15/splat
- Supports both local blob and remote URL loading
- It requires a good and fast graphics hardware
- There is an untested VR button available
- Only APNG exporter is available
- For converting your PLY files to splat you could use:
- the original WebGL Gaussian Splat Viewer
- Super Splat editor
- Here is a URL for the lego brick splat model, made of points and available in my repository, that you can use for testing:
https://raw.githubusercontent.com/GitHubDragonFly/GitHubDragonFly.github.io/main/viewers/examples/legobrick.splat
- Some more splat files available here
- This viewer also supports loading of Luma Splats URLs:
- An example URL to use for testing
https://lumalabs.ai/capture/ca9ea966-ca24-4ec1-ab0f-af665cb546ff
- More info on Luma WebGL Library
- Luma AI website appears to have an iOS App available for capturing luma splats
- An example URL to use for testing
-
Special notes about GLTF viewers:
GM Viewer
is for v2.0 glTF files and is currently using Google's model-viewer web component:- Supports both local (blob) and remote URL loading
- Local loading supports self-contained models (embedded GLTF or binary GLB) as well as GLTF + BIN + Textures
- The viewer supports loading of multiple models at once, which will be switchable with the viewer's
M
button
GLTF Viewer
is for v2.0 glTF files and is currently using r169 of three.js:- does not support obsolete
pbrSpecularGlossiness
- supports currently arbitrary
KHR_animation_pointer
- does not support obsolete
GLTFS Viewer
is for v2.0 glTF files and is currently using r150 of three.js:- supports obsolete
pbrSpecularGlossiness
- does not support either
Anisotropy
or currently arbitraryKHR_animation_pointer
- supports obsolete
GLTF Legacy
viewer is for v1.0 glTF files and is purely experimental and rather limited (see notes further below)
-
Special notes about
ASSIMP Viewer
which is using ASSIMPJS interface and ASSIMP library:- This is a revamped version of my GLTF Viewer and is a sort of ASSIMP(JS) + three.js hybrid
- It can be used instead of both GLTF v1.0 and v2.0 viewers and also provides more export options
- Here are example URLs for GLTF v1.0 of the Barramundi Fish so just pay attention to the special case of the
glTF + BIN + textures
formatting:https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/1.0/BarramundiFish/glTF-Binary/BarramundiFish.glb
https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/1.0/BarramundiFish/glTF-Embedded/BarramundiFish.gltf
https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/1.0/BarramundiFish/glTF/BarramundiFish.gltf, https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/1.0/BarramundiFish/glTF/BarramundiFish.bin, https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/1.0/BarramundiFish/glTF/BarramundiFish_texture_0001.jpg, https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/1.0/BarramundiFish/glTF/BarramundiFish_texture_0002.jpg, https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/1.0/BarramundiFish/glTF/BarramundiFish_texture_0003.jpg, https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/1.0/BarramundiFish/glTF/BarramundiFish_texture_0004.jpg, https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/1.0/BarramundiFish/glTF/BarramundiFish0FS.glsl, https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/1.0/BarramundiFish/glTF/BarramundiFish0VS.glsl
- Loading ASSIMP models will have
flatShading
turned ON so hit theF
button to turn it OFF if required - It tries to take advantage of the
THREE.MeshPhysicalMaterial
to bring a GLTF alike functionality for OBJ + MTL models - Has multiple export options available, with special notes about JSON formats:
- Try using JSON Viewer to see all models exported as
JSON
- Try using JSON Legacy viewer to see all models exported as
ASSJSON
- Both
JSON
andASSJSON
exported files use the same.json
extension
- Try using JSON Viewer to see all models exported as
- GLTF / GLB v2.0 and DRC models will be handled by three.js, as originally intended, and there is no special URL formatting required for
glTF + BIN + textures
(just use the URL of the GLTF model) - All other formats, including GLTF / GLB v1.0, will be initially handled by ASSIMP(JS), converted to
GLB2
and passed on to the three.jsGLTF Loader
for displaying - Supported formats: 3D, 3DS, 3MF, A3D, AC, AC3D, ACC, AMF, ASE, B3D, BLEND, BVH, COB, CSM, DAE, DRC, DXF, FBX, GLB, GLTF + BIN, HMP, IFC, IQM, IRR, IRRMESH, KMZ, LWO, LWS, LXO, MD2, MD3, MD5MESH, MDC, MDL, MESH, MS3D, NDO, NFF, OBJ + MTL, OFF, OGEX, PK3, PLY, PMX, Q3O, Q3S, RAW, SIB, SMD, STL, TER, X, X3D, XGL, XML, ZAE, ZGL
- Unsupported formats: BSP, JT, M3, WRL
- the viewer will allow you to select these files but they didn't work for me
- M3D format is disabled since no longer maintained within ASSIMP
- When using the viewer's
URL
option remember the following:- BIN and / or MTL file URLs might need to be added alongside the model URL and comma separated, this would normally apply to some GLTF and OBJ files, for example:
https://raw.githubusercontent.com/assimp/assimp/master/test/models/OBJ/spider.obj, https://raw.githubusercontent.com/assimp/assimp/master/test/models/OBJ/spider.mtl
https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/main/2.0/CesiumMilkTruck/glTF/CesiumMilkTruck.gltf, https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/main/2.0/CesiumMilkTruck/glTF/CesiumMilkTruck.bin
- For MD2 models you would have to add their texture URL, for example:
https://raw.githubusercontent.com/assimp/assimp/master/test/models/MD2/faerie.md2, https://raw.githubusercontent.com/assimp/assimp/master/test/models/MD2/faerie2.bmp
- If textures are not automatically fetched with the model URL only then add the texture location URL, for example:
https://raw.githubusercontent.com/SaschaWillems/VulkanSponza/master/data/sponza.dae, https://raw.githubusercontent.com/SaschaWillems/VulkanSponza/master/data/sponza/
https://raw.githubusercontent.com/oecax2208/PyMikuMikuDance/master/example/vdproject_peach_v1/小桃初代女仆v1.pmx, https://raw.githubusercontent.com/oecax2208/PyMikuMikuDance/master/example/vdproject_peach_v1/Texture/
- BIN and / or MTL file URLs might need to be added alongside the model URL and comma separated, this would normally apply to some GLTF and OBJ files, for example:
-
Special notes about mobile
Quick Viewer
which is using Online 3D Viewer engine:- It is purely online based and can be used as standalone HTML file (just delete
favicon.ico
import) - Supported import formats: 3DS, 3DM, 3MF, AMF, BIM, BREP, BRP, DAE, FBX, FCSTD, GLB, GLTF + BIN, IFC, IGES, IGS, OBJ + MTL, OFF, PLY, STL, STEP, STP, WRL
- Supported export formats: BIM, PLY, STL, OBJ, OFF, GLB and GLTF v2.0 (even on a mobile phone as tested on an Android device)
- Loading via URL currently requires all model files URLs and comma separated (no files will be fetched automatically), here is an example for Khronos CesiumMilkTruck:
https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/CesiumMilkTruck/glTF/CesiumMilkTruck.gltf, https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/CesiumMilkTruck/glTF/CesiumMilkTruck_data.bin, https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/CesiumMilkTruck/glTF/CesiumMilkTruck.jpg
- For proper viewing and additional features try using the actual Online 3D Viewer website
- Most of the following notes do not apply to Quick Viewer in general
- It is purely online based and can be used as standalone HTML file (just delete
-
Special notes about
USDZ Viewer
:- Currently, it only supports USDZ files with USDA (ascii model packed in)
- USDZ files with USDC (binary model packed in) can be viewed with the following:
- USDZ Online Viewer
- USD Viewer
- Both of the above can also be used as a workaround to export some models to GLB format and then:
- use either my GLTF Viewer or three.js editor to export it to USDZ with USDA packed in
-
Special notes about
GLTF Legacy
viewer:- Using modified version of mrdoob's model-tag element
- Set in 500 x 500 viewport and seems to have a good fit on mobile devices
- Supported import formats: GLTF v1.0 + BIN + Textures
- Unsupported import formats: GLB
- It can export to GLTF / GLB v2.0 and OBJ formats (animations are not currently supported)
- Maybe use the ASSIMP Viewer instead since it has less limitations and more export options
- Most of the following notes do not apply to GLTF Legacy viewer in general
-
Menu with controls can be located either on top or on the bottom of the page
-
Almost all viewers include the interactive
Orbit Controls Gizmo
for orientation, either old or new version -
Most viewers, if not all, have been tested as functional in the latest Firefox / Chrome / Edge / Safari browsers
- do note that mobile Safari browser might be finicky about certain features
-
Some loading instructions are also available in HTML_CSS_JS_Flask and HTML_CSS_JS repositories
-
Drag-and-drop is currently only supporteded in current standalone and desktop WebGPU viewers
-
ZIP file support is currently only available in OBJ+MTL viewers and current standalone and desktop WebGPU viewers
-
Import files locally from a file browser dialog:
- All files have to be in the same folder
- Some viewers might have some limitations
- Possibly update your models to look for textures in the same folder
- Make any necessary changes on your device to allow local file browsing
-
Import files via remote URL:
- Multiple comma separated URLs are allowed in some viewers and can be from mixed websites
- For single URL:
- Most viewers support GitHub
- Some viewers support Dropbox and URLs without extension
- For quick testing, see the
URLS4MODELS.md
file for corresponding URL examples
- URLs should have no CORS restrictions
-
Import formats, where applicable, with any optional or required textures:
- 3DS, 3DM, 3MF, AMF, DAE, FBX, IFC, JSON, OBJ + MTL, PCD, PDB, PLY, VTK, VTP, STL, PRWM, USDZ, WRL, XYZ
- GLTF supported formats: GLB, GLTF + BIN, DRC, VRM
- GCODE supported formats: GCODE, NCC, NGC
- LDRAW supported formats: DAT, L3B, LDR, MPD
- MMD ( Miku Miku Dance ) supported formats: PMD, PMX, VMD, VPD, SPA, SPH, MP3, OGG
- Embroidery supported formats: DST
- This is using customized DST Embroidery File Loader
- The
images
folder also includesthreadNormal
andthreadTexture
images from the same website
- OCCT supported formats: STEP, STP, IGES, IGS, BREP, BRP, BIM
- STEP++ Viewer is using:
- occt-import-js library
- Modified version of dotbim.three.js:
- Custom three.js compatible BIM Loader is also available
- Alternative three-iges-loader when the main loader errors out
- STEP++ Viewer is using:
-
Export formats, where applicable:
- 3DM, BIM, DAE, APNG, FBX, STEP, X3D, X, ASSJSON, GIF, GLB, GLTF, JSON, OBJ + MTL, OFF, PLY, STL, PRWM, USDZ
-
OFF exports are only available in the Quick Viewer, as stated further above
-
BIM exports are available in the Quick Viewer as well as some other viewers with custom BIM Exporter
-
3DM exports are powered by rhino3dm, with the following notes:
- This is a custom exporter not officially available in the three.js library
- It requires a modified version of the 3DM Loader, which is included in this repository
- Currently supports exporting textured meshes, points and line segments:
- Mesh geometry could be either of: Buffer, Sphere, Box, Cylinder, Cone, Icosahedron and maybe other
- Textures and additional MeshPhysicalMaterial properties are passed via user strings
- Maximum texture resolution is limited to 2.5k (2560 x 2560)
- GLTFS Viewer might produce richer colors in exported 3DM models than GLTF Viewer
- USDZ Viewer appears to produce more accurate output than other viewers
- Exported 3dm files might not show properly in any other 3rd party 3DM viewer
-
PRWM exports are powered by PRWM
-
ASSJSON, FBX, STEP, X3D and X exports are powered by ASSIMPJS and ASSIMP:
- STEP exports don't appear to be optimizied in the assimp library so use only if needed
-
Animated GIF export is based on mrdoob's example using omggif library:
-
currently set to 500 x 500 size in the centre of the window
-
the approximate GIF area rectangle will be shown during the GIF generation
-
if the model leaves this area during the GIF generation, due to its motion, the process might error out
-
the larger the model and / or the more colors in the model will affect the size / quality of the resulting GIF file
-
it disregards the background color but does observe the background image with simple color palette
-
consider changing Directional Light color and / or using Ambient Light to avoid poor quality GIF for some models
-
non-animated models will spin 360 degrees
-
-
Animated PNG (APNG) exports are powered by UPNG.js and Pako.js
-
almost the same features as in the Animated GIF export, see above
-
use some background image to avoid visual anomalies (artifacts) in the resulting file due to transparency:
- where applicable, use the
Eq
checkbox to apply equirectangular scene background - where applicable, use the
G
button to add grayish linear gradient as a scene background - use
black.gif
orwhite.gif
ordark_blue.png
files found in theimages
folder as a simple choice for background image
- where applicable, use the
-
currently set for full color PNG but can be changed to Lossy PNG to speed up processing (see the comment in the code)
-
-
JSON export is actually three.js created format
-
Try not to change file names when saving files during initial export
-
Exporting some models might crash the browser when running out of memory
-
Exporting some models might be easier / better done with multiple viewers, examples:
- MMD -> OBJ and then OBJ -> JSON might be better than straight MMD -> JSON export
- IFC -> GLB_m (with MESHOPT compression) and then GLB_m -> GLB_d (with DRACO compression) might be easier than straight IFC -> GLB_d export
-
DAE, GLB, GLTF, JSON, OBJ + MTL, PLY, STL, USDZ modified exporters are three.js based
-
USDZ exporter tips:
- Handles GLTF / GLB formats the best due to their use of the THREE.MeshStandardMaterial
- Optionally export your 3D model to GLB format first, including GLB files that might be using compressed textures, and then export it to USDZ format
- Exported USDZ files should work in the Apple's Quick Look (as tested on an iPad)
- Viewers which include this exporter will try to export the model automatically
-
OBJ + MTL exporter and loaders try to take advantage of the THREE.MeshPhysicalMaterial to bring a GLTF alike functionality
- Check the
OBJ_MTL_PBR.md
file for the exported MTL entries description
- Check the
-
OBJ exporter might currently, along with the exported MTL file, export multiple copies of the same texture but under different names:
- Select 1 copy of the texture and rename it if you wish, then update the corresponding MTL file entries to point to that texture
- Delete all other copies of that same texture
- This bug has been corrected for most models I tested but some odd models might still sneak by
-
DAE (Collada) exporter might currently export multiple copies of the same texture but under different names:
- Select 1 copy of the texture and rename it if you wish, then update the corresponding
<init_from>
lines inside the<library_images>
section of the DAE file to point to that texture - Delete all other copies of that same texture
- This bug might eventually get fixed
- Select 1 copy of the texture and rename it if you wish, then update the corresponding
-
PLY exporter will include vertex colors and will convert material color to vertex color if the material has no texture
-
- GLB exports, where applicable, can additionally have either DRACO or MESHOPT and optional WEBP texture compression available by using glTF Transform:
- These exports are marked as either of:
GLB_d
GLB_dw
GLB_m
GLB_mw
(for regular exports)GLBx_d
GLBx_dw
GLBx_m
GLBx_mw
(for alternative exports) - WEBP exported texture resolution will retain original size in mobile GLTF Viewer but is selectable in desktop viewers (128, 256, 512, 768, 1k, 1.2k, 1.5k, 1.7k, 2k, 3k, 4k)
- KTX2 texture compression is additionally available by using ktx2-encoder and marked as following:
KTX2
offers ETC1S + UASTC compression, automatically selected as per specific type of textureKTX2e
offers ETC1S only compression applicable to all texturesKTX2u
offers UASTC only compression applicable to all textures
- These exports seem to work fine in general but might not be good for some rare models
- These exports are marked as either of:
- Some viewers also offer alternative exports marked as
OBJx
DAEx
GLTFx
USDZx
:- Should be tried either out of curiosity or if their regular export counterparts don't produce good results
- Might even produce smaller exported file size than regular export
- If applicable, will support exporting THREE.InstancedMesh to OBJ + MTL / DAE / USDZ as well
- If applicable, will support exporting morph animations but will not export other animations
- Some viewers also offer setting the following exported textures features:
- Resolution: 128, 256, 512, 768, 1k, 1.2k, 1.5k, 1.7k, 2k, 3k, 4k
- Y-flip, which is intended for
3DM
,DAE
,OBJ
andUSDZ
exports
- ASSIMP, GLTF and GLTFS viewers can also export model maps (textures) only, defaulting to PNG if no other format is selected
- PDB Viewer will export all visible objects, any combination of
atoms
andbonds
andlabels
- GLTFS Viewer seems to do OK job in exporting still models with
pbrSpecularGlossiness
but would suggest that you use gltf.report instead - Experiment with all exporters available by exporting the original model as well as its exported versions:
- Considering how many export options are available in any viewer, a certain combination might just work properly
- 3DM, BIM, DAE, APNG, FBX, STEP, X3D, X, ASSJSON, GIF, GLB, GLTF, JSON, OBJ + MTL, OFF, PLY, STL, PRWM, USDZ
-
Buttons, where applicable:
A
- animationsD
- open desktop version of the viewer (available in mobile viewers only)E
- edgesEC
- edge color
F
- flatShadingf
- allows for Y-Flip of DDS textures when present in the model (ASSIMP Viewer)G
- linear gradient background- will reset the background color
- will clear the
Eq
input if present - also sets environment in some viewers
I
- raycasting intersects (available in VTK Viewer only)K
- kinematics (available in DAE viewers only)L
- lines (LDRAW and its exports in ASSIMP, GLTF, OBJ, JSON viewers)O
- opacity (normally enabled with mouse double-click)P
- poses (available in MMD viewers only)S
- skeleton with demo (available in JSON viewers only)T
- optional textures- when loaded then can be applied to the model one at the time
- kind of expect UVs to be present
V
- variants that might be present in GLTF models (ASSIMP, GLTF, GLTFS and GM viewers)W
- button orWire
checkbox to show wireframeX
- morphsY
- Y-flip exported textures (available in mobile GLTF Viewer only)As
- and / oratoms
button (available in PDB viewers only)Bs
- and / orbonds
button (available in PDB viewers only)C0
- camera index- 0 being default (ASSIMP, GLTF, GLTFS viewers)
- shows as
Cam + Index
in the GLTF Legacy viewer
CS
- construction step (available in LDRAW viewers only)DT
- material's depthTest switching (ASSIMP, GLTF, GLTFS viewers)Ls
- and / orlabels
button (available in PDB viewers only)MP
- material switching - Phong (MP), Standard (MS), Lambert (ML)OL
- outline effect (available in MMD viewers only)OS
- material side - Original (OS), Front (FS), Back (BS), Double (DS)PM
- show model as points (PLY+STL, PRWM and VTK viewers)PP
- emissive bloom post processing (GLTF and OBJ+MTL WebGPU desktop viewers)VC
- vertex colors!
- random vertex colors
XS
- xtra smooth (available in OBJ Viewer only)RST
- reset#
- grid
-
Light controls, where applicable:
AL
- ambient light colorALi
- ambient light intensity
DL
- directional light colorDLi
- directional light intensity
HL
- hemisphere light colorSL
- spotlight colorSLi
- spotlight intensity
-
Other controls, where applicable:
B
orBG
- background color- will reset the
G
button if enabled - will clear the
Eq
input if present
- will reset the
C
- object or points colorEq
- button or checkbox for setting an equirectangular background with additional controls, where applicable:setEnvMap
for setting envMap + metalnesstoneMapping
withexposure
andenvMapIntensity
- scene background
backBlurriness
andbackIntensity
- this will also disable/enable the gradient background
G
button and background color control
-
JSON viewers support three.js and assimp JS and/or JSON formats with some limitations:
- JSON Viewer is currently using r169 of three.js and cannot open legacy formats
- JSON Legacy viewer is using r111 of three.js to support legacy THREE.Geometry:
- It is using 4 loaders: ObjectLoader, BufferGeometryLoader, LegacyJSONLoader and AssimpJSONLoader
- It could possibly open and export current three.js JSON format, with limitations of r111
- Some animations and/or skeletons might be off or missing
-
GLTF / FBX / DAE viewers will also include animations to exported JSON format
-
PDB Viewer is using
lil-gui
as a passiveAtoms Legend
display:- It will provide additional per atom info on mouse hover in desktop viewer
- Rely on this to reference atoms in the molecule by using their color:
- Enabling atoms
labels
instead will slow down the rendering when a molecule has a large number of atoms
- Enabling atoms
-
3DS Viewer is using MeshPhysicalMaterial instead of MeshPhongMaterial
-
Multiple desktop viewers will also try mapping any valid
BGND
image as equirectangular whenEq
is enabled:- Maybe download the following three.js examples and load either of them locally via the
BGND
file input: - These viewers are also using gainmap-js encoder and decoder:
- To support loading a single JPEG file with integrated gainmaps
- To support loading EXR and HDR files, which will be encoded on-the-fly into a single JPEG file with integrated gainmaps
- You could find some texture examples in the official three.js equirectangular folder
- Maybe download the following three.js examples and load either of them locally via the
-
PLY+STL, PRWM and VTK viewers can also:
- Show a points version of the loaded model and export it as such (if the model is not rather large):
- Tip: export this points model into PLY format and then drop the PLY file into WebGL Gaussian Splat Viewer to get SPLAT file
- Export edges, when enabled, in OBJ and GLTF exports of both solid and points model (a popup alert will notify about this)
- Show a points version of the loaded model and export it as such (if the model is not rather large):
-
Using Animated GIF as a texture is experimental and powered by modified gif-loader using omggif library
-
There is also a simple cube shading example available at the bottom of the menu:
- It is fully automatic and manipulates each of the RGBA components
- Ref: The Book of Shaders by Patricio Gonzalez Vivo & Jen Lowe
- It also has a little bit of:
- three.quarks atom thanks to its own example
- Proton mouse flare thanks to threejs-mesh-modifiers example
-
Tips:
- If you think that the model is correctly loaded but you cannot see it then check the following:
- If the viewer has Gizmo but it is not showing then there might be something wrong with the model
- If the viewer has Gizmo and it is showing, or does not have Gizmo at all, then try any or all of the following (whatever is available in that particular viewer):
- change
background color
to white - zoom
in/out
or applyScale
- apply
Vertex Colors
- apply
Random Vertex Colors
- apply
- apply
flatShading
- manipulate lights
- apply
edges
- try anything else not mentioned above (including other available 3rd party online viewers)
- change
- Large resolution textures should be scaled down before loading, as an example:
- download
Bedroom
with 8k images and try it AS IS - use some Paint program to scale textures down to 1k or 2k (which will speed up loading in browsers)
- download
- Also try using COLLADA2GLTF and FBX2glTF and Online 3D Viewer exporters / converters
- If you think that the model is correctly loaded but you cannot see it then check the following:
PLY+STL Viewer
- Use the
T
button to switch between loaded textures - Supports the following image formats:
- PNG, APNG, JPG, JPEG, JFIF, PJPEG, PJP, BMP, DIB, GIF, PCX, TIF, TIFF
- WEBP, TGA, SVG, DDS, KTX, KTX2, EXR, HDR, BASIS and Lottie JSON
- Also supported are: MP4, WEBM and OGV video files as well as M4A, M4B and OGG audio files
- It is using gainmap-js encoder and decoder:
- Support loading a single
JPEG
file with integrated gainmaps - Support loading
EXR
andHDR
files:- Encoded on-the-fly into a single
JPEG
file with integrated gainmaps
- Encoded on-the-fly into a single
- Handle still
JPEG
without gainmaps,PNG
,BMP
,GIF
andWEBP
texture loading
- Support loading a single
- Animated GIF file support is powered in part by omggif and displayed with THREE.CSS2DRenderer
- Animated PNG file support is powered in part by UPNG.js and displayed with THREE.CSS2DRenderer
- Animated WEBP file is displayed with THREE.CSS2DRenderer
- All of the above animated files are "view only" so most viewer controls will not have any effect and will be disabled
- TIF or TIFF image file support is powered by UTIF.js
- PCX image file support is powered by pcx-js
- Texture is displayed on a rotatable plane which can also be moved and zoomed in / out:
- This is not applicable to Animated GIF - PNG - WEBP and / or video files (gizmo will disappear)
- Video player has its own controls for playback and full-screen switching
- URL text box also allows entering a single base64 string of the image data, see the
URLS4MODELS.md
file for an example - For certain formats and their manipulation an easy alternative to this viewer would be
https://ezgif.com
- Most of these files can easily be viewed with some operating system applications or by the browsers themselves (like animated GIF / PNG / WEBP or MP4 / WEBM / OGV videos):
- In Windows, for example, right-click the file itself then choose
Open With
and selectFirefox
browser - Windows users could possibly benefit from getting the QuickLook app
- In Windows, for example, right-click the file itself then choose
This is all MIT licensed but please observe any other licenses that might be applicable to some files or content.
Any and all trademarks, either directly or indirectly mentioned in this project, belong to their respective owners.