Merge "Programming guide of DebugRenderer" into devel/master
[platform/core/uifw/dali-toolkit.git] / node-addon / mesh-morph.js
1  var window= {
2            x:0,
3            y:0,
4            width:1920,
5            height: 1080,
6            transparent: false,
7            name:'mesh-morph-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 dali = require('./build/Release/dali')( options );
21
22 var daliApp = {};
23
24 daliApp.createMeshActor = function() {
25
26       // Create shader
27       var vertShader =
28                   "attribute mediump vec2    aInitPos;\
29                 attribute mediump vec2    aFinalPos;\
30                 attribute mediump vec3    aColor;\
31                 uniform   mediump mat4    uMvpMatrix;\
32                 uniform   mediump vec3    uSize;\
33                 uniform   mediump float   uDelta;\
34                 uniform   lowp    vec4    uColor;\
35                 varying   lowp    vec4    vColor;\
36                 void main()\
37                 {\
38                   mediump vec4 vertexPosition = vec4(mix(aInitPos, aFinalPos, uDelta), 0.0, 1.0);\
39                   vertexPosition.xyz *= uSize;\
40                   vertexPosition = uMvpMatrix * vertexPosition;\
41                   gl_Position = vertexPosition;\
42                   vColor = vec4(aColor, 0.) * uColor;\
43                 }";
44
45       var fragShader =
46                "varying lowp vec4 vColor;\
47                 void main()\
48                 {\
49                   gl_FragColor = vColor;\
50                 }";
51
52       var shaderOptions = {
53               vertexShader : vertShader,
54               fragmentShader : fragShader
55           };
56
57       var shader = new dali.Shader(shaderOptions);
58
59       var material = new dali.Material( shader );
60
61       // Create vertex buffer for initial positions
62       var initialPositionVertexFormat = { "aInitPos" : dali.PROPERTY_VECTOR2 };
63
64       var initialPositionVertexData = [
65                                        // yellow
66                                        -0.50, -0.50,
67                                          0.0,   0.0,
68                                        -0.50,  0.50,
69
70                                        // green
71                                        -0.50, -0.50,
72                                         0.50, -0.50,
73                                          0.0,   0.0,
74
75                                        // blue
76                                         0.50, -0.50,
77                                         0.50,   0.0,
78                                         0.25, -0.25,
79
80                                        // red
81                                         0.25, -0.25,
82                                         0.50,   0.0,
83                                         0.25,  0.25,
84                                         0.25,  0.25,
85                                          0.0,   0.0,
86                                         0.25, -0.25,
87
88                                        // cyan
89                                          0.0,   0.0,
90                                         0.25,  0.25,
91                                        -0.25,  0.25,
92
93                                        // magenta
94                                        -0.25,  0.25,
95                                         0.25,  0.25,
96                                          0.0,  0.50,
97                                          0.0,  0.50,
98                                        -0.50,  0.50,
99                                        -0.25,  0.25,
100
101                                         // orange
102                                         0.50,   0.0,
103                                         0.50,  0.50,
104                                          0.0,  0.50
105                                       ];
106
107       var initialPositionVertexDataArray = new Float32Array(initialPositionVertexData.length);
108       initialPositionVertexDataArray.set(initialPositionVertexData, 0);
109       var initialPositionVertices = new dali.PropertyBuffer(initialPositionVertexFormat, 27);
110       initialPositionVertices.setData(initialPositionVertexDataArray);
111
112       // Create vertex buffer for final positions
113       var finalPositionVertexFormat = { "aFinalPos" : dali.PROPERTY_VECTOR2 };
114
115       var bigSide = 0.707106781;
116       var side = bigSide * 0.5;
117
118       var finalPositionVertexData = [
119                                      // yellow
120                                                side,                        0.25, // pA
121                                                side,              0.25 + bigSide, // pB
122                                      side - bigSide,              0.25 + bigSide, // pC
123
124                                      // green
125                                         side - 0.50,                       -0.25, // pD
126                                                side,                        0.25, // pA
127                                         side - 0.50,                        0.75, // pE
128
129                                      // blue
130                                         side - 0.50,                       -0.75, // pJ
131                                         side - 0.50,                       -0.25, // pD
132                                         side - 0.75,                       -0.50, // pI
133
134                                      // red
135                                         side - 0.75,                       -0.50, // pI
136                                         side - 0.50,                       -0.25, // pD
137                                         side - 0.75,                         0.0, // pG
138                                         side - 0.75,                         0.0, // pG
139                                          side - 1.0,                       -0.25, // pH
140                                         side - 0.75,                       -0.50, // pI
141
142                                      // cyan
143                                         side - 0.75,                       -0.50, // pI
144                                          side - 1.0,                       -0.25, // pH
145                                          side - 1.0,                       -0.75, // pK
146
147                                      // magenta
148                                                side,       0.25 + bigSide - side, // pL
149                                          side * 2.0, 0.25 + bigSide - side * 2.0, // pM
150                                          side * 2.0,       0.25 + bigSide - side, // pN
151                                          side * 2.0,       0.25 + bigSide - side, // pN
152                                                side,              0.25 + bigSide, // pB
153                                                side,       0.25 + bigSide - side, // pL
154
155                                      // orange
156                                         side - 0.50,                       -0.25, // pD
157                                         side - 0.50,             -0.25 + bigSide, // pF2
158                                              - 0.50,                -0.25 + side  // pF
159                                     ];
160
161       var finalPositionVertexDataArray = new Float32Array(finalPositionVertexData.length);
162       finalPositionVertexDataArray.set(finalPositionVertexData, 0);
163       var finalPositionVertices = new dali.PropertyBuffer(finalPositionVertexFormat, 27);
164       finalPositionVertices.setData(finalPositionVertexDataArray);
165
166       // Create vertex buffer for color
167       var colorVertexFormat = { "aColor" : dali.PROPERTY_VECTOR3 };
168
169       var colorVertexData = [
170                              // yellow
171                              1.0, 1.0, 0.0,
172                              1.0, 1.0, 0.0,
173                              1.0, 1.0, 0.0,
174
175                              // green
176                              0.0, 1.0, 0.0,
177                              0.0, 1.0, 0.0,
178                              0.0, 1.0, 0.0,
179
180                              // blue
181                              0.0, 0.0, 1.0,
182                              0.0, 0.0, 1.0,
183                              0.0, 0.0, 1.0,
184
185                              // red
186                              1.0, 0.0, 0.0,
187                              1.0, 0.0, 0.0,
188                              1.0, 0.0, 0.0,
189                              1.0, 0.0, 0.0,
190                              1.0, 0.0, 0.0,
191                              1.0, 0.0, 0.0,
192
193                              // cyan
194                              0.0, 1.0, 1.0,
195                              0.0, 1.0, 1.0,
196                              0.0, 1.0, 1.0,
197
198                              // magenta
199                              1.0, 0.0, 1.0,
200                              1.0, 0.0, 1.0,
201                              1.0, 0.0, 1.0,
202                              1.0, 0.0, 1.0,
203                              1.0, 0.0, 1.0,
204                              1.0, 0.0, 1.0,
205
206                              // orange
207                              1.0, 0.5, 0.0,
208                              1.0, 0.5, 0.0,
209                              1.0, 0.5, 0.0
210                             ];
211
212       var colorVertexDataArray = new Float32Array(colorVertexData.length);
213       colorVertexDataArray.set(colorVertexData, 0);
214       var colorVertices = new dali.PropertyBuffer(colorVertexFormat, 27);
215       colorVertices.setData(colorVertexDataArray);
216
217       // Create geometry
218       var geometry = new dali.Geometry();
219       geometry.addVertexBuffer( initialPositionVertices );
220       geometry.addVertexBuffer( finalPositionVertices );
221       geometry.addVertexBuffer( colorVertices );
222
223       var renderer = new dali.Renderer(geometry, material);
224       renderer.depthIndex = 0;
225
226       // Create mesh actor
227       var meshActor = new dali.Actor();
228       meshActor.addRenderer( renderer );
229       meshActor.size = [400, 400, 0];
230       meshActor.parentOrigin = dali.CENTER;
231       meshActor.anchorPoint = dali.CENTER;
232       meshActor.registerAnimatableProperty("uDelta", 0.0);
233
234       dali.stage.add( meshActor );
235
236       // Animate the mesh actor
237       var animation = new dali.Animation(5);
238
239       var animOptions = { alpha:"sin", delay:0, duration:5};
240
241       animation.animateTo( meshActor, "uDelta", 1.0, animOptions );
242       animation.setLooping(true);
243       animation.play();
244 }
245
246 function startup()
247 {
248   daliApp.init();
249 }
250
251 daliApp.init = function()
252 {
253   daliApp.createMeshActor();
254 }
255
256
257 startup();
258