diff --git a/cmake/TaichiCore.cmake b/cmake/TaichiCore.cmake
index c9158a1b8a91be..f4d571fa61a653 100644
--- a/cmake/TaichiCore.cmake
+++ b/cmake/TaichiCore.cmake
@@ -336,7 +336,7 @@ if(TI_WITH_GGUI)
     set(IMGUI_DIR external/imgui)
     include_directories(external/glfw/include)
     include_directories(SYSTEM ${IMGUI_DIR} ${IMGUI_DIR}/backends ..)
-    add_library(imgui  ${IMGUI_DIR}/backends/imgui_impl_glfw.cpp ${IMGUI_DIR}/backends/imgui_impl_vulkan.cpp ${IMGUI_DIR}/imgui.cpp ${IMGUI_DIR}/imgui_draw.cpp ${IMGUI_DIR}/imgui_demo.cpp ${IMGUI_DIR}/imgui_tables.cpp ${IMGUI_DIR}/imgui_widgets.cpp)
+    add_library(imgui  ${IMGUI_DIR}/backends/imgui_impl_glfw.cpp ${IMGUI_DIR}/backends/imgui_impl_vulkan.cpp ${IMGUI_DIR}/imgui.cpp ${IMGUI_DIR}/imgui_draw.cpp  ${IMGUI_DIR}/imgui_tables.cpp ${IMGUI_DIR}/imgui_widgets.cpp)
     target_link_libraries(${CORE_LIBRARY_NAME} imgui)
 
 endif()
