DALi ray marching / ray tracing example

Uses volumetric ray casting to draw a sphere with basic per-pixel lighting inside the fragment shader. Also modifies DALi demo make file to support shader files. Change-Id: I0645de8481fa75abb177ca76a5611a51350fc1b7 Todo: Create a separate folder for shaders?

DALi ray marching / ray tracing example
Uses volumetric ray casting to draw a sphere with basic per-pixel lighting inside the fragment shader. Also modifies DALi demo make file to support shader files. Change-Id: I0645de8481fa75abb177ca76a5611a51350fc1b7 Todo: Create a separate folder for shaders?
Nick Holland
1 parent 3a81e76e
Showing 18 changed files with 450 additions and 1 deletions
build/tizen/CMakeLists.txt
com.samsung.dali-demo.xml
examples-reel/dali-examples-reel.cpp
examples/ray-marching/ray-marching-example.cpp
packaging/com.samsung.dali-demo.spec
resources/po/as.po
resources/po/de.po
resources/po/en_GB.po
resources/po/en_US.po
resources/po/es.po
resources/po/fi.po
resources/po/ko.po
resources/po/ml.po
resources/po/ur.po
resources/po/zn_CH.po
resources/shaders/raymarch_sphere_shaded.fsh
resources/shaders/raymarch_sphere_shaded.vsh
shared/dali-demo-strings.h
@@ -33,6 +33,7 @@ SET(LOCAL_GAME_DIR ${RESOURCE_DIR}/game)
 SET(LOCAL_VIDEOS_DIR ${RESOURCE_DIR}/videos)
 SET(LOCAL_MODELS_DIR ${RESOURCE_DIR}/models)
 SET(LOCAL_SCRIPTS_DIR ${RESOURCE_DIR}/scripts)
+SET(LOCAL_SHADERS_DIR ${RESOURCE_DIR}/shaders)
 IF(NOT DEFINED LOCAL_STYLE_DIR)
         SET(LOCAL_STYLE_DIR ${RESOURCE_DIR}/style)
 ENDIF()
@@ -42,6 +43,7 @@ SET(GAME_DIR ${APP_DATA_RES_DIR}/game/)
 SET(VIDEOS_DIR ${APP_DATA_RES_DIR}/videos/)
 SET(MODELS_DIR ${APP_DATA_RES_DIR}/models/)
 SET(SCRIPTS_DIR ${APP_DATA_RES_DIR}/scripts/)
+SET(SHADERS_DIR ${APP_DATA_RES_DIR}/shaders/)
 SET(STYLE_DIR ${APP_DATA_RES_DIR}/style/)
 IF(NOT DEFINED LOCALE_DIR)
@@ -53,6 +55,7 @@ SET(DEMO_IMAGE_DIR \\&quot;${IMAGES_DIR}\\&quot;)
 SET(DEMO_VIDEO_DIR \\"${VIDEOS_DIR}\\")
 SET(DEMO_MODEL_DIR \\"${MODELS_DIR}\\")
 SET(DEMO_SCRIPT_DIR \\"${SCRIPTS_DIR}\\")
+SET(DEMO_SHADER_DIR \\"${SHADERS_DIR}\\")
 SET(DEMO_STYLE_DIR \\"${STYLE_DIR}\\")
 SET(DEMO_THEME_PATH \\"${STYLE_DIR}demo-theme.json\\")
 SET(DEMO_EXAMPLE_BIN \\"${BINDIR}/\\")
@@ -91,6 +94,11 @@ FOREACH(flag ${LOCAL_SCRIPTS_LIST})
         INSTALL(FILES ${LOCAL_SCRIPTS_DIR}/${flag} DESTINATION ${SCRIPTS_DIR})
 ENDFOREACH(flag)
+FILE(GLOB LOCAL_SHADERS_LIST RELATIVE "${LOCAL_SHADERS_DIR}" "${LOCAL_SHADERS_DIR}/*")
+FOREACH(flag ${LOCAL_SHADERS_LIST})
+        INSTALL(FILES ${LOCAL_SHADERS_DIR}/${flag} DESTINATION ${SHADERS_DIR})
+ENDFOREACH(flag)
+
 FILE(GLOB LOCAL_GAME_LIST RELATIVE "${LOCAL_GAME_DIR}" "${LOCAL_GAME_DIR}/*.*")
 FOREACH(flag ${LOCAL_GAME_LIST})
         INSTALL(FILES ${LOCAL_GAME_DIR}/${flag} DESTINATION ${GAME_DIR})
