playcanvas/model-viewer

3D model viewer supporting glTF 2.0 and PLY (3d Gaussian Splats)

model-viewer's Issues

Allow the sider bar to be size adjustable

At the moment, some of the morph target names and values are not readable at the default width:

Cloning animated models doesn't work

I tried it very simply with:

clone = viewer.entities[0].clone()
viewer.app.root.addChild(clone)
clone.translate(1, 0, 0)
clone.anim.playing

Anything I'm doing wrong? The second model is just not animated, even though all properties seem right.

Add 'Report Issue' and Github icon

For the published viewer, it would be great if there was a link for users to click to log an issue. It should link to:

https://github.com/playcanvas/playcanvas-viewer/issues

Also, a Github logo (Octocat) that links to the top level of the repo would be awesome too (to make it clear this is an open source project that devs can contribute to):

https://github.com/playcanvas/playcanvas-viewer

Start viewer with side panel collapsed below a certain width

At small tab widths, the side panel can dominate the tab. If panel width is greater than maybe half the width of the tab, it should start out collapsed.

Shift drag is not an obvious feature. Can we add a Open/Add button as well?

The shift drag to add multiple GLBs is not an obvious feature to the user. Could we add some sort of UI for this as well?

Add initial call to action

When a new user opens the viewer, it's not obvious what they should do (i.e. drag and drop files into the 3D view). We should add a CTA/hint for the end user.

Add manifest.json

A manifest.json file will enable the website to be added to the home screen as a webapp on phones, enabling a fullscreen interface.

eg:
{ "name": "Playcanvas Viewer", "short_name": "Viewer", "start_url": ".", "scope": ".", "display": "standalone", "icons": [ { "src": "./static/playcanvas-logo.png", "type": "image/png", "sizes": "64x64" } ] }

Show what nodes are being animated

Would really help with debugging animations visually

Browse model hierarchy

It would be great if it was possible to browse the model hierarchy directly in the viewer.

Ideally we could see:

• the node hierarchy including name, position, rotation, scale
• mesh details including #vert, #primitives
• material details including basic settings and textures
• texture details possibly with preview
• animation details
• etc

Large hierarchy UI issue

When the list of scene nodes is large, the node info box scrolls off screen. Ideally the node information box would always be visible.

The viewer linked to glTF Asset Generator is out of date

It may already be scheduled to be fixed, but I'll report back Issue just in case.

The old playcanvas-gltf viewer is referenced by the Khronos glTF Asset Generator.
https://github.com/KhronosGroup/glTF-Asset-Generator

Perhaps modifying the following configuration file will refer to the new viewer.
https://github.com/bghgary/glTF-Assets-Viewer/blob/master/engines.json

"PlayCanvas": {
    "templateUrl": "https://playcanvas.github.io/playcanvas-gltf/viewer/index.html?assetUrl=${assetUrl}&cameraPosition=${-cameraPosition.x},${cameraPosition.y},${cameraPosition.z}"
},

Remove debug graph

The graph visualisation option is really a debug feature that's probably confusing to users, not useful.

Show clearer bones and joints

It would be great to be able to see the nodes/rig with names to help debugging animations

Previously imported animations no longer play

Repro steps:

1. Load a model.
2. Shift drag animation file 1
3. Shift drag animation file 2

Animation file 2 plays fine but animation file 1 no longer plays.

Style side panel scroll bar

The side bar currently shows an OS scroll bar:

It would be good to bring this in line with the Editor's styled scroll bars:

Controls don't stretch with sidebar resize

The sliders and selection dropdown boxes don't stretch to fill the space when resizing the sidebar.

Change how fonts are included

PCUI version 1.1.5 removes the montserrat font from the build. The playcanvas-viewer will now need to include its own font.

https://github.com/playcanvas/pcui/releases/tag/v1.1.5

Show error message when file fails to load

Currently no message is shown when files fail to load.

PlayCanvas engine can be remove from repo

Currently, playcanvas.js and playcanvas-extras.js are checked in to the root folder of the repo. These can presumably now be removed.

Add option to disable or switch tone mapping.

Currently the viewer defaults to ACES tone mapping and it is requested that this can be set by the user through a UI option.

Missing deps: bfj and ejs-webpack-loader

I had to install bfj and ejs-webpack-loader manually, otherwise I would run into these two errors:

I don't know why others don't seem to have an issue with this, but maybe add it to package.json?

Slider and combo box labels are vertically offset

Toggle control labels seem correctly aligned.

Include a timeline scrubber allowing users to examine animations

Implement support for cameras stored in the glb file

Engine support is here: playcanvas/engine#3354
Viewer could display a list of them in the hierarchy and allow to toggle one of them as an active one.

Show loading indicator

It would be nice to have a visual indication when the viewer is busy loading/downloading content.

Add an upload button for files and background

Currently the viewer is unusable on phones as the only option to open files is via drag and drop which is not possible on mobile devices. An upload button would be really helpful for mobile users as the rest of the UI already does work perfectly on phones.

Animation with STEP interpolation on scale not displayed

SuzanneSequence.glb.zip

This example should step through a sequence of 5 meshes, displaying each at scale 1,1,1 for 1/2 second before hiding it with scale 0,0,0 and displaying the next mesh. The example is simple (modeled in Blender, animated with glTF-Transform) but would be similar to more complex animation from programs like Quill.

