node-addon/examples/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 = "./images/";
  21
  22
  23 try {
  24   // target
  25   var dali = require('dali')( options );
  26 }
  27 catch(err) {
  28   // desktop
  29   var dali = require('../build/Release/dali')( options );
  30 }
  31
  32 var daliApp = {};
  33
  34 daliApp.createMeshActor = function() {
  35
  36       // Create shader
  37       var vertShader =
  38                "attribute mediump vec2    aPosition;\
  39                 attribute highp   vec2    aTexCoord;\
  40                 varying   mediump vec2    vTexCoord;\
  41                 uniform   mediump mat4    uMvpMatrix;\
  42                 uniform   mediump vec3    uSize;\
  43                 uniform   lowp    vec4    uFadeColor;\
  44                 void main()\
  45                 {\
  46                   mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);\
  47                   vertexPosition.xyz *= uSize;\
  48                   vertexPosition = uMvpMatrix * vertexPosition;\
  49                   vTexCoord = aTexCoord;\
  50                   gl_Position = vertexPosition;\
  51                 }";
  52
  53       var fragShader =
  54                "varying mediump vec2  vTexCoord;\
  55                 uniform lowp    vec4  uColor;\
  56                 uniform sampler2D     sTexture;\
  57                 uniform lowp    vec4  uFadeColor;\
  58                 void main()\
  59                 {\
  60                   gl_FragColor = texture2D( sTexture, vTexCoord ) * uColor * uFadeColor;\
  61                 }";
  62
  63       var shaderOptions = {
  64               vertexShader : vertShader,
  65               fragmentShader: fragShader
  66           };
  67
  68       var shader = new dali.Shader(shaderOptions);
  69
  70       var textureSet = new dali.TextureSet;
  71       var image = new dali.ResourceImage( {url: imageDir + "image-1.jpg"} );
  72       textureSet.setImage(0, image);
  73
  74       var textureSet2 = new dali.TextureSet;
  75       var image2 = new dali.ResourceImage( {url: imageDir + "image-2.jpg"} );
  76       textureSet2.setImage(0, image2);
  77
  78       // Create vertex buffer
  79       var texturedQuadVertexFormat ={ "aPosition" : dali.PROPERTY_VECTOR2,
  80                                         "aTexCoord" : dali.PROPERTY_VECTOR2 };
  81
  82       var halfQuadSize = 0.5;
  83       var texturedQuadVertexData = [ -halfQuadSize, -halfQuadSize, 0.0, 0.0,
  84                                       halfQuadSize, -halfQuadSize, 1.0, 0.0,
  85                                      -halfQuadSize,  halfQuadSize, 0.0, 1.0,
  86                                       halfQuadSize,  halfQuadSize, 1.0, 1.0 ];
  87
  88       var texturedQuadVertexDataArray = new Float32Array(texturedQuadVertexData.length);
  89       texturedQuadVertexDataArray.set(texturedQuadVertexData, 0);
  90       var texturedQuadVertices = new dali.PropertyBuffer(texturedQuadVertexFormat);
  91       texturedQuadVertices.setData(texturedQuadVertexDataArray, 4);
  92
  93       var indexFormat ={ "indices" : dali.PROPERTY_INTEGER };
  94
  95       var indexData = [0, 3, 1, 0, 2, 3];
  96
  97       var indexDataArray = new Uint32Array(indexData.length);
  98       indexDataArray.set(indexData, 0);
  99
 100       // Create geometry
 101       var geometry = new dali.Geometry();
 102       geometry.addVertexBuffer( texturedQuadVertices );
 103       geometry.setIndexBuffer( indexDataArray, 6 );
 104
 105       var renderer = new dali.Renderer(geometry, shader);
 106       renderer.setTextures(textureSet);
 107       renderer.depthIndex = 0;
 108
 109       var meshActor = new dali.Actor();
 110       meshActor.addRenderer( renderer );
 111       meshActor.size = [530, 530, 0];
 112       meshActor.parentOrigin = dali.TOP_CENTER;
 113       meshActor.anchorPoint = dali.TOP_CENTER;
 114       meshActor.registerAnimatableProperty("uFadeColor", [1.0, 0.0, 1.0, 1.0]);
 115
 116       dali.stage.add( meshActor );
 117
 118       var renderer2 = new dali.Renderer(geometry, shader);
 119       renderer2.setTextures(textureSet2);
 120       renderer2.depthIndex = 0;
 121
 122       var meshActor2 = new dali.Actor();
 123       meshActor2.addRenderer( renderer2 );
 124       meshActor2.size = [530, 530, 0];
 125       meshActor2.parentOrigin = dali.BOTTOM_CENTER;
 126       meshActor2.anchorPoint = dali.BOTTOM_CENTER;
 127       meshActor2.registerAnimatableProperty("uFadeColor", [0.0, 0.0, 1.0, 1.0]);
 128
 129       dali.stage.add( meshActor2 );
 130
 131       // Animate the mesh actors
 132       var animation = new dali.Animation(5);
 133
 134       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]}];
 135       var animOptions = { alpha:dali.ALPHA_FUNCTION_SIN, delay:0, duration:5};
 136
 137       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]}];
 138       var animOptions2 = { alpha:dali.ALPHA_FUNCTION_SIN, delay:0, duration:5};
 139
 140       animation.animateBetween( meshActor, "uFadeColor", keyFramesIndex, animOptions );
 141       animation.animateBetween( meshActor2, "uFadeColor", keyFramesIndex2, animOptions2 );
 142       animation.setLooping(true);
 143       animation.play();
 144 }
 145
 146 function startup()
 147 {
 148   daliApp.init();
 149 }
 150
 151 daliApp.init = function()
 152 {
 153   daliApp.createMeshActor();
 154 }
 155
 156
 157 startup();
 158