xxv / jsc3d

Automatically exported from code.google.com/p/jsc3d
31 stars 20 forks source link

png as mtl Kd texture caused transparent phenomenon, how to remove. #100

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
What steps will reproduce the problem?
1. loading obj + mtl (mtl mapped with png)
2. use jsc3d to render 3d obj+mtl

What is the expected output? What do you see instead?
My expected output should be solid display(attachment2) as preview in 3D tools,
just like when the mtl is using jpg instead of png mapping with obj. (cause jpg 
didn't contain transparent layer)

instead , i see quite obvious transparency in (attachment1)
and do not know how to remove the transparent effect.  

What version of the product are you using? On what operating system?
current version.  OS: windows8.1

Please provide any additional information below.
1.transparent view as attached.

2. mtl generated:
(as you mentioned only Kd or map_Kd few param will be taken by obj loader)

 newmtl _teapotdefault
Ka 0.60000 0.60000 0.60000
Kd 0.80000 0.80000 0.80000
Ks 0.00000 0.00000 0.00000
Ns 5.00000
map_Kd newmapv7.png

3.  jsc3d viewer setting: 
    var canvas = document.getElementById('cv');
    var viewer = new JSC3D.Viewer(canvas);
    viewer.setParameter('SceneUrl', 'v7_map.obj');  viewer.setParameter('InitRotationX', 0);
    viewer.setParameter('InitRotationY', 0);
    viewer.setParameter('InitRotationZ', 0);
    //viewer.setParameter('ModelColor', '#ffffff');
    viewer.setParameter('BackgroundColor1', '#B9EBFF');
    viewer.setParameter('BackgroundColor2', '#DFF6FF');
    viewer.setParameter('RenderMode', 'textureflat'); // texturesmooth etc
        viewer.setParameter('MipMapping', 'on');
    viewer.setParameter('Renderer', 'webgl');
    viewer.init();
    viewer.update();

Original issue reported on code.google.com by haibo...@solstice.sg on 14 Aug 2014 at 9:22

Attachments:

GoogleCodeExporter commented 9 years ago
The png file must be corrupted with incorrect transparent pixels. Use other 
file formats which do not contain alpha channel instead. Or you can add the 
following snippet to manually diable alpha blending on textures for all meshes:

  viewer.onloadingcomplete  = function() {
    var scene = viewer.getScene();
    if (scene) {
      scene.forEachChild( function(mesh) {
        if (mesh.texture)
          mesh.texture.hasTransparency = false;
      } );
    }
  };

Original comment by Humu2...@gmail.com on 15 Aug 2014 at 2:07

GoogleCodeExporter commented 9 years ago
[deleted comment]
GoogleCodeExporter commented 9 years ago
thanks very much for the reply, great author, 
anyway after testing the script,seems the script didn't work as expected to 
remove transparecy,besides 
I don't not know how many file types of texture jsc3d supported..

basically,as far as i know, common texture file types are 
(bmp, png, tga, dds, etc with alpha channel) && (jpeg without alpha channel) if 
i'm right, although the above transparent issue can be easily fixed by using 
jpeg file since save in jpeg won't contain alpha ,no transparency would be 
shown. 

The problem is just that why the 3d tools can render the supposed corrupted png 
texture without seeing transparency while in jsc3d i've not found any demos 
that have been use png as material texture (map_Kd xxxx.png) without showing 
transparency yet. 
if we suppose png corrupted , can we find any existing url demo which can 
explain that a png file that contains alpha channel to show both 
transparentcy(alpha=0) & nontransparency (alpha =1) at the same time on loading 
one obj+mtl(map_Kd xxx.png).

Original comment by haibo...@solstice.sg on 16 Aug 2014 at 12:51

GoogleCodeExporter commented 9 years ago
Is it because the materials also have transparency defined? Then try this one:

  viewer.onloadingcomplete  = function() {
    var scene = viewer.getScene();
    if (scene) {
      scene.forEachChild( function(mesh) {
        // turn off transparency on texture
        if (mesh.texture)
          mesh.texture.hasTransparency = false;
        // turn off mateial transparency as well
        if (mesh.material)
          mesh.material.transparency = 0;
      } );
    }
  };

Jsc3d depends on the host browser to decode images. Basically, png, gif and 
jpeg are well supported by almost all browsers. Other formats such as tiff, 
bmp, tga, etc. may be supported by specific browsers like Firefox or IE. I 
don't think you should build your application on such assumption.

Original comment by Humu2...@gmail.com on 18 Aug 2014 at 7:18