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