X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git;a=blobdiff_plain;f=docs%2Fcontent%2Fprogramming-guide%2Fshader-intro.h;h=54c89098d7ec1e1da7c6e27fcae19772258265e4;hp=a3868c84725504012580d460f2816d2cc437d8f2;hb=26e308db77c286ccd0be0e7627b6cebfa2f9cb67;hpb=01864cd4216d958c5f0e95643dbbeca7c9937716

diff --git a/docs/content/programming-guide/shader-intro.h b/docs/content/programming-guide/shader-intro.h
index a3868c8..54c8909 100644
--- a/docs/content/programming-guide/shader-intro.h
+++ b/docs/content/programming-guide/shader-intro.h
@@ -1,67 +1,86 @@
 /*! \page shader-intro Shader Effects
  *
-
-<h2 class="pg">Introduction</h2>
-
-The shader effects allow the developer to apply visual deformations on the actors.
-They can affect the geometry, the colors and textures of the actor.
-
-There are some built-in shader effects in Dali Toolkit:
-- \ref Dali::Toolkit::BendyEffect "Bendy", bends the geometry around a point, useful to do a page turn effect,
-- \ref Dali::Toolkit::DissolveEffect "Dissolve", does a dissolve effect on the actor texture,
-- \ref Dali::Toolkit::RippleEffect "Ripple", does a concentric wave effect on the actor texture.
-
-@image html shader-effect-ripple.png "Ripple Effect"
-
-<br>
-<br>
-<h2 class="pg">Example and Usage</h2>
-Here is an example on how to use a shader effect, using the RippleEffect.
-
-First create the shader effect.
-@code
-Dali::RippleEffect effect = Dali::RippleEffect::New();
-@endcode
-
-Then set the values of the uniforms.
-@code
-// Set the radius of the bending
-effect.SetAmplitude( 45.0f );
-// Set the point around which the geometry will bend
-effect.SetCenter( Vector2() );
-// Set the direction of the bending
-effect.SetDirection( Vector2( 1.0f, 0.0f ) );
-@endcode
-
-Finally apply the shader effect to an actor:
-@code
-actor.SetShaderEffect( effect );
-@endcode
-
-
-<br>
-<br>
-<h2 class="pg">Custom Shader Effects</h2>
-The \ref Dali::ShaderEffect "ShaderEffect" lets the developers create their own shader effects by specifying the vertex and pixel shaders.
-
-A custom shader effect can be created like this:
-@code
-String myVertexShader; // This variable would contain the code for a vertex shader.
-Dali::ShaderEffect myEffect = Dali::ShaderEffect::New( myVertexShader,
-                                                       "" // use default pixel shader
-                                                     );
-@endcode
-
-The value of a uniform can be set like this:
-@code
-// if the uniform was declared like this in the shader: uniform float myUniform;
-myEffect.SetUniform( "myUniform", 0.5f );
-@endcode
-
-The custom shader effect can be applied to an actor like any other shader:
-@code
-actor.SetShaderEffect( myEffect );
-@endcode
-
+ *
+ * <h2 class="pg">Introduction</h2>
+ *
+ * The shader effects allow the developer to apply visual deformations on Image Views.
+ * They can affect the geometry, the colors and textures of the Image View.
+ *
+ * <br>
+ * <br>
+ * <h2 class="pg">Custom Shader Effects</h2>
+ * The custom shader lets the developers create their own shader effects by specifying the vertex and pixel shaders.
+ *
+ * To set a custom shader to ImageRenderer you have to pass it through as a Property::Map
+ * @code
+ * //an example vertex shader
+ * const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
+ *   attribute mediump vec2 aPosition;\n
+ *   varying mediump vec2 vTexCoord;\n
+ *   uniform mediump mat4 uMvpMatrix;\n
+ *   uniform mediump vec3 uSize;\n
+ *   \n
+ *   void main()\n
+ *   {\n
+ *     mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);\n
+ *     vertexPosition.xyz *= uSize;\n
+ *     vertexPosition = uMvpMatrix * vertexPosition;\n
+ *     \n
+ *     vTexCoord = aPosition + vec2(0.5);\n
+ *     gl_Position = vertexPosition;\n
+ *   }\n
+ * );
+ *
+ * //an example fragment shader
+ * const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
+ *   varying mediump vec2 vTexCoord;\n
+ *   uniform sampler2D sTexture;\n
+ *   uniform lowp vec4 uColor;\n
+ *   \n
+ *   void main()\n
+ *   {\n
+ *     gl_FragColor = texture2D( sTexture, vTexCoord ) * uColor;\n
+ *   }\n
+ * );
+ *
+ * Property::Map customShader;
+ *
+ * customShader.Insert(“vertex-shader”, VERTEX_SHADER); //if this is not set then the default ImageView vertex shader will be used
+ * customShader.Insert(“fragment-shader”, FRAGMENT_SHADER); //if this is not set then the default ImageView fragment shader will be used
+ *
+ * Property::Map map;
+ * map.Insert(“shader”, customShader);
+ *
+ * ImageView imageView = ImageView::New("image-url.png")
+ * imageView.SetProperty(ImageView::Property::IMAGE, map);
+ * @endcode
+ *
+ * Optionally, you can subdivide the grid horizontally or vertically before you add it to the map but you should not do this if a quad is used.
+ * @code
+ * int X_SUB_DIVISIONS = 20;
+ * int Y_SUB_DIVISIONS = 20;
+ * customShader.Insert(“subdivide-grid-x”, X_SUB_DIVISIONS); //optional number of times to subdivide the grid horizontally, don’t add if you just want to use a quad
+ * customShader.Insert(“subdivide-grid-y”, Y_SUB_DIVISIONS); //optional number of times to subdivide the grid vertically, don’t add if you just want to use a quad
+ *
+ * //shader hints can be an array or a string
+ * optional array of shader hints
+ *
+ * Property::Array shaderHints;
+ * shaderHints.PushBack(“requires-self-depth-test”);
+ * shaderHints.PushBack(“output-is-transparent”);
+ * shaderHints.PushBack(“output-is-opaque”);
+ * shaderHints.PushBack(“modifies-geometry”);
+ * customShader.Insert(“hints”, shaderHints);
+ *
+ * //or optional single shader hint as a string
+ * //customShader.Insert(“hints”, “output-is-transparent”);
+ * @endcode
+ *
+ * The value of a uniform can be set on the imageView
+ * @code
+ * // if the uniform was declared like this in the shader: uniform float myUniform;
+ * imageView.RegisterProperty( "myUniform", 0.5f );
+ * @endcode
+ *
  *
  */