@@ -134,7 +142,7 @@ FOREACH(flag ${REQUIRED_PKGS_CFLAGS})
         SET(REQUIRED_CFLAGS "${REQUIRED_CFLAGS} ${flag}")
 ENDFOREACH(flag)
-SET(DALI_DEMO_CFLAGS "-DDEMO_GAME_DIR=${DEMO_GAME_DIR} -DDEMO_IMAGE_DIR=${DEMO_IMAGE_DIR} -DDEMO_VIDEO_DIR=${DEMO_VIDEO_DIR} -DDEMO_MODEL_DIR=${DEMO_MODEL_DIR} -DDEMO_SCRIPT_DIR=${DEMO_SCRIPT_DIR} -DDEMO_STYLE_DIR=${DEMO_STYLE_DIR} -DDEMO_THEME_PATH=${DEMO_THEME_PATH} -DDEMO_EXAMPLE_BIN=${DEMO_EXAMPLE_BIN} -DDEMO_LOCALE_DIR=${DEMO_LOCALE_DIR} -fvisibility=hidden -DHIDE_DALI_INTERNALS -DDEMO_LANG=${DEMO_LANG}")
+SET(DALI_DEMO_CFLAGS "-DDEMO_GAME_DIR=${DEMO_GAME_DIR} -DDEMO_IMAGE_DIR=${DEMO_IMAGE_DIR} -DDEMO_VIDEO_DIR=${DEMO_VIDEO_DIR} -DDEMO_MODEL_DIR=${DEMO_MODEL_DIR} -DDEMO_SCRIPT_DIR=${DEMO_SCRIPT_DIR} -DDEMO_SHADER_DIR=${DEMO_SHADER_DIR}  -DDEMO_STYLE_DIR=${DEMO_STYLE_DIR} -DDEMO_THEME_PATH=${DEMO_THEME_PATH} -DDEMO_EXAMPLE_BIN=${DEMO_EXAMPLE_BIN} -DDEMO_LOCALE_DIR=${DEMO_LOCALE_DIR} -fvisibility=hidden -DHIDE_DALI_INTERNALS -DDEMO_LANG=${DEMO_LANG}")
 ###########################################################################
 # Internationalization
@@ -214,6 +214,8 @@
 	</ui-application>
 	<ui-application appid="rendering-radial-progress.example" exec="/usr/apps/com.samsung.dali-demo/bin/rendering-radial-progress.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Rendering Radial Progress</label>
+	<ui-application appid="ray-marching.example" exec="/usr/apps/com.samsung.dali-demo/bin/ray-marching.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+		<label>Ray Marching example</label>
 	</ui-application>
 	<ui-application appid="rendering-basic-light.example" exec="/usr/apps/com.samsung.dali-demo/bin/rendering-basic-light.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Basic Light</label>
@@ -69,6 +69,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
   demo.AddExample(Example("rendering-cube.example", DALI_DEMO_STR_TITLE_RENDERING_DRAW_CUBE));
   demo.AddExample(Example("rendering-textured-cube.example", DALI_DEMO_STR_TITLE_RENDERING_TEXTURED_CUBE));
   demo.AddExample(Example("rendering-radial-progress.example", DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS));
