This repository has been archived by the owner. It is now read-only.

transparency broken ? #142

Closed
hwilliam opened this Issue Oct 28, 2011 · 5 comments

Comments

Projects
None yet
3 participants
@hwilliam

Hello

Using scenejs 2.0. After many tries to move “transparent:true”, I don’t understand how to manage the it

Attached a simple test using 2 boxes and a ground, the sequence of rendering is box1, ground, box2. The alpha ground is 0.5, I should see a kind of reflection of box1 under the ground. But what’s ever the order of the objects and the ground alpha factor, I can’t see the box under the ground. This code works with scenejs 0.8

any change in 2.0 ? Any tips ? or ideas ?

var _Scene=/open First brace/

{
type: 'scene',
id: 'Scene',
canvasId: 'theCanvas',
/Open node prologue/
nodes:
[

     {
     type:  'library',
     nodes:
     [
        /*Generate 3 material*/

           {
           coreId:  'No Material-use-default-014',
           type:    'material',
           baseColor:   {r:0.588000 , g:0.588000 , b:0.588000 },
           specularColor:   {r:0.900000 , g:0.900000 , b:0.900000 },
           shine:   10.000000,
           emit:    0.000000,
           specular:    0.000000,
           },

           {
           coreId:  '01 - Default',
           type:    'material',
           baseColor:   {r:0.235294 , g:0.949020 , b:0.384314 },
           specularColor:   {r:0.900000 , g:0.900000 , b:0.900000 },
           shine:   9.999999,
           emit:    0.000000,
           specular:    0.000000,
           alpha:   0.500000,
           flags:{transparent:true},

           },

           {
           coreId:  'No Material-use-default-015',
           type:    'material',
           baseColor:   {r:0.588000 , g:0.588000 , b:0.588000 },
           specularColor:   {r:0.900000 , g:0.900000 , b:0.900000 },
           shine:   10.000000,
           emit:    0.000000,
           specular:    0.000000,
           },
        /*Generate 0 Texture*/
        /*Generate 3 Geometry*/

           {
           coreId:  'geom_2CBECB80',
           type:    'geometry',
           primitive:   'triangles',
           positions:[-4.5218,-5.1296,0.0000,-4.5218,5.1296,0.0000,4.5218,5.1296,0.0000,4.5218,-5.1296,0.0000,-4.5218,-5.1296,23.9300,4.5218,-5.1296,23.9300,4.5218,5.1296,23.9300,-4.5218,5.1296,23.9300,-4.5218,-5.1296,0.0000,4.5218,-5.1296,0.0000,4.5218,-5.1296,23.9300,-4.5218,-5.1296,23.9300,4.5218,5.1296,0.0000,4.5218,-5.1296,23.9300,4.5218,5.1296,0.0000,-4.5218,5.1296,0.0000,-4.5218,5.1296,23.9300,4.5218,5.1296,23.9300,-4.5218,5.1296,0.0000,-4.5218,-5.1296,23.9300],
           normals:[0.0000,0.0000,-1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,1.0000],
           indices:[0,1,2,2,3,0,4,5,6,6,7,4,8,9,10,10,11,8,3,12,6,6,13,3,14,15,16,16,17,14,18,0,19,19,7,18],
           uv:[1.0000,0.0000,1.0000,1.0000,0.0000,1.0000,0.0000,0.0000,0.0000,0.0000,1.0000,0.0000,1.0000,1.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,1.0000,1.0000,0.0000,1.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,1.0000,1.0000,0.0000,1.0000,0.0000,0.0000,1.0000,1.0000],
           },

           {
           coreId:  'geom_19461D48',
           type:    'geometry',
           primitive:   'triangles',
           positions:[-29.9236,-80.8360,0.0000,-14.9618,-80.8360,0.0000,-14.9618,-40.4180,0.0000,-29.9236,-40.4180,0.0000,0.0000,-80.8360,0.0000,0.0000,-40.4180,0.0000,14.9618,-80.8360,0.0000,14.9618,-40.4180,0.0000,29.9236,-80.8360,0.0000,29.9236,-40.4180,0.0000,-14.9618,0.0000,0.0000,-29.9236,0.0000,0.0000,-0.0000,0.0000,0.0000,14.9618,0.0000,0.0000,29.9236,0.0000,0.0000,-14.9618,40.4180,0.0000,-29.9236,40.4180,0.0000,-0.0000,40.4180,0.0000,14.9618,40.4180,0.0000,29.9236,40.4180,0.0000,-14.9618,80.8360,0.0000,-29.9236,80.8360,0.0000,0.0000,80.8360,0.0000,14.9618,80.8360,0.0000,29.9236,80.8360,0.0000,-44.8853,-121.2540,0.0000,-29.9236,-121.2540,0.0000,-44.8853,-80.8360,0.0000,44.8853,-80.8360,0.0000,29.9236,-121.2540,0.0000,44.8853,-121.2540,0.0000,44.8853,121.2540,0.0000,29.9236,121.2540,0.0000,44.8853,80.8360,0.0000,-44.8853,80.8360,0.0000,-29.9236,121.2540,0.0000,-44.8853,121.2540,0.0000,-14.9618,-121.2540,0.0000,44.8853,-40.4180,0.0000,14.9618,121.2540,0.0000,-44.8853,40.4180,0.0000,-0.0000,-121.2540,0.0000,44.8853,0.0000,0.0000,0.0000,121.2540,0.0000,-44.8853,0.0000,0.0000,14.9618,-121.2540,0.0000,44.8853,40.4180,0.0000,-14.9618,121.2540,0.0000,-44.8853,-40.4180,0.0000],
           normals:[0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000],
           indices:[0,1,2,2,3,0,1,4,5,5,2,1,4,6,7,7,5,4,6,8,9,9,7,6,3,2,10,10,11,3,2,5,12,12,10,2,5,7,13,13,12,5,7,9,14,14,13,7,11,10,15,15,16,11,10,12,17,17,15,10,12,13,18,18,17,12,13,14,19,19,18,13,16,15,20,20,21,16,15,17,22,22,20,15,17,18,23,23,22,17,18,19,24,24,23,18,25,26,0,0,27,25,28,8,29,29,30,28,31,32,24,24,33,31,34,21,35,35,36,34,26,37,1,1,0,26,38,9,8,8,28,38,32,39,23,23,24,32,40,16,21,21,34,40,37,41,4,4,1,37,42,14,9,9,38,42,39,43,22,22,23,39,44,11,16,16,40,44,41,45,6,6,4,41,46,19,14,14,42,46,43,47,20,20,22,43,48,3,11,11,44,48,45,29,8,8,6,45,33,24,19,19,46,33,47,35,21,21,20,47,27,0,3,3,48,27],
           uv:[0.1667,0.1667,0.3333,0.1667,0.3333,0.3333,0.1667,0.3333,0.5000,0.1667,0.5000,0.3333,0.6667,0.1667,0.6667,0.3333,0.8333,0.1667,0.8333,0.3333,0.3333,0.5000,0.1667,0.5000,0.5000,0.5000,0.6667,0.5000,0.8333,0.5000,0.3333,0.6667,0.1667,0.6667,0.5000,0.6667,0.6667,0.6667,0.8333,0.6667,0.3333,0.8333,0.1667,0.8333,0.5000,0.8333,0.6667,0.8333,0.8333,0.8333,0.0000,0.0000,0.1667,0.0000,0.0000,0.1667,1.0000,0.1667,0.8333,0.0000,1.0000,0.0000,1.0000,1.0000,0.8333,1.0000,1.0000,0.8333,0.0000,0.8333,0.1667,1.0000,0.0000,1.0000,0.3333,0.0000,1.0000,0.3333,0.6667,1.0000,0.0000,0.6667,0.5000,0.0000,1.0000,0.5000,0.5000,1.0000,0.0000,0.5000,0.6667,0.0000,1.0000,0.6667,0.3333,1.0000,0.0000,0.3333],
           },

           {
           coreId:  'geom_2CC0B6C0',
           type:    'geometry',
           primitive:   'triangles',
           positions:[-4.5218,-5.1296,0.0000,-4.5218,5.1296,0.0000,4.5218,5.1296,0.0000,4.5218,-5.1296,0.0000,-4.5218,-5.1296,23.9300,4.5218,-5.1296,23.9300,4.5218,5.1296,23.9300,-4.5218,5.1296,23.9300,-4.5218,-5.1296,0.0000,4.5218,-5.1296,0.0000,4.5218,-5.1296,23.9300,-4.5218,-5.1296,23.9300,4.5218,5.1296,0.0000,4.5218,-5.1296,23.9300,4.5218,5.1296,0.0000,-4.5218,5.1296,0.0000,-4.5218,5.1296,23.9300,4.5218,5.1296,23.9300,-4.5218,5.1296,0.0000,-4.5218,-5.1296,23.9300],
           normals:[0.0000,0.0000,-1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,-1.0000,0.0000,0.0000,1.0000],
           indices:[0,1,2,2,3,0,4,5,6,6,7,4,8,9,10,10,11,8,3,12,6,6,13,3,14,15,16,16,17,14,18,0,19,19,7,18],
           uv:[1.0000,0.0000,1.0000,1.0000,0.0000,1.0000,0.0000,0.0000,0.0000,0.0000,1.0000,0.0000,1.0000,1.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,1.0000,1.0000,0.0000,1.0000,1.0000,0.0000,0.0000,1.0000,0.0000,0.0000,1.0000,0.0000,1.0000,1.0000,0.0000,1.0000,0.0000,0.0000,1.0000,1.0000],
           },
        ],
     },
  /*Begin root object*/

     {
     nodes:
     [

           {
           type:    'flags',
              flags:
              {
              transparent:  true,
              backfaces:    true,
              enabled:  true,
              },
           nodes:
           [

                 {
                 type:  'renderer',
                 enableCullFace:    true,
                    clear:
                    {
                    color:  true,
                    depth:  true,
                    },
                    clearColor:
                    {
                    r:  0.000000,
                    g:  0.000000,
                    b:  0.000000,
                    },
                 nodes:
                 [

                       {
                       /*Open camera prologue*/
                       type:    'lookAt',
                       eye: {x:-7.437860,y:-75.972046,z:53.947372},
                       look:    {x:-7.272458,y:-75.127327,z:53.438358},
                       up:  {x:0.097811,y:0.499527,z:0.860759},
                       nodes:
                       [

                             {
                             id:    'Camera001',
                             type:  'camera',
                                optics:
                                {
                                type:   'perspective',
                                fovy:   45.000000,
                                aspect :    1.333333,
                                near:   0.000000,
                                far:    1000.000000,
                                },
                             /*Open the scene encapsulation*/
                             nodes:
                             [

                                   {
                                   type:    'light',
                                   mode:    'point',
                                   color:   {r:1.000000 , g:1.000000 , b:1.000000 },
                                   diffuse: true,
                                   specular:    true,
                                   constantAttenuation: 1.000000,
                                   linearAttenuation:   0.0,
                                   pos: {x:-7.896260,y:-62.305199,z:141.669601},
                                   },

                                   {
                                   type:    'light',
                                   mode:    'point',
                                   color:   {r:1.000000 , g:1.000000 , b:1.000000 },
                                   diffuse: true,
                                   specular:    true,
                                   constantAttenuation: 1.000000,
                                   linearAttenuation:   0.0,
                                   pos: {x:-7.954369,y:-79.310524,z:46.700943},
                                   },

                                   {
                                   id:  'Box001',
                                   type:    'matrix',
                                   elements:    [1.000000,0.000000,0.000000,0.000000,0.000000,1.000000,0.000000,0.000000,0.000000,0.000000,1.000000,0.000000,-0.189491,9.072725,23.053909,1.000000],
                                   nodes:
                                   [

                                         {
                                         type:  'material',
                                         coreId:    'No Material-use-default-014',
                                         nodes:
                                         [

                                               {
                                               type:    'geometry',
                                               coreId:  'geom_2CBECB80',
                                               },
                                            ],
                                         },
                                      ],
                                   /*Closed  node  Box001 */
                                   },

                                   {
                                   id:  'QuadPatch001',
                                   type:    'matrix',
                                   elements:    [3.657845,0.000000,0.000000,0.000000,0.000000,1.000000,0.000000,0.000000,0.000000,0.000000,1.000000,0.000000,-27.442038,44.402275,0.000000,1.000000],
                                    nodes:[{
                                    flags:{transparent:true},

                                   nodes:
                                   [

                                         {
                                         type:  'material',
                                         coreId:    '01 - Default',
                                         nodes:
                                         [

                                               {
                                               type:    'geometry',
                                               coreId:  'geom_19461D48',
                                               },
                                            ],
                                         },
                                      ],
                                    }],
                                   /*Closed  node  QuadPatch001 */
                                   },
                                /*  User property buffer LastPose = undefined  */

                                   {
                                   id:  'Box002',
                                   type:    'matrix',
                                   elements:    [1.000000,0.000000,0.000000,0.000000,0.000000,1.000000,0.000000,0.000000,0.000000,0.000000,1.000000,0.000000,-0.189491,9.072725,-41.781898,1.000000],
                                   nodes:
                                   [

                                         {
                                         type:  'material',
                                         coreId:    'No Material-use-default-015',
                                         nodes:
                                         [

                                               {
                                               type:    'geometry',
                                               coreId:  'geom_2CC0B6C0',
                                               },
                                            ],
                                         },
                                      ],
                                   /*Closed  node  Box002 */
                                   },
                                ],
                             /*Closed the scene encapsulation*/
                             },
                          ],
                       /*Closed camera prologue*/
                       },
                    ],
                 },
              ],
           /*End of of Block flags */
           },
        ],
     },
  /*Closed Root Object*/
  ],

};
/closed first brace/

