Transparent image used as material rendering incorrectly [SOLVED]

[xbeat]

In this project the mesh of the soccer golie net uses a transparent material, the back part (the grey one) becomes incorrectly transparent only from the point of view of the camera (the background of the skybox is displayed) while the green part, which uses an image as background is rendered correctly.

Live Example

https://xbe.at/AI-3DSoccer/start.html

[Mugen87]

It’s really hard to debug such a big application. It will be much easier to provide help if you isolate the problem in a small live demo. Use this as a starter template: https://jsfiddle.net/f2Lommf5/

[xbeat]

Hi thanks, for the reply, this is a simplified live demo:

https://xbe.at/plus/3DPitch/start.html

you can see the red color pass through the grey border.

Maybe it’s something related to the frustum culled?, because the material with the green image render correctly.

[Mugen87]

Wow, that was quick!

The entire stadium is a single model right now. Can you tell me the name or uuid of the goal objects? In this way we can identify the respective material and check the related properties.

BTW: What tool are you using for modeling?

[xbeat]

Hi, i use blender 2.79a for modelling, exported in json using three.js 0.91

goal net object

    "map":"2BEDECFC-AAD6-43D8-B754-C0E8F37A5CD6",
    "depthTest":true,
    "depthWrite":true,
    "uuid":"B86F1739-3655-4980-B8EF-ECFE99F00272",
    "type":"MeshLambertMaterial",
    "color":16777215,
    "opacity":0,
    "transparent":true,
    "vertexColors":0,
    "name":"material_28pow2",
    "blending":"NoBlending",
    "emissive":0

[Mugen87]

Um, what happens if you use glTFExporter instead? You can use GLTFLoader to import the glTF file into your scene. Unfortunately, the JSON exporter is somewhat buggy so maybe it helps to use a different exporter.

[Atul_Mourya]

I would recommend to export .obj file from blender, import it from threejs editor, apply all the material, export it using ‘export object’ from its file menu. And use THREE.ObjectLoader to load the file in your application.

Regarding the transparency issue, I would recommend keeping the object ( Goalpost ) as a separate entity while exporting it from blender.

Change to object hierarchy in such a way that the transparent object, i.e the goal post, is at the very end of the object tree. Also use material.side = THREE.DoubleSide.

Or else used use .renderOrder property such that the goal post gets render only after all the other object get rendered for each rendering loop.

[xbeat]

@Mugen87, this is the pitch exported using glTF i can’t see anything…

https://xbe.at/plus/glTFpitch/start.html

parameters used for exporting;

Blender file (1.8 MB)

Material used

[Atul_Mourya]

Try this edited model. model.json (1.2 MB)
Open it in threejs editor

Here’s the result:

Note: Materials are applied only for the parts that have textures on it. You’ll need to add materials for the rest of the parts. Once done use THREE.ObjectLoader instead of THREE.JSONLoader to load it in your application.

Additional tip: There seems to be a lot to subobjects with same materials and texture. The performant way would be to have all object merged as single objects

[xbeat]

Hi, @Atul_Mourya, thank you for the help,

Starting from your suggestions and following the procedure below I was able to solve the problem!.

1. exported from Blender as a JSON (three) file and embedding images (see screenshots for the settings).
   
   
2. Import in the editor of three. js
   • Inserted an Hemisphere light with color: #000000 Ground color: #ffffff
3. Select the goalie network (SketchUp_001 object) and edited the material as follows ( see screenshot below )
   1. Color: #000000
   2. Emission: #000000
   3. Blending: NORMAL (default: NO)
   4. Opacity: 1.00
   5. Transparent: Selected
   6. Alpha Test: 0

from:

to:

4. Selected the grey Edge (SketchUp_198) and unchecked the transparency (the object is not transparent because is visible )

5. Eliminated the Light
6. Exported the scene
7. Load the object with THREE.ObjectLoader

Now all working as expected! https://xbe.at/plus/3DPitch/start.html

Could you tell me how to group the objects?

Thanks!

Model exported stadium.json (1.1 MB)

[Atul_Mourya]

Don’t look for grouping but look to merge the geometry that has common materials and textures. This will reduce the number of draw calls and will enhance the performance.

Example : All seat area into one mesh, all stairs into one mesh, both goalpost into one mesh, etc.

Have a look at this method of merging meshes in blender.

Merge multiple meshes into one single mesh?

Also, aware that not to use costly materials unnecessarily. You can opt for MeshBasicMaterial if you are not using any exclusive property of MeshLamberMaterial