Could not display gltf - Githubissues

abeq commented 7 years ago

I have tried to display gltf with grimoire.js, but it could not display. Please let me know how to display correctly.

Loader html:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/grimoirejs-preset-basic/register/grimoire-preset-basic.js"></script>
        <script src="https://unpkg.com/grimoirejs-forward-shading/register/grimoire-forward-shading.js"></script>
<script src="https://unpkg.com/grimoirejs-gltf/register/grimoire-gltf.js"></script>
    <script>
        gr.debug = false;
    </script>
  </head>
  <body>
    <script type="text/goml">
      <goml>
        <scene>
          <camera />
          <model src="Monster.gltf" />
        </scene>
      </goml>
    </script>
  </body>
</html>

Model data:

https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/1.0/Monster/glTF-Embedded/Monster.gltf

Console message:

Uncaught (in promise) TypeError: Cannot read property '0' of undefined at index.js:242 at Function.__fromGenerationFunction (index.js:524) at Function.min (index.js:241) at AABB.expand (index.js:5481) at DefaultParserModule.addVertexAttributes (DefaultParserModule.ts:158) at GLTFParser.callParserModule (Parser.ts:31) at DefaultParserModule.loadPrimitive (DefaultParserModule.ts:116) at GLTFParser.callParserModule (Parser.ts:31) at DefaultParserModule.loadPrimitivesOfMesh (DefaultParserModule.ts:108) at GLTFParser.callParserModule (Parser.ts:31)

Chrome version:

バージョン: 62.0.3202.75（Official Build）（64 ビット）

OS:

OS X El Capitan

kyasbal commented 7 years ago

I haven’t proved this is bug or not. It may take a day since I can’t touch PC for a while. However, there are good samples posted by community. I hope this can help you.

glTF sample on jsdoit http://jsdo.it/cx20/CaK6

glTF test repository https://github.com/cx20/gltf-test

Thank you for posting issues.

kyasbal commented 7 years ago

I confirmed this is bug of grimoirejs-glTF. This bug will happen when provided model have any accessor without buffer stide explicitly provided. I already make patch for this. I will release it later.

kyasbal commented 7 years ago

I published new version of gltf plugin including patch related to this issue. You can check working sample. https://jsfiddle.net/ucw3jkxh/1/

This is changing list of your sample code.

glTF plugin is depends on grimoirejs-animation

We will remove this dependency in future when the model is not using animation. But, currently the plugin is necessary for every gltf models.

    <script src="https://unpkg.com/grimoirejs-preset-basic/register/grimoire-preset-basic.js"></script>
+   <script src="https://unpkg.com/grimoirejs-animation/register/grimoire-animation.js"></script>
    <script src="https://unpkg.com/grimoirejs-forward-shading/register/grimoire-forward-shading.js"></script>
    <script src="https://unpkg.com/grimoirejs-gltf/register/grimoire-gltf.js"></script>

And I replaced the model since your model is glTF1.0. We are providing only glTF2.0 feature.

abeq commented 7 years ago

Thank you for response.

I have tried with followings:

Add line to invoke grimoire-animation.js.
Replace to glTF2.0 model.

I got similar result as https://jsfiddle.net/ucw3jkxh/1/. But it seems has not been rendered correctly.

And I have tried other model: Model: obj in https://free3d.com/3d-model/low-poly-deer-72513.html Convert: with https://github.com/AnalyticalGraphicsInc/OBJ2GLTF

This model has been rendered fine by https://gltf-viewer.donmccurdy.com/.

Please let me know how to convert or build model that you suggest.

cx20 commented 7 years ago

@abeq I think that this problem is caused by GOML not being marked up correctly. The first one, please try setting the light.

<light type="directional" rotation="-30d,30d,0d"  color="white" intensity="2.0"/>
<light type="directional" rotation="0d,-150d,0d" color="white" intensity="1.5"/>

Second, try setting the scale scale="0.05". This model is so big that it needs to be reduced.

<model src="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Monster/glTF/Monster.gltf" scale="0.05"/>

I have confirmed that Monster.gltf can be displayed in the sample below. https://cx20.github.io/gltf-test/examples/grimoiregl/index.html?model=Monster&scale=0.05

cx20 commented 7 years ago

@abeq I used obj2gltf to convert deer.obj to deer.gltf and loaded it, the same error was displayed. I think that it is a problem of glTF Plugin of Grimoire.js.

arr = new Uint16Array(arr.buffer, arr.byteOffset, arr.byteLength);

Perhaps I think that the third argument of Uint16Array must specify the number of elements, not the number of bytes.

kyasbal commented 7 years ago

@abeq @cx20 I already confirmed that problem. That is a logic in complementing NORMAL buffer if that was not provided. I guess there were no such a models with non-byte(short or int) index buffer in test models. I will release a patch as soon as possible.

However, you hit very rare case in glTF. I think most part of models can be valid in Grimoire.js. I will fix this problem soon, but you can still use a model that have NORMAL buffer as basic models.

I apologize you to have inconvenience situation.

kyasbal commented 7 years ago

@abeq @cx20 I just released new version of glTF plugin. You can check it out to see the deer is displayed with Grimoire.js on this jsdo.it. http://jsdo.it/kyasbal/GyRp

cx20 commented 7 years ago

@kyasbal-1994 It was not displayed because the sample of jsdo.it is private setting.

kyasbal commented 7 years ago

@cx20 fixed. Thank you .

abeq commented 6 years ago

Thank you for your support. I have confirmed that model has been rendered correctly. I apologize for late reply.

GrimoireGL / GrimoireJS

Could not display gltf #541

Loader html:

Model data:

Console message:

Chrome version:

OS: