JavaScript binding for ScrollView
[platform/core/uifw/dali-toolkit.git] / node-addon / examples / point-mesh.js
1  var window= {
2            x:0,
3            y:0,
4            width:1920,
5            height: 1080,
6            transparent: false,
7            name:'line-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 // desktop
24 //var dali = require('../build/Release/dali')( options );
25
26 // target
27 var dali = require('dali')( options );
28
29 var daliApp = {};
30
31 daliApp.createMeshActor = function() {
32
33       // Create shader
34       var vertShader =
35                "attribute mediump vec2    aPosition;\
36                 attribute highp   float   aHue;\
37                 varying   mediump vec2    vTexCoord;\
38                 uniform   mediump mat4    uMvpMatrix;\
39                 uniform   mediump vec3    uSize;\
40                 uniform   mediump float   uPointSize;\
41                 uniform   lowp    vec4    uFadeColor;\
42                 varying   mediump vec3    vVertexColor;\
43                 varying   mediump float   vHue;\
44                 vec3 hsv2rgb(vec3 c)\
45                 {\
46                   vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\
47                   vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\
48                   return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\
49                 }\
50                 void main()\
51                 {\
52                   mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);\
53                   vertexPosition.xyz *= (uSize-uPointSize);\
54                   vertexPosition = uMvpMatrix * vertexPosition;\
55                   vVertexColor = hsv2rgb( vec3( aHue, 0.7, 1.0 ) );\
56                   vHue = aHue;\
57                   gl_PointSize = uPointSize;\
58                   gl_Position = vertexPosition;\
59                 }";
60
61       var fragShader =
62                "varying mediump vec3  vVertexColor;\
63                 varying mediump float vHue;\
64                 uniform lowp  vec4    uColor;\
65                 uniform sampler2D     sTexture1;\
66                 uniform sampler2D     sTexture2;\
67                 uniform lowp vec4     uFadeColor;\
68                 void main()\
69                 {\
70                   mediump vec4 texCol1 = texture2D(sTexture1, gl_PointCoord);\
71                   mediump vec4 texCol2 = texture2D(sTexture2, gl_PointCoord);\
72                   gl_FragColor = vec4(vVertexColor, 1.0) * ((texCol1*vHue) + (texCol2*(1.0-vHue)));\
73                 }";
74
75       var shaderOptions = {
76               vertexShader : vertShader,
77               fragmentShader: fragShader
78           };
79
80       var shader = new dali.Shader(shaderOptions);
81
82       var material = new dali.Material( shader );
83       var image = new dali.ResourceImage( {url: imageDir + "image-1.jpg"} );
84       material.addTexture(image, "sTexture");
85
86       // Create vertex buffer
87       var polyhedraVertexFormat ={ "aPosition" : dali.PROPERTY_VECTOR2,
88                                      "aHue"      : dali.PROPERTY_FLOAT    };
89
90       var numSides = 20;
91       var angle = 0;
92       var sectorAngle = 2.0 * Math.PI / numSides;
93
94       var polyhedraVertexData = [];
95       for(i=0; i<numSides; ++i)
96       {
97         var positionX = Math.sin(angle) * 0.5;
98         var positionY = Math.cos(angle) * 0.5;
99         var hue = angle / ( 2.0 * Math.PI);
100
101         polyhedraVertexData[i*3+0] = positionX;
102         polyhedraVertexData[i*3+1] = positionY;
103         polyhedraVertexData[i*3+2] = hue;
104
105         angle += sectorAngle;
106       }
107
108       var polyhedraVertexDataArray = new Float32Array(polyhedraVertexData.length);
109       polyhedraVertexDataArray.set(polyhedraVertexData, 0);
110       var polyhedraVertices = new dali.PropertyBuffer(polyhedraVertexFormat, numSides);
111       polyhedraVertices.setData(polyhedraVertexDataArray);
112
113       // Create geometry
114       var geometry = new dali.Geometry();
115       geometry.addVertexBuffer( polyhedraVertices );
116       geometry.setGeometryType( dali.GEOMETRY_POINTS );
117
118       var renderer = new dali.Renderer(geometry, material);
119       renderer.registerAnimatableProperty("uFadeColor", [1.0, 0.0, 1.0, 1.0]); // Green
120       renderer.registerAnimatableProperty("uPointSize", 80.0);
121       renderer.depthIndex = 0;
122
123       // Create mesh actor
124       var meshActor = new dali.Actor();
125       meshActor.addRenderer( renderer );
126       meshActor.size = [400, 400, 0];
127       meshActor.parentOrigin = dali.CENTER;
128       meshActor.anchorPoint = dali.CENTER;
129       meshActor.registerAnimatableProperty("uFadeColor", [0.0, 1.0, 0.0, 1.0]); // Magenta
130
131       dali.stage.add( meshActor );
132
133       // Animate the mesh actor
134       var animation = new dali.Animation(5);
135       var animOptions = { alpha:"linear", delay:0, duration:5};
136       var rotation = new dali.Rotation(360,0,0,1);
137       animation.animateBy( meshActor, "orientation", rotation, animOptions );
138       animation.setLooping(true);
139       animation.play();
140 }
141
142 function startup()
143 {
144   daliApp.init();
145 }
146
147 daliApp.init = function()
148 {
149   daliApp.createMeshActor();
150 }
151
152
153 startup();
154