analyticalgraphicsinc / gltf-vscode Goto Github PK

Node.js documentation states that new Buffer is deprecated.

All instances of new Buffer(...) should be replaced with Buffer.from(...).

May I ask where you generate Html in your code ?

it's seem in gltfTreeViewDocumentContentProvider.js

but I want to find out where babylon.js preview html generate?

It would be nice to have a grey/white checkerboard background in the image preview window. With the current black background, images with transparent/translucent pixels can be hard to see. For example, the image below (as seen in Gimp) cannot be seen at all in the preview window.

I've come to use this plugin more than nearly any other tool in my daily work. Quite often I use it to experimentally strip out some aspect of a .glb. This plugin makes making small edits to the JSON a breeze. Thank you for that.

If there's one feature request I have above others, though, I'd love to be able to delete a buffer/bufferView/accessor, or in fact any glTF property at all, and have all other references in the model automatically update. If I delete accessor 6, all remaining accessor references > 6 all need to decrease by one. Doing this by hand is a chore, and very error prone.

In an ideal world, deleting an accessor that was the only reference to a bufferView could pop up a dialog asking if I additionally want to delete the bufferView that just became an orphan...

Thanks for an excellent tool! I've come across a small snafu with this file:

blackvan_with_windows.glb.gz

When imported as a .glb, the created .gltf fails validation, and it's not hard to see why: the accessors' bufferVIew references have all been renumbered, but some of the images still retain their old bufferView references.

I have not dug deep into why this might be happening, but a pretty big clue is:

• Two of the glTF Images are non-unique, as in, one or more identical JSON objects can be found in the images array
• It's precisely these duplicates that retain their old bufferView indices:

  "images": [
    {
      "name": "rough_met_/Users/zell/models/blackvan_take_2/blackvan_specular.png_/Users/zell/models/blackvan_take_2/blackvan_gloss.png_/Users/zell/models/blackvan_take_2/blackvan_windows.png",
      "uri": "blackvan_with_windows_img0.jpg"
    },
    {
      "name": "base_col_/Users/zell/models/blackvan_take_2/blackvan_windows.png_/Users/zell/models/blackvan_take_2/blackvan_specular.png",
      "uri": "blackvan_with_windows_img1.png"
    },
    {
      "name": "blackvan_normals.png",
      "uri": "blackvan_with_windows_img2.png"
    },
    {
      "name": "blackvan_emissive.png",
      "uri": "blackvan_with_windows_img3.png"
    },
    {
      "name": "rough_met_/Users/zell/models/blackvan_take_2/blackvan_specular.png_/Users/zell/models/blackvan_take_2/blackvan_gloss.png_/Users/zell/models/blackvan_take_2/blackvan_diffuse.png",
      "uri": "blackvan_with_windows_img4.jpg"
    },
    {
      "name": "base_col_/Users/zell/models/blackvan_take_2/blackvan_diffuse.png_/Users/zell/models/blackvan_take_2/blackvan_specular.png",
      "uri": "blackvan_with_windows_img5.jpg"
    },
    {
      "name": "blackvan_normals.png",
      "bufferView": 2,
      "mimeType": "image/png"
    },
    {
      "name": "blackvan_emissive.png",
      "bufferView": 3,
      "mimeType": "image/png"
    }
  ],

For opening the 3D preview without a hotkey, for example.

The Feb 2018 release of VSCode 1.21 introduced a new way to create webviews, described here:

https://code.visualstudio.com/updates/v1_21#_webview-api

Among other benefits, these could provide some persistence, as well as opening a communication channel from the extension to the JavaScript in the webview which was not previously available.

There are tougher security requirements though, so it may take some effort to make the transition.

Following discoveries in #75.

I can't see how to preview a gltf file. I've tried exporting a .gltf file from Blender with default settings, then opened it in VS code, the plugin seems to be working as I get auto-completion for the JSON.

We should add some form of support for saving and loading *.glb, the binary form of glTF. Currently, attempting to load a *.glb file results in a mostly blank screen with a terse message:

The file will not be displayed in the editor because it is either binary, very large or uses an unsupported text encoding.

Can an extension replace this message with its own representation of the text portion of a binary document? Can the text be editable?

@HowardWolosky Do you have any ideas about how we could solve this? I'm starting to think that in the long run, .glb will end up being much more widely adopted than plain-text .gltf.

I have a PR out for Babylon.js that adds support for Babylon to render glTF content that is directly loaded as opposed to through File I/O.

Once that hits Babylon.js master, we should take another drop of Babylon and update the Babylon previewer to use the tab content (document.getElementById('gltf').textContent) when loading instead of loading the actual file.