The model doesn't seem to animate in the PlayCanvas viewer currently. The result should be:

Aside, but minor — the model doesn't include normals, and so should be displayed with flat normals rather than smooth ideally.

Add option of rotating the lighting environment

This is useful when testing materials under various lighting conditions.

Build scripts do not work on Windows

package.json has:

    "watch": "node_modules/.bin/webpack --config webpack.config.js --watch",
    "build:local": "ENVIRONMENT=production node_modules/.bin/webpack --config webpack.config.js",
    "build:server": "ENVIRONMENT=production PUBLIC_PATH=/viewer/ node_modules/.bin/webpack --config webpack.config.js"

This doesn't work on Windows.

First thing to say is that you don't need to specify the path to webpack. So you can do:

    "watch": "webpack --config webpack.config.js --watch",
    "build:local": "ENVIRONMENT=production webpack --config webpack.config.js",
    "build:server": "ENVIRONMENT=production PUBLIC_PATH=/viewer/ webpack --config webpack.config.js"

(see https://github.com/playcanvas/playcanvas-webpack/blob/master/package.json)

But Windows doesn't like how environment variables are being set here. We need a cross platform approach for controlling the build.

Allow pain-free viewer/engine local dev

It is a pain using the viewer with a local build of the engine, especially since loosing use_local_engine.

Using the viewer with local engine currently requires the following:

• create symlink in playcanvas_viewer to ../engine/build/playcanvas.js and ../engine/build/playcanvas-extras.js
• replace import blah from 'playcanvas' to import blah from 'playcanvas.js' in viewer.js, controls.js and index.js

This is a huge pain and we need a solution ideally integrated with webpack.

Integrate glTF Validator

Report problems with malformed glTF files.

Demo:
https://github.khronos.org/glTF-Validator/

Repo:
https://github.com/KhronosGroup/glTF-Validator

NPM:
https://www.npmjs.com/package/gltf-validator

Show the materials and textures in the GLB as a list

It would help debugging to be able to see the material listing with mesh instances in the viewer in a similar fashion to how we show it in the inspector with the Editor.

Only single animation shown if the take names are the same

I'm running into an issue with the viewer on this project https://playcanvas.com/editor/scene/1087734
When I select both animations and the model to view in the viewer, I only see one animation listed. I think this could be related to the issue where both animations may have the same take name (maximo.com)

Kapture.2021-02-09.at.12.58.35.mp4

How to load multi file assets?

I am not sure how the API is supposed to work:

viewer.load([
"http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree.gltf",
"http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree.bin"
]);

The AppleTree got these files:

Result:

playcanvas.js:24239 failed to load uri=AppleTree.bin

Material debugging

It would be great if we had the ability to debug materials in the viewer:

• display normal, roughness, albedo maps etc
• display various lighting
• display texture basis

License of src/lib/pcui.js

Is this file MIT licensed? It is here, but minified/uglified only.

It would be nice if it could be beautified, so people who may want to extend the viewer know what they are dealing with

Issue with morph target animation

When I use the attached glb file with the view
blendshapes_trial.zip

This is the console output in my local viewer set up

When I tried it in the prod build, I don't see the errors, but there is an issue with the morph playback compared to what's expected / other viewers display. The white sphere with the red inside bas two meshes (two materials), but only the white part morphs, not the red one. Perhaps animation does not resolve paths to both?

This is possibly multiple issues in this ticket, and as we confirm issues, we should separate them to their own issues, but at the moment it's not clear what the root cause here is.

Checkboxes not visible in Windows Chrome

Incorrect morphing if two models and loaded one after the other

online_ex.zip
AnimatedMorphCube.zip

If the viewer is reloaded before each object, individually they morph as expected.
If the viewer is not reloaded, and online_ex is dragged in first, followed by animated-morph-cube, it seems there are two things morphing at the same time.

Add optional grid/ground plane

It can be useful to render a grid/ground plane for some loaded model.

GLB loading gets progressively slower

Keep drag & dropping larger GLB files onto the viewer, they load slower each time. After maybe 20 drops, the load times goes up from 1 to maybe 5 seconds.

Attaching two glb files I used for testing. I tried others as well, and they all behave the same.
glbs.zip

Kenney model GLBs don't load correctly

Forum thread: https://forum.playcanvas.com/t/glb-asset-doesnt-load/21486

Example asset:
ambulance.glb.zip

Works in Babylon:

Worth noting that no textures are are used in Kenney's assets

Remove shiny ball

The shiny ball option is not particularly userful to end users (and can even be confusing).

Viewer does not resize correctly

• Camera aspect ratio does not update
• Left panel flickers

Autoplay animation on load

Currently, animated glTF scenes will not auto-play their animation(s):

Display active animation track in the UI

It's currently not obvious which animation clip is currently playing.

Smooth camera rotation with damping

At the moment the camera seems to rotate the scene in direct response to the mouse events, making its rotation not very smooth and polished. This should be implemented.

Investigate integration with file format loaders

see related issue:
playcanvas/engine#2569

Viewer should show morph target names

Morph target in the engine stores its name in MorphTarget.name, and the viewer would ideally display it instead of just the
index.

Add a link/image that references this GitHub repo to show that it's open source