Change filter mode in TextLabel to improve quality while scaling
[platform/core/uifw/dali-toolkit.git] / dali-toolkit / internal / visuals / text / text-visual.cpp
index b67617a..46cb2a1 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
 // CLASS HEADER
 #include <dali-toolkit/internal/visuals/text/text-visual.h>
 
+// EXTERNAL INCLUDES
+#include <dali/public-api/animation/constraints.h>
+
 // INTERNAL HEADER
-#include <dali-toolkit/devel-api/visual-factory/devel-visual-properties.h>
 #include <dali-toolkit/devel-api/visuals/text-visual-properties.h>
 #include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
 #include <dali-toolkit/devel-api/controls/control-depth-index-ranges.h>
@@ -28,6 +30,7 @@
 #include <dali-toolkit/internal/visuals/visual-base-data-impl.h>
 #include <dali-toolkit/internal/visuals/visual-string-constants.h>
 #include <dali-toolkit/internal/text/text-font-style.h>
+#include <dali-toolkit/internal/text/text-effects-style.h>
 
 namespace Dali
 {
@@ -41,8 +44,7 @@ namespace Internal
 namespace
 {
 
-// Property names.
-const char * const TEXT_PROPERTY( "text" );
+// Property names - common properties defined in visual-string-constants.h/cpp
 const char * const FONT_FAMILY_PROPERTY( "fontFamily" );
 const char * const FONT_STYLE_PROPERTY( "fontStyle" );
 const char * const POINT_SIZE_PROPERTY( "pointSize" );
@@ -51,8 +53,8 @@ const char * const HORIZONTAL_ALIGNMENT_PROPERTY( "horizontalAlignment" );
 const char * const VERTICAL_ALIGNMENT_PROPERTY( "verticalAlignment" );
 const char * const TEXT_COLOR_PROPERTY( "textColor" );
 const char * const ENABLE_MARKUP_PROPERTY( "enableMarkup" );
-
-const std::string PIXEL_AREA_UNIFORM_NAME = "pixelArea";
+const char * const SHADOW_PROPERTY( "shadow" );
+const char * const UNDERLINE_PROPERTY( "underline" );
 
 const Scripting::StringEnum HORIZONTAL_ALIGNMENT_STRING_TABLE[] =
 {
@@ -94,9 +96,13 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
   attribute mediump vec2 aPosition;\n
   uniform mediump mat4 uMvpMatrix;\n
   uniform mediump vec3 uSize;\n
-  uniform mediump vec4 pixelArea;
+  uniform mediump vec4 pixelArea;\n
+
+  uniform mediump mat4 uModelMatrix;\n
+  uniform mediump mat4 uViewMatrix;\n
+  uniform mediump mat4 uProjection;\n
+
   varying mediump vec2 vTexCoord;\n
-  \n
 
   //Visual size and offset
   uniform mediump vec2 offset;\n
@@ -114,33 +120,139 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
 
   void main()\n
   {\n
-    mediump vec4 vertexPosition = uMvpMatrix *ComputeVertexPosition();\n
+    mediump vec4 nonAlignedVertex = uViewMatrix*uModelMatrix*ComputeVertexPosition();\n
+    mediump vec4 pixelAlignedVertex = vec4 ( floor(nonAlignedVertex.xyz), 1.0 );\n
+    mediump vec4 vertexPosition = uProjection*pixelAlignedVertex;\n
+
     vTexCoord = pixelArea.xy+pixelArea.zw*(aPosition + vec2(0.5) );\n
     gl_Position = vertexPosition;\n
   }\n
 );
 
 const char* FRAGMENT_SHADER_ATLAS_CLAMP = DALI_COMPOSE_SHADER(
-    varying mediump vec2 vTexCoord;\n
-    uniform sampler2D sTexture;\n
-    uniform mediump vec4 uAtlasRect;\n
-    uniform lowp vec4 uColor;\n
-    \n
-    void main()\n
-    {\n
-      mediump vec2 texCoord = clamp( mix( uAtlasRect.xy, uAtlasRect.zw, vTexCoord ), uAtlasRect.xy, uAtlasRect.zw );\n
-      gl_FragColor = texture2D( sTexture, texCoord ) * uColor;\n
-    }\n
+  varying mediump vec2 vTexCoord;\n
+  uniform sampler2D sTexture;\n
+  uniform sampler2D sStyle;\n
+  uniform sampler2D sMask;\n
+  uniform lowp float uHasMultipleTextColors;\n
+  uniform lowp vec4 uTextColorAnimatable;\n
+  uniform mediump vec4 uAtlasRect;\n
+  uniform lowp vec4 uColor;\n
+  uniform lowp vec3 mixColor;\n
+  uniform lowp float opacity;\n
+  \n
+  void main()\n
+  {\n
+    mediump vec2 texCoord = clamp( mix( uAtlasRect.xy, uAtlasRect.zw, vTexCoord ), uAtlasRect.xy, uAtlasRect.zw );\n
+    mediump vec4 textTexture = texture2D( sTexture, texCoord );\n
+    mediump vec4 styleTexture = texture2D( sStyle, texCoord );\n
+    mediump vec4 maskTexture = texture2D( sMask, texCoord );\n
+
+    // Set the color of non-transparent pixel in text to what it is animated to.
+    // Markup text with multiple text colors are not animated (but can be supported later on if required).
+    // Emoji color are not animated.
+    mediump vec4 textColor = textTexture * textTexture.a;\n
+    mediump float vstep = step( 0.0001, textColor.a );\n
+    textColor.rgb = mix( textColor.rgb, uTextColorAnimatable.rgb, vstep * maskTexture.a * ( 1.0 - uHasMultipleTextColors ) );\n
+
+    // Draw the text as overlay above the style
+    gl_FragColor = ( textColor + styleTexture * ( 1.0 - textTexture.a ) ) * uColor * vec4( mixColor, opacity );\n
+  }\n
 );
 
+/**
+ * Return Property index for the given string key
+ * param[in] stringKey the string index key
+ * return the key as an index
+ */
+
+Dali::Property::Index StringKeyToIndexKey( const std::string& stringKey )
+{
+  Dali::Property::Index result = Property::INVALID_KEY;
+
+  if( stringKey == VISUAL_TYPE )
+  {
+    result = Toolkit::Visual::Property::TYPE;
+  }
+  else if( stringKey == TEXT_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::TEXT;
+  }
+  else if( stringKey == FONT_FAMILY_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::FONT_FAMILY;
+  }
+  else if( stringKey == FONT_STYLE_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::FONT_STYLE;
+  }
+  else if( stringKey == POINT_SIZE_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::POINT_SIZE;
+  }
+  else if( stringKey == MULTI_LINE_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::MULTI_LINE;
+  }
+  else if( stringKey == HORIZONTAL_ALIGNMENT_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::HORIZONTAL_ALIGNMENT;
+  }
+  else if( stringKey == VERTICAL_ALIGNMENT_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::VERTICAL_ALIGNMENT;
+  }
+  else if( stringKey == TEXT_COLOR_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::TEXT_COLOR;
+  }
+  else if( stringKey == ENABLE_MARKUP_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::ENABLE_MARKUP;
+  }
+  else if( stringKey == SHADOW_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::SHADOW;
+  }
+  else if( stringKey == UNDERLINE_PROPERTY )
+  {
+    result = Toolkit::TextVisual::Property::UNDERLINE;
+  }
+
+  return result;
+}
+
 } // unnamed namespace
 
-TextVisualPtr TextVisual::New( VisualFactoryCache& factoryCache )
+TextVisualPtr TextVisual::New( VisualFactoryCache& factoryCache, const Property::Map& properties )
 {
-  return new TextVisual( factoryCache );
+  TextVisualPtr TextVisualPtr( new TextVisual( factoryCache ) );
+  TextVisualPtr->SetProperties( properties );
+  return TextVisualPtr;
+}
+
+void TextVisual::ConvertStringKeysToIndexKeys( Property::Map& propertyMap )
+{
+  Property::Map outMap;
+
+  for( Property::Map::SizeType index = 0u, count = propertyMap.Count(); index < count; ++index )
+  {
+    const KeyValuePair& keyValue = propertyMap.GetKeyValue( index );
+
+    Property::Index indexKey = keyValue.first.indexKey;
+
+    if ( keyValue.first.type == Property::Key::STRING )
+    {
+      indexKey = StringKeyToIndexKey( keyValue.first.stringKey );
+    }
+
+    outMap.Insert( indexKey, keyValue.second );
+  }
+
+  propertyMap = outMap;
 }
 
-float TextVisual::GetHeightForWidth( float width ) const
+float TextVisual::GetHeightForWidth( float width )
 {
   return mController->GetHeightForWidth( width );
 }
@@ -155,7 +267,7 @@ void TextVisual::DoCreatePropertyMap( Property::Map& map ) const
   Property::Value value;
 
   map.Clear();
-  map.Insert( Toolkit::VisualProperty::TYPE, Toolkit::DevelVisual::TEXT );
+  map.Insert( Toolkit::DevelVisual::Property::TYPE, Toolkit::DevelVisual::TEXT );
 
   std::string text;
   mController->GetText( text );
@@ -166,7 +278,7 @@ void TextVisual::DoCreatePropertyMap( Property::Map& map ) const
   GetFontStyleProperty( mController, value, Text::FontStyle::DEFAULT );
   map.Insert( Toolkit::TextVisual::Property::FONT_STYLE, value );
 
-  map.Insert( Toolkit::TextVisual::Property::POINT_SIZE, mController->GetDefaultPointSize() );
+  map.Insert( Toolkit::TextVisual::Property::POINT_SIZE, mController->GetDefaultFontSize( Text::Controller::POINT_SIZE ) );
 
   map.Insert( Toolkit::TextVisual::Property::MULTI_LINE, mController->IsMultiLineEnabled() );
 
@@ -177,12 +289,30 @@ void TextVisual::DoCreatePropertyMap( Property::Map& map ) const
   map.Insert( Toolkit::TextVisual::Property::TEXT_COLOR, mController->GetDefaultColor() );
 
   map.Insert( Toolkit::TextVisual::Property::ENABLE_MARKUP, mController->IsMarkupProcessorEnabled() );
+
+  GetShadowProperties( mController, value, Text::EffectStyle::DEFAULT );
+  map.Insert( Toolkit::TextVisual::Property::SHADOW, value );
+
+  GetUnderlineProperties( mController, value, Text::EffectStyle::DEFAULT );
+  map.Insert( Toolkit::TextVisual::Property::UNDERLINE, value );
 }
 
