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