xeolabs/scenejs — Issue #142: transparency broken ? 
Author: hwilliam
Created: 2011-10-28 10:20:50+00:00
State: open

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();