Merge "Text - Add the color to the vertex info." into devel/master
[platform/core/uifw/dali-toolkit.git] / node-addon / texture-mesh.js
1  var window= {
2            x:0,
3            y:0,
4            width:1920,
5            height: 1080,
6            transparent: false,
7            name:'texture-mesh-app'
8  };
9
10  var viewMode={
11        'stereoscopic-mode':'mono', // stereo-horizontal, stereo-vertical, stereo-interlaced,
12        'stereo-base': 65 // Distance in millimeters between left/right cameras typically between (50-70mm)
13  };
14
15  var options= {
16     'window': window,
17     'view-mode': viewMode,
18  }
19
20 var imageDir = "./";
21
22
23 // desktop
24 //var dali = require('./build/Release/dali')( options );
25
26 // target
27 var dali = require('dali')( options );
28
29 var daliApp = {};
30
31 daliApp.createMeshActor = function() {
32
33       // Create shader
34       var vertShader =
35                "attribute mediump vec2    aPosition;\
36                 attribute highp   vec2    aTexCoord;\
37                 varying   mediump vec2    vTexCoord;\
38                 uniform   mediump mat4    uMvpMatrix;\
39                 uniform   mediump vec3    uSize;\
40                 uniform   lowp    vec4    uFadeColor;\
41                 void main()\
42                 {\
43                   mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);\
44                   vertexPosition.xyz *= uSize;\
45                   vertexPosition = uMvpMatrix * vertexPosition;\
46                   vTexCoord = aTexCoord;\
47                   gl_Position = vertexPosition;\
48                 }";
49
50       var fragShader =
51                "varying mediump vec2  vTexCoord;\
52                 uniform lowp    vec4  uColor;\
53                 uniform sampler2D     sTexture;\
54                 uniform lowp    vec4  uFadeColor;\
55                 void main()\
56                 {\
57                   gl_FragColor = texture2D( sTexture, vTexCoord ) * uColor * uFadeColor;\
58                 }";
59
60       var shaderOptions = {
61               vertexShader : vertShader,
62               fragmentShader: fragShader
63           };
64
65       var shader = new dali.Shader(shaderOptions);
66
67       var material = new dali.Material( shader );
68       var image = new dali.ResourceImage( {url: imageDir + "image-1.jpg"} );
69       material.addTexture(image, "sTexture");
70
71       var material2 = new dali.Material( shader );
72       var image2 = new dali.ResourceImage( {url: imageDir + "image-2.jpg"} );
73       material2.addTexture(image2, "sTexture");
74
75       // Create vertex buffer
76       var texturedQuadVertexFormat ={ "aPosition" : dali.PROPERTY_VECTOR2,
77                                         "aTexCoord" : dali.PROPERTY_VECTOR2 };
78
79       var halfQuadSize = 0.5;
80       var texturedQuadVertexData = [ -halfQuadSize, -halfQuadSize, 0.0, 0.0,
81                                       halfQuadSize, -halfQuadSize, 1.0, 0.0,
82                                      -halfQuadSize,  halfQuadSize, 0.0, 1.0,
83                                       halfQuadSize,  halfQuadSize, 1.0, 1.0 ];
84
85       var texturedQuadVertexDataArray = new Float32Array(texturedQuadVertexData.length);
86       texturedQuadVertexDataArray.set(texturedQuadVertexData, 0);
87       var texturedQuadVertices = new dali.PropertyBuffer(texturedQuadVertexFormat, 4);
88       texturedQuadVertices.setData(texturedQuadVertexDataArray);
89
90       var indexFormat ={ "indices" : dali.PROPERTY_INTEGER };
91
92       var indexData = [0, 3, 1, 0, 2, 3];
93
94       var indexDataArray = new Uint32Array(indexData.length);
95       indexDataArray.set(indexData, 0);
96       var indices = new dali.PropertyBuffer(indexFormat, 6);
97       indices.setData(indexDataArray);
98
99       // Create geometry
100       var geometry = new dali.Geometry();
101       geometry.addVertexBuffer( texturedQuadVertices );
102       geometry.setIndexBuffer( indices );
103
104       var renderer = new dali.Renderer(geometry, material);
105       renderer.depthIndex = 0;
106
107       var meshActor = new dali.Actor();
108       meshActor.addRenderer( renderer );
109       meshActor.size = [530, 530, 0];
110       meshActor.parentOrigin = dali.TOP_CENTER;
111       meshActor.anchorPoint = dali.TOP_CENTER;
112       meshActor.registerAnimatableProperty("uFadeColor", [1.0, 0.0, 1.0, 1.0]);
113
114       dali.stage.add( meshActor );
115
116       var renderer2 = new dali.Renderer(geometry, material2);
117       renderer2.depthIndex = 0;
118
119       var meshActor2 = new dali.Actor();
120       meshActor2.addRenderer( renderer2 );
121       meshActor2.size = [530, 530, 0];
122       meshActor2.parentOrigin = dali.BOTTOM_CENTER;
123       meshActor2.anchorPoint = dali.BOTTOM_CENTER;
124       meshActor2.registerAnimatableProperty("uFadeColor", [0.0, 0.0, 1.0, 1.0]);
125
126       dali.stage.add( meshActor2 );
127
128       // Animate the mesh actors
129       var animation = new dali.Animation(5);
130
131       var keyFramesIndex = [{progress:0.0, value: [0.0, 0.0, 0.0, 0.0]}, {progress:1.0, value:[0.0, 1.0, 0.0, 1.0]}];
132       var animOptions = { alpha:"sin", delay:0, duration:5};
133
134       var keyFramesIndex2 = [{progress:0.0, value: [0.0, 0.0, 0.0, 0.0]}, {progress:1.0, value:[1.0, 0.0, 1.0, 1.0]}];
135       var animOptions2 = { alpha:"sin", delay:0, duration:5};
136
137       animation.animateBetween( meshActor, "uFadeColor", keyFramesIndex, animOptions );
138       animation.animateBetween( meshActor2, "uFadeColor", keyFramesIndex2, animOptions2 );
139       animation.setLooping(true);
140       animation.play();
141 }
142
143 function startup()
144 {
145   daliApp.init();
146 }
147
148 daliApp.init = function()
149 {
150   daliApp.createMeshActor();
151 }
152
153
154 startup();
155