When converting to a .gltf file the import provider doesn't adjust the byte offset of the buffer views to ensure proper total byte alignment.

With this .glb file I get the following errors:

{
    "code": "ACCESSOR_TOTAL_OFFSET_ALIGNMENT",
    "message": "Accessor's total byteOffset 4802 isn't a multiple of componentType length 4.",
    "severity": 0,
    "pointer": "/accessors/2/byteOffset"
},
{
    "code": "ACCESSOR_TOTAL_OFFSET_ALIGNMENT",
    "message": "Accessor's total byteOffset 16982 isn't a multiple of componentType length 4.",
    "severity": 0,
    "pointer": "/accessors/3/byteOffset"
},
{
    "code": "ACCESSOR_TOTAL_OFFSET_ALIGNMENT",
    "message": "Accessor's total byteOffset 29162 isn't a multiple of componentType length 4.",
    "severity": 0,
    "pointer": "/accessors/4/byteOffset"
},
{
    "code": "ACCESSOR_TOTAL_OFFSET_ALIGNMENT",
    "message": "Accessor's total byteOffset 45402 isn't a multiple of componentType length 4.",
    "severity": 0,
    "pointer": "/accessors/6/byteOffset"
}

for embedded JavaScript files.

Import GLB https://github.com/BabylonJS/Website/blob/master/Assets/Alien.glb
Load preview
Switch to Cesium viewer.

Expected model loads.

Actual error message:

Uncaught RuntimeError: Vertex shader failed to compile.  Compile log: ERROR: 0:5: '' : array size must be greater than zero