+  demo.AddExample(Example("ray-marching.example", DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING));
   demo.AddExample(Example("scroll-view.example", DALI_DEMO_STR_TITLE_SCROLL_VIEW));
   demo.AddExample(Example("size-negotiation.example", DALI_DEMO_STR_TITLE_NEGOTIATE_SIZE));
   demo.AddExample(Example("styling.example", DALI_DEMO_STR_TITLE_STYLING));
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/controls/tool-bar/tool-bar.h>
+#include "shared/view.h"
+#include "shared/utility.h"
+#include <stdio.h>
+
+using namespace Dali;
+using Dali::Toolkit::TextLabel;
+using Dali::Toolkit::Control;
+using Dali::Toolkit::ToolBar;
+
+const char* BACKGROUND_IMAGE( "" );
+const char* TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" );
+const char* APPLICATION_TITLE( "Ray Marching" );
+const char* SHADER_NAME("raymarch_sphere_shaded");
+
+/**
+ * @brief LoadShaderCode
+ * @param filename
+ * @param output
+ * @return
+ */
+bool LoadShaderCode( const char* path, const char* filename, std::vector<char>& output )
+{
+  std::string fullpath( path );
+  fullpath += filename;
+  FILE* f = fopen( fullpath.c_str(), "rb" );
+  if( !f )
+  {
+    return false;
+  }
+  fseek( f, 0, SEEK_END );
+  size_t size = ftell( f );
+  fseek( f, 0, SEEK_SET );
+  output.resize( size + 1 );
+  std::fill( output.begin(), output.end(), 0 );
+  ssize_t result = fread( output.data(), size, 1, f );
+  fclose( f );
+
+  return ( result >= 0 );
+}
+
+/**
+ * @brief LoadShaders
+ * @param shaderName
+ * @return
+ */
+Shader LoadShaders( const std::string& shaderName )
+{
+  std::vector<char> bufV, bufF;
+  std::string shaderVSH( shaderName );
+  std::string shaderFSH( shaderName );
+  shaderVSH += ".vsh";
+  shaderFSH += ".fsh";
+  LoadShaderCode( DEMO_SHADER_DIR, shaderVSH.c_str(), bufV );
+  LoadShaderCode( DEMO_SHADER_DIR, shaderFSH.c_str(), bufF );
+  Shader shader = Shader::New( bufV.data(), bufF.data() );
+  return shader;
+}
+
+// This example shows how to create a Ray Marching using a shader
+//
+class RayMarchingExample : public ConnectionTracker
+{
+public:
+
+  RayMarchingExample( Application& application )
+  : mApplication( application )
+  {
+    // Connect to the Application's Init signal
+    mApplication.InitSignal().Connect( this, &RayMarchingExample::Create );
+  }
+
+  ~RayMarchingExample()
+  {
+    // Nothing to do here;
+  }
+
+  // The Init signal is received once (only) during the Application lifetime
+  void Create( Application& application )
+  {
+    // Get a handle to the stage
+    Stage stage = Stage::GetCurrent();
+
+    stage.GetRootLayer().TouchSignal().Connect( this, &RayMarchingExample::OnTouch );
+
+    stage.KeyEventSignal().Connect(this, &RayMarchingExample::OnKeyEvent);
+
+    stage.SetBackgroundColor( Color::YELLOW );
+
+    // Hide the indicator bar
+    application.GetWindow().ShowIndicator( Dali::Window::INVISIBLE );
+
+    // Creates a default view with a default tool bar.
+    // The view is added to the stage.
+    mContentLayer = DemoHelper::CreateView( application,
+                                            mView,
+                                            mToolBar,
+                                            BACKGROUND_IMAGE,
+                                            TOOLBAR_IMAGE,
+                                            APPLICATION_TITLE );
+
+    // Add an extra space on the right to center the title text.
+    mToolBar.AddControl( Actor::New(), DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight );
+
+    AddContentLayer();
+
+  }
+  bool OnTouch( Actor actor, const TouchData& touch )
+  {
+    // quit the application
+    mApplication.Quit();
+    return true;
+  }
+
+  /**
+   * Main key event handler
+   */
+  void OnKeyEvent(const KeyEvent& event)
+  {
+    if(event.state == KeyEvent::Down)
+    {
+      if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
+      {
+        mApplication.Quit();
+      }
+    }
+  }
+
+  /**
+   * Creates quad renderer
+   */
+  Renderer CreateQuadRenderer()
+  {
+    // Create shader & geometry needed by Renderer
+    Shader shader = LoadShaders( SHADER_NAME );
+
+    Property::Map vertexFormat;
+    vertexFormat["aPosition"] = Property::VECTOR2;
+    PropertyBuffer vertexBuffer = PropertyBuffer::New( vertexFormat );
+
+    const float P( 0.5f );
+    const Vector2 vertices[] = {
+      Vector2( -P, -P ),
+      Vector2( +P, -P ),
+      Vector2( -P, +P ),
+      Vector2( +P, +P )
+    };
+
+    vertexBuffer.SetData( vertices, 4 );
+
+    // Instantiate quad geometry
+    Geometry geometry = Geometry::New();
+    geometry.AddVertexBuffer( vertexBuffer );
+    geometry.SetType( Geometry::TRIANGLE_STRIP );
+
+    // Create renderer
+    Renderer renderer = Renderer::New( geometry, shader );
+
+    renderer.RegisterProperty("uRadius", 0.0f );
+    renderer.RegisterProperty("uAdjuster", -4.0f );
+
+    //  Animate the sphere radius uniform and a generic uAdjust uniform currently used to move the light around
+    Animation animation = Animation::New(8.0f);
+    animation.AnimateTo( Property(renderer,"uRadius"), 1.2f, AlphaFunction::BOUNCE);
+    animation.AnimateTo( Property(renderer,"uAdjuster"), 4.0f, AlphaFunction::BOUNCE);
+    animation.SetLooping( true );
+    animation.Play();
+
+    return renderer;
+  }
+
+  void AddContentLayer()
+  {
+    Stage stage = Stage::GetCurrent();
+
+     //Create all the renderers
+    Renderer renderer = CreateQuadRenderer();
+
+    Actor actor = Actor::New();
+    actor.AddRenderer( renderer );
+
+    actor.SetAnchorPoint( Dali::AnchorPoint::CENTER );
+    actor.SetParentOrigin( Dali::ParentOrigin::CENTER );
+    actor.SetResizePolicy( Dali::ResizePolicy::FILL_TO_PARENT, Dali::Dimension::ALL_DIMENSIONS );
+
+    mContentLayer.Add( actor );
+  }
+
+private:
+  Application&  mApplication;
+  Control mView;
+  Layer mContentLayer;
+  ToolBar mToolBar;
+};
+
+void RunTest( Application& application )
+{
+  RayMarchingExample test( application );
+
+  application.MainLoop();
+}
+
+// Entry point for Linux & Tizen applications
+//
+int DALI_EXPORT_API main( int argc, char **argv )
+{
+  Application application = Application::New( &argc, &argv );
+
+  RunTest( application );
+
+  return 0;
+}
@@ -140,6 +140,7 @@ exit 0
 %{dali_app_res_dir}/videos/*
 %{dali_app_res_dir}/models/*
 %{dali_app_res_dir}/scripts/*
+%{dali_app_res_dir}/shaders/*
 %{dali_app_res_dir}/style/*
 %{dali_app_res_dir}/style/images/*
 %{dali_xml_file_dir}/%{name}.xml
@@ -165,3 +165,6 @@ msgstr &quot;ৰেণ্ডাৰিং  শাৰী&quot;
 msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
 msgstr "রশ্মীয় অগ্রগতি অঙ্কন"
+
+msgid "DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING"
+msgstr "রে মার্চিং"
@@ -165,3 +165,6 @@ msgstr &quot;Zeichnen&quot;
 msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
 msgstr "Radialer Fortschritt zeichnen"
+
+msgid "DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING"
+msgstr "Ray marschieren"
@@ -177,3 +177,6 @@ msgstr &quot;Focus integration&quot;
 msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
 msgstr "Draw radial progress"
+
+msgid "DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING"
+msgstr "Ray Marching"
@@ -177,3 +177,6 @@ msgstr &quot;Focus integration&quot;
 msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
 msgstr "Draw radial progress"
+
+msgid "DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING"
+msgstr "Ray Marching"
@@ -165,3 +165,6 @@ msgstr &quot;Dibujar linea&quot;
 msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
 msgstr "Dibujo progreso radial"
+
+msgid "DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING"
+msgstr "trazado de rayos"
@@ -165,3 +165,6 @@ msgstr &quot;Draw linja&quot;
 msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
 msgstr "Piirustus radial edistyminen"
+
+msgid "DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING"
+msgstr "Ray marssi"
@@ -165,3 +165,6 @@ msgstr &quot;선 그리기&quot;
 msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
 msgstr "방사형 진행 상황 그리기"
+
+msgid "DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING"
+msgstr "레이 마칭"
@@ -165,3 +165,6 @@ msgstr &quot;സമനില ലൈൻ&quot;
 msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
 msgstr "റേഡിയൽ പുരോഗതി ഡ്രോയിംഗ്"
+
+msgid "DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING"
+msgstr "ലൈറ്റ് മാർച്ചിംഗ്"
@@ -165,3 +165,6 @@ msgstr &quot;انچنیھک ریکل &quot;
 msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
 msgstr "ریڈیل پیش رفت ڈرائنگ"
+
+msgid "DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING"
+msgstr "رے چلتے"
@@ -165,3 +165,6 @@ msgstr &quot;画线&quot;
 msgid "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS"
 msgstr "绘制径向进度"
+
+msgid "DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING"
+msgstr "射线行军"
+/*
+ * Fragment shader for textured quad
+ */
+varying mediump vec2 vTexCoord;
+varying mediump vec2 vRayCastCoord;
+
+uniform mediump float uRadius;
+uniform mediump float uAdjuster;
+
+#define CAMERA_Z_POSITION 1.0  // gives us a FOV of 90 degrees if Plane of projection is at Z = 0 with size 2x2
+#define SPHERE_Z_POSITION -1.0 // Sphere placed behind Plane of projection
+#define SPHERE_RADIUS 0.5
+
+
+// signed distance function
+// returns
+// < 0 if inside sphere
+// 0 == on sphere surface
+// > 1 if outside sphere
+mediump float distanceToSphere( mediump vec3 point, mediump vec3 sphereCenter, mediump float radius )
+{
+  return distance( point, sphereCenter ) - radius;
+}
+
+// Simulate a simple spot light ( there's no ambient light in this example)
+mediump vec4 lightSphere( mediump vec3 point, mediump vec3 sphereCenter )
+{
+   // the normal = direction of the vector from the sphere center to the point on the surface of the sphere
+   mediump vec3 normal = normalize( point - sphereCenter );
+
+   // Animate the light around the sphere in a circular motion
+   mediump vec3 lightDirection = vec3( sin(uAdjuster)+uRadius, cos ( uAdjuster )+uRadius, CAMERA_Z_POSITION  );
+
+   // calculate the dot product to give us the intensity of the light bouncing off the surface
+   mediump float value =  dot( normal , lightDirection);
+
+   // add a purple tint to the final color by adjust green channel by 0.84
+   return vec4( value, value * 0.843, value , 1.0);
+
+}
+
+void main()
+{
+  // The fragment shader is called for every pixel that is to be drawn for our
+  // quad geometry ( 2 triangles ). The size and number of pixels drawn is
+  // determined by the size / position of the quad and the DALi camera position.
+  //
+  // For this example the vRayCastCoord is currently set to the range -1 to 1 by the Vertex Shader
+  //
+  // (-1,-1)
+  //    |--------------|
+  //    |       |      |
+  //    |       |      |
+  //    |_____(0,0)____|
+  //    |       |      |
+  //    |       |      |
+  //    |_______|______|(1,1)
+
+  mediump vec3 pixelPosition = vec3( vRayCastCoord, 0.0 );
+
+  // uncomment line below to see red / green colors only visible when x > 0, or y > 0
+  // gl_FragColor = vec4( pixelPosition, 1.0 ); return;
+
+  // We are going to assume there is a virtual camera infront of the plane of projection
+  // Side view:
+  //                projection
+  //                  plane (2x2)
+  //                  /|
+  //                /  |
+  //              /    |      /----\
+  //        Camera---->|     (SPHERE)
+  //              \    |      \----/
+  //                \  |
+  //                  \|
+  //      z=1        z=0     z  = -1
+  //
+  //
+  //  Why z=1 for camera? Our projection plane is at z = 0, with plane size 2x2 which gives a 90 degree FOV
+  // from the camera to the projection plane
+  //
+  mediump vec3 cameraPos = vec3( 0.0, 0.0, CAMERA_Z_POSITION );
+
+  // calculate the ray direction from the camera to the pixel on the quad
+  mediump vec3 rayDirection = normalize(  pixelPosition - cameraPos );
+
+  // uncomment to visualize the normalized ray direction vector
+  // gl_FragColor = vec4( rayDirection, 1.0 ); return;
+
+  // Setup the position on radius of our virtual sphere
+  mediump vec3 spherePosition = vec3( 0.0, 0.0, SPHERE_Z_POSITION );
+  mediump float sphereRadius = SPHERE_RADIUS + uRadius ; // use uRadius to animate radius from small to large
+
+  // We have the direction of the ray from the camera, now see if it
+  // hits our sphere using ray marching
+  // starting at a pixel position 0 on our projection plane, step in the direction
+  // of ray from the camera to see if it hits our sphere
+  // The concept of ray marching is the step size = minimum distance to an object
+
+  mediump vec3 hitPoint = pixelPosition;
+
+  int steps = 5;
+
+  for( int i = 0; i < steps ; ++i )
+  {
+      // calculate the shortest distance between our hitPoint and the sphere
+      mediump float distance = distanceToSphere( hitPoint, spherePosition, sphereRadius );
+
+      // if the distance < 0 then were inside the sphere
+      // if the distance > 0 then were outside the sphere
+      // if we're close to the edge of the sphere, then draw it
+      if( distance < 0.01 )
+      {
+        gl_FragColor = lightSphere(  hitPoint, spherePosition );
+        return;
+      }
+
+      // move the hit point along by the distance to the spin the direction of the ray
+      hitPoint +=  rayDirection * distance;
+
+  }
+  // no hit, color the pixel based on it's x,y position
+  gl_FragColor = vec4(pixelPosition.x,pixelPosition.y,0.5,1);
+
+}
 \ No newline at end of file
