playcanvas / model-viewer Goto Github PK
View Code? Open in Web Editor NEW3D model viewer supporting glTF 2.0 and PLY (3d Gaussian Splats)
Home Page: https://playcanvas.com/viewer
License: MIT License
3D model viewer supporting glTF 2.0 and PLY (3d Gaussian Splats)
Home Page: https://playcanvas.com/viewer
License: MIT License
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}"
},
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.
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.
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?
It can be useful to render a grid/ground plane for some loaded model.
PCUI version 1.1.5 removes the montserrat font from the build. The playcanvas-viewer will now need to include its own font.
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
The shiny ball option is not particularly userful to end users (and can even be confusing).
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.
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.
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):
The graph visualisation option is really a debug feature that's probably confusing to users, not useful.
Currently the viewer defaults to ACES tone mapping and it is requested that this can be set by the user through a UI option.
Currently no message is shown when files fail to load.
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" } ] }
It would be nice to have a visual indication when the viewer is busy loading/downloading content.
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:
import blah from 'playcanvas'
to import blah from 'playcanvas.js'
in viewer.js, controls.js and index.jsThis is a huge pain and we need a solution ideally integrated with webpack.
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
Would really help with debugging animations visually
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.
Forum thread: https://forum.playcanvas.com/t/glb-asset-doesnt-load/21486
Example asset:
ambulance.glb.zip
Worth noting that no textures are are used in Kenney's assets
It would be great if it was possible to browse the model hierarchy directly in the viewer.
Ideally we could see:
This is useful when testing materials under various lighting conditions.
Repro steps:
Animation file 2 plays fine but animation file 1 no longer plays.
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.
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.
The sliders and selection dropdown boxes don't stretch to fill the space when resizing the sidebar.
It would be great to be able to see the nodes/rig with names to help debugging animations
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.
Report problems with malformed glTF files.
Demo:
https://github.khronos.org/glTF-Validator/
see related issue:
playcanvas/engine#2569
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.
Currently, playcanvas.js
and playcanvas-extras.js
are checked in to the root folder of the repo. These can presumably now be removed.
It would be great if we had the ability to debug materials in the viewer:
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)
It's currently not obvious which animation clip is currently playing.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.