Always black objects - Githubissues

KrisTi969 commented 6 years ago

Hey guys!

The problem i am facing is that whenever i use a 3d object, (.obj) it always renders as black, and simply ignores the textures.

Here's my code:

```<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
    <a-marker preset="hiro">
        <a-entity scale="2 2 2"
                obj-model="obj: {{asset('images/ar/wishdomship.obj')}};
            mtl: {{asset('images/ar/wishdomship.mtl')}}">
        </a-entity>    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

And here's the .mtl file:

newmtl material0
illum 4
Kd 0.00 0.00 0.00
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
map_Kd wisdomshiptex2.jpg
Ni 1.00
Ks 0.50 0.50 0.50
Ns 18.00

Thanks a lot !

kalwalt commented 6 years ago

@KrisTi969 i have a similar problem. But i'm not using a-frame, simply ar.js with three.js... it works fine in desktop browser but is rendered black in an Android browser. Maybe it's a issue related to WebGL?

KrisTi969 commented 6 years ago

@kalwalt what i managed to do is give up on textures, and manually collor the object in a 3d editor. For some reason it's simply not accepting external textures.

kalwalt commented 6 years ago

@KrisTi969 understood, but we or someonelse should found the reason fo this issue....

tokarev-i-v commented 6 years ago

May be you need an Ambient Light? That will flashing all objects. Try this: var ambientlight = new THREE.AmbientLight( 0xffffff, 5 ); scene1.add(ambientlight);

KrisTi969 commented 6 years ago

@polyzer By using this code:

<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
    <a-assets>
        <a-asset-item id="ship-obj" src="{{asset('images/ar/TV/LCD TV.obj')}}"></a-asset-item>
        <a-asset-item id="ship-mtl" src="{{asset('images/ar/TV/LCD TV.mtl')}}"></a-asset-item>
    </a-assets>
    <a-marker preset="hiro">
        <a-entity obj-model="obj: #ship-obj; mtl: #ship-mtl" >

        </a-entity>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

And without adding the ambient light (i tried but i could not succeed), I can still see a light at the top of the camera display like so: notok

So I do not belive the issue is related to ambient Lightning.

valentinarachiele commented 6 years ago

In A-Frame the right syntax for the obj model is

<a-assets>
       <a-asset-item id="#ship-obj" src="your/path/to/obj"></a-asset-item>
       <a-asset-item id="#ship-mtl" src="your/path/to/mtl"></a-asset-item>
  </a-assets>

  <a-obj-model src="#ship-obj" mtl="#ship-mtl"></a-obj-model>

Maybe you could try using this!

aj019 commented 6 years ago

Add this script to your project

KrisTi969 commented 6 years ago

<html>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>

<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
    <a-assets>

        <a-asset-item id="ship-obj" src="{{asset('images/ar/TV/LCD TV.obj')}}"></a-asset-item>
       <a-asset-item id="ship-mtl" src="{{asset('images/ar/TV/LCD TV.mtl')}}"></a-asset-item>

    </a-assets>
    <a-marker preset="hiro">
        <a-obj-model src="#ship-obj" mtl="#ship-mtl"></a-obj-model>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

@valentinarachiele Thank you for the reply but with the above code, i still get the same results. I checked the mtl file and for texure it says "map_Kd Texture.JPG", I double checked and the texture file is indeed in the same directory as the mtl and obj files.

@aj019 i still get the black object, but with that script i think i noticed several imprevements in performance.

KrisTi969 commented 6 years ago

I managed to somehow "fix" it. I decided to try the obj2gltf converter and now the textures are finally loaded successfuly.

commentatorboy commented 5 years ago

I still have this problem. Even if I tried to convert it to .glb It still shows my lego brick with lightning but no/black material. I used https://www.vectary.com/ To change the color to red, and export it into glb file.

Here is my code:

<!doctype HTML>
<html>
<link rel="stylesheet" href="{{ URL::asset('css/show.css') }}">

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.2.0/dist/aframe-extras.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>

<body style='margin : 0px; overflow: hidden;'>

    <a-scene inspector="url: https://aframe-inspector-20181128-abjyfktcpl.now.sh/aframe-inspector.min.js" embedded arjs>
      <a-assets>
        @if ($ar_object->link)
            <a-asset-item id="tree" src="{{ $ar_object->link }}" crossOrigin="anonymous">

        @else
            <a-asset-item id="tree" src="{{ URL::asset('uploads/'.$ar_object->uid.'.glb') }}">
        @endif

            </a-assets>
    <a-marker preset='custom' type='pattern' url='{{ URL::asset('uploads/we3d.patt') }}'>
           <a-entity id="entity" position="0 0 0"
           material="color: red" rotation="0 0 0"
           light="type: spot; color: #F00; intensity: 5" scale="3 3 3"
           gltf-model="#tree">
            <a-animation attribute="rotation"
                dur="10000"
                fill="forwards"
                to="0 0 360"
                repeat="indefinite">
            </a-animation>
        </a-entity>
        </a-marker>

      <a-entity camera></a-entity>

    </a-scene>
    <button id="pause_button" onclick="pauseAnimation();">pause animation</button>
    <button id="play_button" onclick="playAnimation();">play animation</button>

  </body>
  <script>

        var el = document.querySelector('#entity');

        var pause_button = document.querySelector('#pause_button');
        var play_button = document.querySelector('#play_button');
        play_button.style.display = 'none';
        function pauseAnimation(){
            el.pause();

            pause_button.style.display = 'none';
            play_button.style.display = 'block';
        }
        function playAnimation(){
            el.play();

            pause_button.style.display = 'block';
            play_button.style.display = 'none';

        }

  </script>

</html>

zorida commented 5 years ago

I tried with both .gltf and draco compressed .glb models, and the model is black on Firefox / Android, with or without ambient lighting. On Chrome and Firefox / Desktop I see the 'textures'.

Using A-frame version 0.9.0 with aframe-ar and aframe-extras.loaders

commentatorboy commented 5 years ago

The reason this exists (I think) is because of the renderer: https://github.com/mrdoob/three.js/issues/14137#issuecomment-397856954 If possible I will try and experiment with the mediump renderer. https://github.com/mrdoob/three.js/issues/14137#issuecomment-397843382 Since I use a different CPU it might have an effect. (Check the top of the thread)

commentatorboy commented 5 years ago

I found the solution everyone!!! https://aframe.io/docs/0.9.0/components/renderer.html#precision

Just set the a-scene to have "precision: mediump".

Please tell this to everyone!

kalwalt commented 5 years ago

@commentatorboy good to know!

pearsonkyle commented 5 years ago

I'm still getting a black obj file even with the renderer settings to mediump

HTML:

    <!doctype HTML>
    <html>
    <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.js"></script>

    <body style='margin : 0px; overflow: hidden;'>
        <a-scene embedded arjs renderer="precision: medium">
            <a-marker id="memarker" type="pattern" url="../static/patterns/pattern-earth.patt" vidhandler>
                <a-entity obj-model="obj: url(../static/models/{}.obj); mtl: url(../static/models/{}.mtl)" scale="0.1 0.1 0.1"> </a-entity>
            </a-marker>
            <a-entity camera></a-entity>
        </a-scene>
    </body>

    </html>

Web server output:

 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 273-464-730
 * Running on https://0.0.0.0:4000/ (Press CTRL+C to quit)
192.168.0.176 - - [14/Sep/2019 13:07:20] "GET /models/hirise HTTP/1.1" 200 -
192.168.0.176 - - [14/Sep/2019 13:07:20] "GET /static/models/hirise.mtl HTTP/1.1" 200 -
192.168.0.176 - - [14/Sep/2019 13:07:21] "GET /static/models/hirise.obj HTTP/1.1" 200 -
192.168.0.176 - - [14/Sep/2019 13:07:21] "GET /static/patterns/pattern-earth.patt HTTP/1.1" 200 -
192.168.0.176 - - [14/Sep/2019 13:07:21] "GET /static/models/DTEEC_019358_2225_018857_2225_U01.ca.jpg HTTP/1.1" 200 -

mtl file:

# Blender MTL File: 'None'
# Material Count: 1

newmtl imageMat
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.640000 0.640000 0.640000
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.00000 0.000000
Ni 1.000000
d 1.000000
illum 2
map_Kd DTEEC_019358_2225_018857_2225_U01.ca.jpg

It looks like everything loads on the web page but when I look at the web site on my mobile device the material doesn't show

kalwalt commented 5 years ago

@pearsonkyle that is weird, what your result with gltf instead? i have this example https://kalwalt.github.io/kalwalt-interactivity-AR/aframe-ar-simple-gltf.html code here: https://github.com/kalwalt/kalwalt-interactivity-AR/blob/master/aframe-ar-simple-gltf.html This works for you?

pearsonkyle commented 5 years ago

@kalwalt That example works on my mobile device and I can see the colored duck. I'm exporting my models from Blender and have tried a .gltf and .glb file and both give me the same issue. I'm viewing the webpages on a Google Pixel device.

kalwalt commented 5 years ago

@pearsonkyle we should identify the source of the problem. Maybe it depends by the model or the type of the mobile device and/or the browser in use. If you can share the model we can try to test. And please give us the maximum of infos. Also can you test the code with aframe 0.9.2 and latest AR.js 1.7.8?

pearsonkyle commented 5 years ago

@kalwalt I've tried the latest versions of each library and it's still black. Perhaps it's my model.. I've attached the .obj, .mtl, and image associated with the material. See if you can view the model. 3d model.zip I can try and export a gltf as well

kalwalt commented 5 years ago

The problem in my opinion is the model itself. I tried it it not appear black but it is a kind of geodesic object. Because you applied a texture as displacement and i think aframe ( and as consequence Three.js because is the render engine) try to render as a simple model. Viewing the model in Blender instead appear as a landscape object, and that is correct. But because is a landcsape mesh you should convert it to a full mesh. Or without exporting a model maybe you could try to create a plane mesh and apply a displacement shader.

kalwalt commented 5 years ago

@pearsonkyle Sorry i am wrong soon i will provide a working example with your model.

kalwalt commented 5 years ago

Try this: https://kalwalt.github.io/kalwalt-interactivity-AR/aframe-ar-landscape-model.html code here https://github.com/kalwalt/kalwalt-interactivity-AR/blob/master/aframe-ar-landscape-model.html The model is very big so is difficult to scale down. It renders correctly in my Linux machine but kill my phone (Wiko model based on Adreno processor) i think because is too big, more than 10 mb is too much. Better to use another approach as i said before.

pearsonkyle commented 5 years ago

Thank you very much for your help! Unfortunately, I can't see the model in your example either. My screen goes completely gray when it locks onto the hiro image. Maybe it's because the model is too large. It's interesting you have to scale the model down so much in size. I was able to view it at a scale of 10% in each dimension. Hmmm, I like your idea of a plane mesh and applying a displacement shader, I will try that.

jeromeetienne / AR.js

Always black objects #325