diff --git a/taichi/ui/common/camera.h b/taichi/ui/common/camera.h
index f65e5ca91ef630..58fa47821db442 100644
--- a/taichi/ui/common/camera.h
+++ b/taichi/ui/common/camera.h
@@ -26,9 +26,9 @@ struct Camera {
   }
   glm::mat4 get_projection_matrix(float aspect_ratio) {
     if (projection_mode == ProjectionMode::Perspective) {
-      return glm::perspective(fov, aspect_ratio, 0.1f, 1000.f);
+      return glm::perspective(fov, aspect_ratio, z_far, z_near);
     } else if (projection_mode == ProjectionMode::Orthogonal) {
-      return glm::ortho(left, right, top, bottom, z_near, z_far);
+      return glm::ortho(left, right, top, bottom, z_far, z_near);
     } else {
       throw std::runtime_error("invalid camera projection mode");
     }
diff --git a/taichi/ui/common/canvas_base.h b/taichi/ui/common/canvas_base.h
index 2485a223da1940..44198b9e83d310 100644
--- a/taichi/ui/common/canvas_base.h
+++ b/taichi/ui/common/canvas_base.h
@@ -28,7 +28,7 @@ struct LinesInfo {
 };
 
 class CanvasBase {
-public:
+ public:
   virtual void set_background_color(const glm::vec3 &color) = 0;
   virtual void set_image(const SetImageInfo &info) = 0;
   virtual void triangles(const TrianglesInfo &info) = 0;
diff --git a/taichi/ui/common/field_info.h b/taichi/ui/common/field_info.h
index fd098c9b549495..1de960db863364 100644
--- a/taichi/ui/common/field_info.h
+++ b/taichi/ui/common/field_info.h
@@ -7,7 +7,9 @@ TI_UI_NAMESPACE_BEGIN
 
 enum class FieldSource : int {
   TaichiCuda = 0,
-  TaichiX64 = 1
+  TaichiX64 = 1,
+  TaichiVulkan = 2,
+  TaichiOpenGL = 3
   // support np array / torch tensor in the future?
 };
 
diff --git a/taichi/ui/common/input_handler.h b/taichi/ui/common/input_handler.h
index 2bcc792c3751d3..68421465860575 100644
--- a/taichi/ui/common/input_handler.h
+++ b/taichi/ui/common/input_handler.h
@@ -8,40 +8,32 @@ TI_UI_NAMESPACE_BEGIN
 
 class InputHandler {
  public:
-  std::vector<bool> keys;
-  float last_x = 0;
-  float last_y = 0;
-
-  std::vector<std::function<void(int, int)>> user_key_callbacks;
-  std::vector<std::function<void(double, double)>> use_mouse_pos_callbacks;
-  std::vector<std::function<void(int, int)>> user_mouse_button_callbacks;
-
   void key_callback(GLFWwindow *window,
                     int key,
                     int scancode,
                     int action,
                     int mode) {
     if (action == GLFW_PRESS) {
-      keys[key] = true;
+      keys_[key] = true;
     } else if (action == GLFW_RELEASE) {
-      keys[key] = false;
+      keys_[key] = false;
     }
-    for (auto f : user_key_callbacks) {
+    for (auto f : user_key_callbacks_) {
       f(key, action);
     }
   }
 
   void mouse_pos_callback(GLFWwindow *window, double xpos, double ypos) {
     if (first_mouse_) {
-      last_x = xpos;
-      last_y = ypos;
+      last_x_ = xpos;
+      last_y_ = ypos;
       first_mouse_ = false;
     }
 
-    last_x = xpos;
-    last_y = ypos;
+    last_x_ = xpos;
+    last_y_ = ypos;
 
-    for (auto f : use_mouse_pos_callbacks) {
+    for (auto f : user_mouse_pos_callbacks_) {
       f(xpos, ypos);
     }
   }
@@ -61,22 +53,52 @@ class InputHandler {
       }
     }
     if (action == GLFW_PRESS) {
-      keys[button] = true;
+      keys_[button] = true;
     } else if (action == GLFW_RELEASE) {
-      keys[button] = false;
+      keys_[button] = false;
     }
-    for (auto f : user_mouse_button_callbacks) {
+    for (auto f : user_mouse_button_callbacks_) {
       f(button, action);
     }
   }
 
-  InputHandler() : keys(1024, false) {
+  bool is_pressed(int key) {
+    return keys_[key];
+  }
+
+  float last_x() {
+    return last_x_;
+  }
+
+  float last_y() {
+    return last_y_;
+  }
+
+  void add_key_callback(std::function<void(int, int)> f) {
+    user_key_callbacks_.push_back(f);
+  }
+  void add_mouse_pos_callback(std::function<void(double, double)> f) {
+    user_mouse_pos_callbacks_.push_back(f);
+  }
+  void add_mouse_button_callback(std::function<void(int, int)> f) {
+    user_mouse_button_callbacks_.push_back(f);
+  }
+
+  InputHandler() : keys_(1024, false) {
   }
 
  private:
   bool first_mouse_ = true;
 
   bool left_mouse_down_ = false;
+
+  std::vector<bool> keys_;
+  float last_x_ = 0;
+  float last_y_ = 0;
+
+  std::vector<std::function<void(int, int)>> user_key_callbacks_;
+  std::vector<std::function<void(double, double)>> user_mouse_pos_callbacks_;
+  std::vector<std::function<void(int, int)>> user_mouse_button_callbacks_;
 };
 
 TI_UI_NAMESPACE_END
diff --git a/taichi/ui/common/scene_base.h b/taichi/ui/common/scene_base.h
index bfbe1c32043d0d..388e1a8f3fdbc1 100644
--- a/taichi/ui/common/scene_base.h
+++ b/taichi/ui/common/scene_base.h
@@ -16,14 +16,12 @@ struct PointLight {
 struct MeshInfo {
   RenderableInfo renderable_info;
   glm::vec3 color;
-  float shininess;
 };
 
 struct ParticlesInfo {
   RenderableInfo renderable_info;
   glm::vec3 color;
   float radius;
-  float shininess;
 };
 
 class SceneBase {
@@ -41,7 +39,7 @@ class SceneBase {
     particles_infos_.push_back(info);
   }
   void point_light(glm::vec3 pos, glm::vec3 color) {
-    if (point_lights_.size() >= kMaxPointLights ) {
+    if (point_lights_.size() >= kMaxPointLights) {
       throw std::runtime_error("point light count exceeds kMaxPointLights");
     }
     point_lights_.push_back({pos, color});
@@ -53,7 +51,7 @@ class SceneBase {
 
  protected:
   Camera camera_;
-  glm::vec3 ambient_light_color_ = glm::vec3(0.0, 0.0, 0.0);
+  glm::vec3 ambient_light_color_ = glm::vec3(0.1, 0.1, 0.1);
   std::vector<PointLight> point_lights_;
   std::vector<MeshInfo> mesh_infos_;
   std::vector<ParticlesInfo> particles_infos_;
diff --git a/taichi/ui/common/window_base.cpp b/taichi/ui/common/window_base.cpp
index 4c0b749266a396..449f524f3012b0 100644
--- a/taichi/ui/common/window_base.cpp
+++ b/taichi/ui/common/window_base.cpp
@@ -15,21 +15,20 @@ void WindowBase::set_callbacks() {
   glfwSetCursorPosCallback(glfw_window_, mouse_pos_callback);
   glfwSetMouseButtonCallback(glfw_window_, mouse_button_callback);
 
-  input_handler_.user_key_callbacks.push_back([&](int key, int action) {
+  input_handler_.add_key_callback([&](int key, int action) {
+    if (action == GLFW_PRESS) {
+      events_.push_back({EventType::Press, button_id_to_name(key)});
+    } else if (action == GLFW_RELEASE) {
+      events_.push_back({EventType::Release, button_id_to_name(key)});
+    }
+  });
+  input_handler_.add_mouse_button_callback([&](int key, int action) {
     if (action == GLFW_PRESS) {
       events_.push_back({EventType::Press, button_id_to_name(key)});
     } else if (action == GLFW_RELEASE) {
       events_.push_back({EventType::Release, button_id_to_name(key)});
     }
   });
-  input_handler_.user_mouse_button_callbacks.push_back(
-      [&](int key, int action) {
-        if (action == GLFW_PRESS) {
-          events_.push_back({EventType::Press, button_id_to_name(key)});
-        } else if (action == GLFW_RELEASE) {
-          events_.push_back({EventType::Release, button_id_to_name(key)});
-        }
-      });
 }
 
 CanvasBase *WindowBase::get_canvas() {
@@ -57,7 +56,7 @@ void WindowBase::show() {
 
 bool WindowBase::is_pressed(std::string button) {
   int button_id = buttom_name_to_id(button);
-  return input_handler_.keys[button_id] > 0;
+  return input_handler_.is_pressed(button_id) > 0;
 }
 
 bool WindowBase::is_running() {
@@ -68,13 +67,13 @@ void WindowBase::set_is_running(bool value) {
   glfwSetWindowShouldClose(glfw_window_, !value);
 }
 
-std::tuple<float, float> WindowBase::get_cursor_pos() {
-  float x = input_handler_.last_x;
-  float y = input_handler_.last_y;
+std::pair<float, float> WindowBase::get_cursor_pos() {
+  float x = input_handler_.last_x();
+  float y = input_handler_.last_y();
 
   x = x / (float)config_.width;
   y = (config_.height - y) / (float)config_.height;
-  return std::make_tuple(x, y);
+  return std::make_pair(x, y);
 }
 
 std::vector<Event> WindowBase::get_events(EventType tag) {
diff --git a/taichi/ui/common/window_base.h b/taichi/ui/common/window_base.h
index 804b288c482ae2..b58873e2c00928 100644
--- a/taichi/ui/common/window_base.h
+++ b/taichi/ui/common/window_base.h
@@ -25,7 +25,7 @@ class WindowBase {
 
   void set_is_running(bool value);
 
-  std::tuple<float, float> get_cursor_pos();
+  std::pair<float, float> get_cursor_pos();
 
   std::vector<Event> get_events(EventType tag);
 
diff --git a/taichi/ui/utils/utils.h b/taichi/ui/utils/utils.h
index 171255d78abbf3..c157670726d243 100644
--- a/taichi/ui/utils/utils.h
+++ b/taichi/ui/utils/utils.h
@@ -188,13 +188,13 @@ inline int next_power_of_2(int n) {
   return 1 << count;
 }
 
-#define DEFINE_PROPERTY(Type, name)    \
-  Type name;                           \
+#define DEFINE_PROPERTY(Type, name)       \
+  Type name;                              \
   void set_##name(const Type &new_name) { \
     name = new_name;                      \
-  }                                    \
-  Type get_##name() {                  \
-    return name;                       \
+  }                                       \
+  Type get_##name() {                     \
+    return name;                          \
   }
 
 inline std::vector<char> read_file(const std::string &filename) {