Error
    at new t (file:///C:/Users/xx/.vscode/extensions/cesium.gltf-vscode-2.1.2/engines/Cesium/Cesium.js:477:4655)
    at f (file:///C:/Users/xx/.vscode/extensions/cesium.gltf-vscode-2.1.2/engines/Cesium/Cesium.js:502:8256)
    at y (file:///C:/Users/xx/.vscode/extensions/cesium.gltf-vscode-2.1.2/engines/Cesium/Cesium.js:502:10306)
    at d.get (file:///C:/Users/xx/.vscode/extensions/cesium.gltf-vscode-2.1.2/engines/Cesium/Cesium.js:502:11071)
    at ht (file:///C:/Users/xx/.vscode/extensions/cesium.gltf-vscode-2.1.2/engines/Cesium/Cesium.js:519:1591)
    at vt (file:///C:/Users/xx/.vscode/extensions/cesium.gltf-vscode-2.1.2/engines/Cesium/Cesium.js:519:3998)
    at Xt (file:///C:/Users/xx/.vscode/extensions/cesium.gltf-vscode-2.1.2/engines/Cesium/Cesium.js:519:13479)
    at Te.update (file:///C:/Users/xx/.vscode/extensions/cesium.gltf-vscode-2.1.2/engines/Cesium/Cesium.js:520:2264)
    at a.update (file:///C:/Users/xx/.vscode/extensions/cesium.gltf-vscode-2.1.2/engines/Cesium/Cesium.js:541:31068)
    at $e (file:///C:/Users/xx/.vscode/extensions/cesium.gltf-vscode-2.1.2/engines/Cesium/Cesium.js:545:13255)

The embedded ThreeJS preview window here is from a simple example and doesn't have all the sophistication of @donmccurdy's excellent viewer.

Don I'm wondering if you would be willing to take a look at just the ThreeJS portion of this extension and see if there are improvements that could be made here? The bulk of the code is in threeView.js, with a tiny bit of help from an HTML and a CSS file in the same folder.

To get a dev environment going, you install VS Code, click "Open Folder" on a clone of this repo, and hit F5 to launch the extension into the debugger. A second copy of VSCode opens with the extension running. You may want to edit user preferences on that copy to set your default preview engine to be ThreeJS instead of Babylon or Cesium. Load a glTF (non-GLB) model into the editor and hit ALT-G to preview. Not sure if that keybinding is the same on a Mac, actually I don't have a Mac here to test my extension so please report any Mac-specific bugs you find. With the preview window open, getting to DevTools is a bit tricky, but I have instructions here. As always, code contributions require a CLA.

Totally understand if you have no time to look at this. Thought it wouldn't hurt at least to ask 😄

ThreeJS makes this simple, for example:

https://github.com/donmccurdy/three-gltf-viewer/blob/79bb62a0c9d7ff0b70e53dfade7090d062b5bc30/Viewer.js#L354

glTF-Sample-Models/2.0/Avocado/glTF-Draco/Avocado.gltf

Also, selecting Other selects the whole JSON.

The Babylon engine could use another update. They recently changed the way environments are applied to glTF models (see f114d83, index.js new line 146 vs a function starting at old line 166).

I've started experimenting with adding environment reflections on a new branch here called environment, for issue #10, which I would like to get implemented before SIGGRAPH if possible.

@HowardWolosky Got any bandwidth to help out with an update? Or if not, maybe post some instructions on the correct way to update Babylon here, thanks!

BabylonJS needs another update, to pick up BabylonJS/Babylon.js#2222.

As a result of this update, the "NormalTangentTest" model from the 2.0 sample models should have better lighting/reflections on it.

@HowardWolosky can I trouble you with this request? Also would you like push access to this repo?

Certain VSCode extensions are automatically flagged as "recommended based on files you recently opened", for example ESLint, Python, etc. For example if you don't have the Python extension installed, and you open a *.py file, some messages pop up making it clear what you should do. This extension has built-in Khronos-official validation as well as previews in various engines, so I hope it could be considered on par.

How can we get this extension officially recommended to users who open *.gltf files?

/cc @bghgary @sbtron Any ideas on this?

Output on totally empty file shouldn't be attributed to glTF Validator:

severity: 'Error'
message: 'Error parsing JSON document.'
at: '1,1'
source: 'glTF Validator'
code: 'undefined'

Output on an asset with version 2.1:

{
    "asset": {
        "version": "2.1"
    }
}

severity: 'Warning'
message: 'Matches multiple schemas when only one must validate.'
at: '1,1'
source: ''
code: 'undefined'

New logo visible in #38, which was closed without merge.

VS Code 1.21.1, Plugin 2.1.10

1. Open this asset.

{
    "asset": {
        "version": "2.0"
    },
    "images": [
        {
            "uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQYV2P4z/AfAAQAAf+I0P3MAAAAAElFTkSuQmCC",
            "mimeType": "image/png"
        }
    ]
}

2. Hover over image/png.
3. VS Code output:

Request textDocument/hover failed.
  Message: Request textDocument/hover failed with message: Cannot read property 'startsWith' of undefined
  Code: -32603 

Hi the babylon preview works well but using for example arrow keys to interact with cesium and three.js views is problematic unless the Hide UI option is selected.

Consider an asset like this:

{
    "asset": {
        "version": "2.0"
    },
    "buffers": [
        {
            "uri":"spaces in name.bin",
            "byteLength": 1
        }
    ]
}

externalResourceFunction will be called with spaces%20in%20name.bin (because it's an URI), and fs.readFile will fail.

Currently only the Cesium preview offers a control panel to turn animations on and off.

It would be nice for the Cesium viewer to auto-play the animations like the Babylon and Three.JS viewers.

With #35, Babylon.js is no longer statically being checked-in, and is rather being consumed as an NPM dependency.

I think it's a great idea. It certainly simplifies the update step for that engine. We should look at trying to do something similar for the other engines as well.

It looks like we can do it for Three:

• three
• orbit controls
• gltf2 loader

And I guess this would work for Cesium too.

This does put the onus on @emackey to be sure npm update is always run before doing any release, but it seems like a much easier way to maintain the project going forward.

Similar to #86 for ThreeJS.

I've found a number of Babylon tutorials that demonstrate how to programmatically create and control scene-level animations. But for this issue, I need to get the list of animations defined in a glTF that has been loaded into the Babylon scene, and be able to start, stop/reset, and re-start those animations.

@bghgary is there documentation for this that I've overlooked?

Repro:

1. Open a glTF file that has validation errors.
2. Close the file.

Validation errors remain in the Problems pane.

I talked briefly with @lexaknyazev about this at the glTF roadmap meeting after SIGGRAPH 2017. Basically, this extension is using VSCode's built-in JSON validator against the glTF schema, but there are lots (dozens, hundreds?) of types of glTF errors (such as binary range out-of-bounds, etc) that can't be caught by simple JSON schema validation alone. To catch these, we should instead run the official glTF Validator from Khronos.

The official validator is written in Dart, and I believe has already been compiled to JS. @lexaknyazev mentioned that an npm package was going to be released soon, and that we could include that as a dependency.

Letting go of VSCode's JSON validation and switching to a custom validator will have some complexity on the VSCode integration side as well. I've looked into it, but it's not immediately clear to me the best path forward. @balefrost expressed some interest, but doesn't have any time to work on this last I checked.

Contributions here are most welcome!

This check

These indices are Draco's internal pointers.

Would be nice to allow the user to select from a couple built-in stock environment maps. PBR in particular needs a good environment to reflect on its metallic surfaces. Ideally, the same background(s) would be available in all the rendering engines. There would be a config setting for the preferred background.

Getting errors when trying to open sample models. I tested with the WaterBottle directory and tried previewing the .glTF files:

This repository is getting external contributions from a lot of different folks, which is amazing, thanks everyone!

Perhaps the Cesium Concierge bot could keep track of signed CLAs for us here, like it does in other AGI repos? It's the same list of signers.

One difference is we use CHANGELOG.md instead of CHANGES.md (to conform to VSCode extension guidelines), and there's no ThirdParty folder. Other than that things should be the same I think.

@ggetz could I talk you into contributing this? 😸

Otherwise "type":"integer" causes some default zeros that are not valid.

This would allow having more than one glTF preview open at once. DataURI previews already do this.

1. VSCode 1.21.1, plugin 2.1.7.
2. Open any glTF 2.0 asset that uses textures (e.g. glTF-Sample-Models/2.0/BoxTextured/glTF/BoxTextured.gltf).
3. Ctrl-hover (without clicking) on image (e.g. /images/0/uri) URI.
4. A new tab with image appears.

A new tab shouldn't appear without clicking.

It was recently established that +Z would be glTF's forward vector convention (this was previously unspecified).

Each of the glTF viewers in this extension default to looking at the -Z side of the model, so they all need to be updated.

Just updated and on a clean machine and the commands aren't present. Basically nothing in the extension works.

Given VSCode's propensity to constantly reload the preview window, it might be nice to store the last known camera view between reloads of the same model. Would have to check if localStorage would survive a full page reload in the VSCode/electron environment. Also need to take multiple engines into account, maybe changing to a new engine resets the view. There would also need to be a home button to get the default view back.

I'm actually in the process of implementing this, but I'm creating this issue mostly so that you're aware that the development is going on.

I'm currently updating the 2.0 branch of this extension to allow for the preview pane to switch between Cesium, Babylon.js, Three.js and Osg.js. It also adds a configuration option to choose what the default renderer should be, even though it also provides a menu within the preview pane itself to switch on the fly.

previewModel.js contains a JS-based transition, introduced in #8. This should be converted to a CSS-based transition.

Low priority, minor cleanup.

Not only is it missing, but the environment cube starts getting clipped when you turn the background checkbox on. Seems like a scaling/bounding box type issue.

Would be nice to have a VSCode command to convert the current glTF file to use Draco compression, or to remove Draco compression. Not sure the best way to specify Draco options, maybe just with VSCode settings.

In the exported GLB's JSON chunk, a MIME type is correctly guessed for images that came from external files. However, when images are embedded as Data-URIs in the glTF file, the MIME type from the DataURI is not picked up, and instead application/octet-stream is used.

Tested with NormalTangentTest Embedded.

Need to double-check that my test model is itself OK, is it allowed to rely on the MIME type that comes from the DataURI and not specify that separately? In the images section, MIME type is only required for images from buffer views, not for DataURIs.

Hello!
I have been generating a few glTF 2.0 models and testing them with the glTF Tools in Visual Studio Code. However, I have found that when generating models without normals specified, the babylon.js and cesium viewers in VS Code renders them as black, whereas specifying the normals allows them to render as expected. It seems that these viewers are not calculating the flat normals when they are not provided within the gltf file.

I created a gist example, where I provide two gltf 2.0 files (and their binary data) for a triangle with normals and without normals (https://gist.github.com/kcoley/acb49a8bcea638c78e77327b7dbc76e8).

For reference, the babylonjs sandbox url is able to render the material on the glTF triangle file without normals specified.

I tested this using Windows 10. Hopefully this should provide enough info, but please let me know if you have any questions on this issue.

Thanks!
~Kacey

Probably one of our many changes to how the base url is handled.

Repro Steps:

1. Load project_polly.gltf
2. Alt-G to preview model
3. Select Cesium and wait for model to load again
4. Select aniamtions: 0

Expected:
Animation plays

Actual:
Error shown:
Uncaught TypeError: Cannot read property 'name' of undefined

Of note this file loaded correctly in the previous version of Cesium.

Can an extension contribute a new ContextKey? Or is there some related way we can limit the glTF options to just glTF files and not all JSON files?

https://github.com/Microsoft/vscode/blob/master/src/vs/platform/contextkey/common/contextkey.ts

https://github.com/Microsoft/vscode/blob/master/src/vs/editor/common/editorContextKeys.ts