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:dali.ALPHA_FUNCTION_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