myscene = SceneJS.createScene(_Scene);
myscene.start();

@xeolabs

This comment has been minimized.

Show comment Hide comment
@xeolabs

xeolabs Oct 28, 2011

Owner

Put all the flags in their own "flags" nodes - the "flags" attributes (like you have on the 'QuadPatch001') won't have any effect in V2.0.

And remember: child flags completely override their parent flags..

Owner

xeolabs commented Oct 28, 2011

Put all the flags in their own "flags" nodes - the "flags" attributes (like you have on the 'QuadPatch001') won't have any effect in V2.0.

And remember: child flags completely override their parent flags..

@hwilliam

This comment has been minimized.

Show comment Hide comment
@hwilliam

hwilliam Oct 28, 2011

Thanks for your prompt answer; I am completely stuck due to this issue

Yes, I have put a “flags” in different places in order to observe the behaviors ( top of node, before the transformation, in the library )

I have one flags node on top of the scnegraph, this is supposed to affect all childs nodes

},
/Begin root object/

 {
 nodes:
 [

       {
       type:    'flags',
          flags:
          {
          transparent:  true,
          backfaces:    true,
          enabled:  true,
          },


Enabled and backfaces works fine, but transparent seems to have no effect.
Where do I put the flags node for an object transparency?

Regards

Thanks for your prompt answer; I am completely stuck due to this issue

Yes, I have put a “flags” in different places in order to observe the behaviors ( top of node, before the transformation, in the library )

I have one flags node on top of the scnegraph, this is supposed to affect all childs nodes

},
/Begin root object/

 {
 nodes:
 [

       {
       type:    'flags',
          flags:
          {
          transparent:  true,
          backfaces:    true,
          enabled:  true,
          },


Enabled and backfaces works fine, but transparent seems to have no effect.
Where do I put the flags node for an object transparency?

Regards

@xeolabs

This comment has been minimized.

Show comment Hide comment
@xeolabs

xeolabs Oct 28, 2011

Owner

Could you post the example to http://jsfiddle.net?

Looks like we'll have to play with it live to see what's going on..

In this example you have no opaque objects, so it's possible that transparency is broken for when there are only transparent objects, we'll see.

Owner

xeolabs commented Oct 28, 2011

Could you post the example to http://jsfiddle.net?

Looks like we'll have to play with it live to see what's going on..

In this example you have no opaque objects, so it's possible that transparency is broken for when there are only transparent objects, we'll see.

@hwilliam

This comment has been minimized.

Show comment Hide comment
@hwilliam

hwilliam Oct 28, 2011

Thanks again,

Here is a link of the same scene modified for 0.8 and 2.0
You can observe that that the transparency is broken event of I put a node
Flags on top of the root node in v2.0

Regards

Scenejs .2.0
http://jsfiddle.net/hWilliam/p9PQ3/

Scenejs 0.8
http://jsfiddle.net/hWilliam/v8Grn/

Thanks again,

Here is a link of the same scene modified for 0.8 and 2.0
You can observe that that the transparency is broken event of I put a node
Flags on top of the root node in v2.0

Regards

Scenejs .2.0
http://jsfiddle.net/hWilliam/p9PQ3/

Scenejs 0.8
http://jsfiddle.net/hWilliam/v8Grn/

@Dewb

This comment has been minimized.

Show comment Hide comment
@Dewb

Dewb Feb 10, 2012

Hey all -- just chiming in to say that I believe transparency is indeed broken when there are only transparent objects.

Here's the 2.0 example Transparency Sorting with Layers, with an additional flags node added around the opaque cube.

With the transparent flag false on this node, the outer cubes are still transparent:
http://jsfiddle.net/M6nwx/1/

With the transparent flag set to true, all cubes are now opaque.
http://jsfiddle.net/M6nwx/2/

Here's a diff of the GL logs from a similar local example. The only difference appears to be the position of the gl.enable(gl.BLEND) and gl.blendFunc() calls, which move from line 163 to 215 when you change transparent: true back to transparent: false on the opaque cube node.

http://pastebin.com/z9wLr8TD

Dewb commented Feb 10, 2012

Hey all -- just chiming in to say that I believe transparency is indeed broken when there are only transparent objects.

Here's the 2.0 example Transparency Sorting with Layers, with an additional flags node added around the opaque cube.

With the transparent flag false on this node, the outer cubes are still transparent:
http://jsfiddle.net/M6nwx/1/

With the transparent flag set to true, all cubes are now opaque.
http://jsfiddle.net/M6nwx/2/

Here's a diff of the GL logs from a similar local example. The only difference appears to be the position of the gl.enable(gl.BLEND) and gl.blendFunc() calls, which move from line 163 to 215 when you change transparent: true back to transparent: false on the opaque cube node.

http://pastebin.com/z9wLr8TD

@xeolabs xeolabs closed this Aug 9, 2013

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.