+void TextVisual::DoCreateInstancePropertyMap( Property::Map& map ) const
+{
+  map.Clear();
+  map.Insert( Toolkit::DevelVisual::Property::TYPE, Toolkit::DevelVisual::TEXT );
+  std::string text;
+  mController->GetText( text );
+  map.Insert( Toolkit::TextVisual::Property::TEXT, text );
+}
+
+
 TextVisual::TextVisual( VisualFactoryCache& factoryCache )
 : Visual::Base( factoryCache ),
   mController( Text::Controller::New() ),
-  mTypesetter( Text::Typesetter::New( mController->GetTextModel() ) )
+  mTypesetter( Text::Typesetter::New( mController->GetTextModel() ) ),
+  mAnimatableTextColorPropertyIndex( Property::INVALID_INDEX ),
+  mRendererUpdateNeeded( false )
 {
 }
 
@@ -196,57 +326,14 @@ void TextVisual::DoSetProperties( const Property::Map& propertyMap )
   {
     const KeyValuePair& keyValue = propertyMap.GetKeyValue( index );
 
-    switch( keyValue.first.type )
+    Property::Index indexKey = keyValue.first.indexKey;
+
+    if( keyValue.first.type == Property::Key::STRING )
     {
-      case Property::Key::INDEX:
-      {
-        if( Toolkit::VisualProperty::TYPE != keyValue.first.indexKey ) // Toolkit::VisualProperty::TYPE is not a TextVisual's property.
-        {
-          DoSetProperty( keyValue.first.indexKey, keyValue.second );
-        }
-        break;
-      }
-      case Property::Key::STRING:
-      {
-        if( keyValue.first.stringKey == TEXT_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::TEXT, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == FONT_FAMILY_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::FONT_FAMILY, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == FONT_STYLE_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::FONT_STYLE, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == POINT_SIZE_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::POINT_SIZE, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == MULTI_LINE_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::MULTI_LINE, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == HORIZONTAL_ALIGNMENT_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::HORIZONTAL_ALIGNMENT, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == VERTICAL_ALIGNMENT_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::VERTICAL_ALIGNMENT, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == TEXT_COLOR_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::TEXT_COLOR, keyValue.second );
-        }
-        else if( keyValue.first.stringKey == ENABLE_MARKUP_PROPERTY )
-        {
-          DoSetProperty( Toolkit::TextVisual::Property::ENABLE_MARKUP, keyValue.second );
-        }
-        break;
-      }
+      indexKey = StringKeyToIndexKey( keyValue.first.stringKey );
     }