+attribute mediump vec2 aPosition;
+uniform   mediump mat4 uMvpMatrix;  // DALi shader builtin
+uniform   mediump vec3 uSize; // DALi shader builtin
+
+varying mediump vec2 vTexCoord;
+varying mediump vec2 vRayCastCoord;
+void main()
+{
+  mediump vec4 vertexPosition = vec4(aPosition, 0.0, 1.0);
+  vertexPosition.xyz *= uSize;
+
+  // In this ray march example we supply the fragment shader with 0..1 UV texture co-ordinates
+  // incase someone wants to extend the code and add texture mapping to it.
+  // DALi geometry typically ranges from -0.5 to 0.5, hence the +0.5 to make it 0..1
+
+  vTexCoord = aPosition + vec2(0.5);
+
+
+  // Our UV texture co-ordinates for the quad geometry should now range from 0..1
+  //
+  // (0,0)
+  //    |--------|
+  //    |      / |
+  //    |    /   |
+  //    |  /     |
+  //    |/-------|(1,1)
+  //
+  //
+  //
+  // We're going to use the UV co-ordinates as our virtual screen / plane of projection on to our
+  // raycasted scene.
+  //
+  // We first modify the range to be from -1,-1 to 1,1 with 0,0 in the centre. Then
+  // pass this as a varying value to the fragment shader.
+  //
+  //
+  // (-1,-1)
+  //    |--------------|
+  //    |       |      |
+  //    |       |      |
+  //    |_____(0,0)____|
+  //    |       |      |
+  //    |       |      |
+  //    |_______|______|(1,1)
+  //
+  //
+
+  vRayCastCoord = (2.0 * vTexCoord ) - 1.0 ;
+
+  gl_Position = uMvpMatrix * vertexPosition;
+}
 \ No newline at end of file
@@ -75,6 +75,7 @@ extern &quot;C&quot;
 #define DALI_DEMO_STR_TITLE_RENDERING_DRAW_CUBE         dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_DRAW_CUBE")
 #define DALI_DEMO_STR_TITLE_RENDERING_TEXTURED_CUBE     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_TEXTURED_CUBE")
 #define DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS   dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS")
+#define DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING      dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING")
 #define DALI_DEMO_STR_TITLE_REFRACTION                  dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_REFRACTION")
 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL            dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERER_STENCIL")
 #define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL      dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SIMPLE_VISUALS")
@@ -136,6 +137,7 @@ extern &quot;C&quot;
 #define DALI_DEMO_STR_TITLE_RENDERING_DRAW_TRIANGLE     "Draw Triangle"
 #define DALI_DEMO_STR_TITLE_RENDERING_DRAW_CUBE         "Draw Cube"
 #define DALI_DEMO_STR_TITLE_RENDERING_TEXTURED_CUBE     "Textured Cube"
+#define DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING      "Ray Marching"
 #define DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS   "Radial Progress"
 #define DALI_DEMO_STR_TITLE_REFRACTION                  "Refract Effect"
 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL            "Renderer Stencils"