+
+    DoSetProperty( indexKey, keyValue.second );
   }
 
   // Elide the text if it exceeds the boundaries.
@@ -263,7 +350,38 @@ void TextVisual::DoSetOnStage( Actor& actor )
 {
   mControl = actor;
 
-  CreateRenderer();
+  Geometry geometry = mFactoryCache.GetGeometry( VisualFactoryCache::QUAD_GEOMETRY );
+
+  Shader shader = mFactoryCache.GetShader( VisualFactoryCache::TEXT_SHADER );
+  if( ! shader )
+  {
+    shader = Shader::New( VERTEX_SHADER, FRAGMENT_SHADER_ATLAS_CLAMP );
+    shader.RegisterProperty( PIXEL_AREA_UNIFORM_NAME, FULL_TEXTURE_RECT );
+
+    mFactoryCache.SaveShader( VisualFactoryCache::TEXT_SHADER, shader );
+  }
+
+  mImpl->mRenderer = Renderer::New( geometry, shader );
+  mImpl->mRenderer.SetProperty( Dali::Renderer::Property::DEPTH_INDEX, Toolkit::DepthIndex::CONTENT );
+
+  const Vector4& defaultColor = mController->GetTextModel()->GetDefaultColor();
+  Dali::Property::Index shaderTextColorIndex = mImpl->mRenderer.RegisterProperty( "uTextColorAnimatable", defaultColor );
+
+  if ( mAnimatableTextColorPropertyIndex != Property::INVALID_INDEX )
+  {
+    // Create constraint for the animatable text's color Property with uTextColorAnimatable in the renderer.
+    if( shaderTextColorIndex != Property::INVALID_INDEX )
+    {
+      Constraint constraint = Constraint::New<Vector4>( mImpl->mRenderer, shaderTextColorIndex, EqualToConstraint() );
+      constraint.AddSource( Source( actor, mAnimatableTextColorPropertyIndex ) );
+      constraint.Apply();
+    }
+  }
+
+  // Renderer needs textures and to be added to control
+  mRendererUpdateNeeded = true;
+
+  UpdateRenderer();
 }
 
 void TextVisual::DoSetOffStage( Actor& actor )
@@ -273,17 +391,31 @@ void TextVisual::DoSetOffStage( Actor& actor )
     // Removes the renderer from the actor.
     actor.RemoveRenderer( mImpl->mRenderer );
 
-    DestroyRenderer();
+    RemoveTextureSet();
+
+    // Resets the renderer.
+    mImpl->mRenderer.Reset();
   }
 
   // Resets the control handle.
   mControl.Reset();
 }
 
+void TextVisual::OnSetTransform()
+{
+  UpdateRenderer();
+}
+
 void TextVisual::DoSetProperty( Dali::Property::Index index, const Dali::Property::Value& propertyValue )
 {
   switch( index )
   {
+    case Toolkit::TextVisual::Property::ENABLE_MARKUP:
+    {
+      const bool enableMarkup = propertyValue.Get<bool>();
+      mController->SetMarkupProcessorEnabled( enableMarkup );
+      break;
+    }
     case Toolkit::TextVisual::Property::TEXT:
     {
       mController->SetText( propertyValue.Get<std::string>() );
@@ -302,10 +434,9 @@ void TextVisual::DoSetProperty( Dali::Property::Index index, const Dali::Propert
     case Toolkit::TextVisual::Property::POINT_SIZE:
     {
       const float pointSize = propertyValue.Get<float>();
-
-      if( !Equals( mController->GetDefaultPointSize(), pointSize ) )
+      if( !Equals( mController->GetDefaultFontSize( Text::Controller::POINT_SIZE ), pointSize ) )
       {
-        mController->SetDefaultPointSize( pointSize );
+        mController->SetDefaultFontSize( pointSize, Text::Controller::POINT_SIZE );
       }
       break;
     }
@@ -347,101 +478,20 @@ void TextVisual::DoSetProperty( Dali::Property::Index index, const Dali::Propert
       }
       break;
     }
-    case Toolkit::TextVisual::Property::ENABLE_MARKUP:
-    {
-      const bool enableMarkup = propertyValue.Get<bool>();
-      mController->SetMarkupProcessorEnabled( enableMarkup );
-      break;
-    }
-    default:
-    {
-      // Should not arrive here.
-      DALI_ASSERT_DEBUG( false );
-    }
-  }
-}
-
-Dali::Property::Value TextVisual::DoGetProperty( Dali::Property::Index index )
-{
-  Dali::Property::Value value;
-
-  switch( index )
-  {
-    case Toolkit::TextVisual::Property::TEXT:
-    {
-      std::string text;
-      mController->GetText( text );
-      value = text;
-      break;
-    }
-    case Toolkit::TextVisual::Property::FONT_FAMILY:
-    {
-      value = mController->GetDefaultFontFamily();
-      break;
-    }
-    case Toolkit::TextVisual::Property::FONT_STYLE:
-    {
-      GetFontStyleProperty( mController, value, Text::FontStyle::DEFAULT );
-      break;
-    }
-    case Toolkit::TextVisual::Property::POINT_SIZE:
+    case Toolkit::TextVisual::Property::SHADOW:
     {
-      value = mController->GetDefaultPointSize();
+      SetShadowProperties( mController, propertyValue, Text::EffectStyle::DEFAULT );
       break;
     }
-    case Toolkit::TextVisual::Property::MULTI_LINE:
+    case Toolkit::TextVisual::Property::UNDERLINE:
     {
-      value = mController->IsMultiLineEnabled();
-      break;
-    }
-    case Toolkit::TextVisual::Property::HORIZONTAL_ALIGNMENT:
-    {
-      const char* name = Scripting::GetEnumerationName< Toolkit::Text::Layout::HorizontalAlignment >( mController->GetHorizontalAlignment(),
-                                                                                                      HORIZONTAL_ALIGNMENT_STRING_TABLE,
-                                                                                                      HORIZONTAL_ALIGNMENT_STRING_TABLE_COUNT );
-      if( name )
-      {
-        value = std::string( name );
-      }
-      break;
-    }
-    case Toolkit::TextVisual::Property::VERTICAL_ALIGNMENT:
-    {
-      const char* name = Scripting::GetEnumerationName< Toolkit::Text::Layout::VerticalAlignment >( mController->GetVerticalAlignment(),
-                                                                                                    VERTICAL_ALIGNMENT_STRING_TABLE,
-                                                                                                    VERTICAL_ALIGNMENT_STRING_TABLE_COUNT );
-      if( name )
-      {
-        value = std::string( name );
-      }
+      SetUnderlineProperties( mController, propertyValue, Text::EffectStyle::DEFAULT );
       break;
     }
-    case Toolkit::TextVisual::Property::TEXT_COLOR:
-    {
-      value = mController->GetDefaultColor();
-      break;
-    }
-    case Toolkit::TextVisual::Property::ENABLE_MARKUP:
-    {
-      value = mController->IsMarkupProcessorEnabled();
-      break;
-    }
-    default:
-    {
-      // Should not arrive here.
-      DALI_ASSERT_DEBUG( false );
-    }
   }
-
-  return value;
 }
 
-void TextVisual::OnSetTransform()
-{
-  CreateRenderer();
-}
-
-void TextVisual::CreateRenderer()
+void TextVisual::UpdateRenderer()
 {
   Actor control = mControl.GetHandle();
   if( !control )
@@ -462,97 +512,127 @@ void TextVisual::CreateRenderer()
 
   if( ( fabsf( relayoutSize.width ) < Math::MACHINE_EPSILON_1000 ) || ( fabsf( relayoutSize.height ) < Math::MACHINE_EPSILON_1000 ) )
   {
+    // Removes the texture set.
+    RemoveTextureSet();
+
     // Remove any renderer previously set.
     if( mImpl->mRenderer )
     {
       control.RemoveRenderer( mImpl->mRenderer );
-
-      DestroyRenderer();
     }
 
     // Nothing else to do if the relayout size is zero.
+    ResourceReady();
     return;
   }
 
   const Text::Controller::UpdateTextType updateTextType = mController->Relayout( relayoutSize );
 
-  if( Text::Controller::NONE_UPDATED != ( Text::Controller::MODEL_UPDATED & updateTextType ) )
+  if( Text::Controller::NONE_UPDATED != ( Text::Controller::MODEL_UPDATED & updateTextType )
+   || mRendererUpdateNeeded )
   {
+    mRendererUpdateNeeded = false;
+
+    // Removes the texture set.
+    RemoveTextureSet();
+
     // Remove any renderer previously set.
     if( mImpl->mRenderer )
     {
       control.RemoveRenderer( mImpl->mRenderer );
-
-      DestroyRenderer();
     }
 
     if( ( relayoutSize.width > Math::MACHINE_EPSILON_1000 ) &&
         ( relayoutSize.height > Math::MACHINE_EPSILON_1000 ) )
     {
-      PixelData data = mTypesetter->Render( relayoutSize );
+      Vector4 atlasRect = FULL_TEXTURE_RECT;
+
+      // Create a texture for the text without any styles
+      PixelData data = mTypesetter->Render( relayoutSize, Text::Typesetter::RENDER_NO_STYLES );
+
+      // It may happen the image atlas can't handle a pixel data it exceeds the maximum size.
+      // In that case, create a texture. TODO: should tile the text.
+
+      Texture texture = Texture::New( Dali::TextureType::TEXTURE_2D,
+                                      data.GetPixelFormat(),
+                                      data.GetWidth(),
+                                      data.GetHeight() );
 
-      Geometry geometry;
-      Shader shader;
-      TextureSet textureSet;
+      texture.Upload( data );
 
-      Vector4 atlasRect;
+      TextureSet textureSet = TextureSet::New();
+      textureSet.SetTexture( 0u, texture );
 
-      textureSet = mFactoryCache.GetAtlasManager()->Add( atlasRect, data );
-      mImpl->mFlags |= Impl::IS_ATLASING_APPLIED;
+      // Create a texture for all the text styles (without the text itself)
+      PixelData styleData = mTypesetter->Render( relayoutSize, Text::Typesetter::RENDER_NO_TEXT );
 
-      // Filter mode needs to be set to nearest to avoid blurry text.
+      Texture styleTexture = Texture::New( Dali::TextureType::TEXTURE_2D,
+                                           styleData.GetPixelFormat(),
+                                           styleData.GetWidth(),
+                                           styleData.GetHeight() );
+
+      styleTexture.Upload( styleData );
+
+      textureSet.SetTexture( 1u, styleTexture );
+
+      // Create a texture as a mask to avoid color glyphs (e.g. emojis) to be affected by text color animation
+      PixelData maskData = mTypesetter->Render( relayoutSize, Text::Typesetter::RENDER_MASK );
+
+      Texture maskTexture = Texture::New( Dali::TextureType::TEXTURE_2D,
+                                          styleData.GetPixelFormat(),
+                                          styleData.GetWidth(),
+                                          styleData.GetHeight() );
+
+      maskTexture.Upload( maskData );
+
+      textureSet.SetTexture( 2u, maskTexture );
+
+      // Filter mode needs to be set to linear to produce better quality while scaling.
       Sampler sampler = Sampler::New();
-      sampler.SetFilterMode( FilterMode::NEAREST, FilterMode::NEAREST );
+      sampler.SetFilterMode( FilterMode::LINEAR, FilterMode::LINEAR );
       textureSet.SetSampler( 0u, sampler );
+      textureSet.SetSampler( 1u, sampler );
+      textureSet.SetSampler( 2u, sampler );
 
-      geometry = mFactoryCache.GetGeometry( VisualFactoryCache::QUAD_GEOMETRY );
-      if( !geometry )
-      {
-        geometry =  VisualFactoryCache::CreateQuadGeometry();
-        mFactoryCache.SaveGeometry( VisualFactoryCache::QUAD_GEOMETRY , geometry );
-      }
+      mImpl->mRenderer.SetTextures( textureSet );
 
-      shader = mFactoryCache.GetShader( VisualFactoryCache::IMAGE_SHADER_ATLAS_DEFAULT_WRAP );
-      if( !shader )
-      {
-        shader = Shader::New( VERTEX_SHADER, FRAGMENT_SHADER_ATLAS_CLAMP );
-        mFactoryCache.SaveShader( VisualFactoryCache::IMAGE_SHADER_ATLAS_DEFAULT_WRAP, shader );
-      }
-      shader.RegisterProperty( PIXEL_AREA_UNIFORM_NAME, FULL_TEXTURE_RECT );
+      mImpl->mFlags &= ~Impl::IS_ATLASING_APPLIED;
 
-      mImpl->mRenderer = Renderer::New( geometry, shader );
-      mImpl->mRenderer.SetProperty( Dali::Renderer::Property::DEPTH_INDEX, Toolkit::DepthIndex::TEXT );
       mImpl->mRenderer.RegisterProperty( ATLAS_RECT_UNIFORM_NAME, atlasRect );
 
-      mImpl->mRenderer.SetTextures( textureSet );
-
-      control.AddRenderer( mImpl->mRenderer );
+      // Check whether it is a markup text with multiple text colors
+      const Vector4* const colorsBuffer = mController->GetTextModel()->GetColors();
+      bool hasMultipleTextColors = ( NULL != colorsBuffer );
+      mImpl->mRenderer.RegisterProperty( "uHasMultipleTextColors", static_cast<float>( hasMultipleTextColors ) );
 
       //Register transform properties
       mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
 
-      mImpl->mFlags |= Impl::IS_FROM_CACHE;
+      control.AddRenderer( mImpl->mRenderer );
+
+      // Text rendered and ready to display
+      ResourceReady();
     }
   }
 }
 
-void TextVisual::DestroyRenderer()
+void TextVisual::RemoveTextureSet()
 {
-  // Removes the text's image from the texture atlas.
-  Vector4 atlasRect;
-
-  const Property::Index index = mImpl->mRenderer.GetPropertyIndex( ATLAS_RECT_UNIFORM_NAME );
-  if( index != Property::INVALID_INDEX )
+  if( mImpl->mFlags & Impl::IS_ATLASING_APPLIED )
   {
-    const Property::Value& atlasRectValue = mImpl->mRenderer.GetProperty( index );
-    atlasRectValue.Get( atlasRect );
+    // Removes the text's image from the texture atlas.
+    Vector4 atlasRect;
 
-    const TextureSet& textureSet = mImpl->mRenderer.GetTextures();
-    mFactoryCache.GetAtlasManager()->Remove( textureSet, atlasRect );
-  }
+    const Property::Index index = mImpl->mRenderer.GetPropertyIndex( ATLAS_RECT_UNIFORM_NAME );
+    if( index != Property::INVALID_INDEX )
+    {
+      const Property::Value& atlasRectValue = mImpl->mRenderer.GetProperty( index );
+      atlasRectValue.Get( atlasRect );
 
-  // Resets the renderer.
-  mImpl->mRenderer.Reset();
+      const TextureSet& textureSet = mImpl->mRenderer.GetTextures();
+      mFactoryCache.GetAtlasManager()->Remove( textureSet, atlasRect );
+    }
+  }
 }
 
 } // namespace Internal