[vr] Support setting center of radial gradient on vr::Rect elements

With this change, I have corrected the aspect ratio of our radial
gradients. That is, they are no longer elliptical when the quad is
rectangular. I have also made it possible to set a different center
point for the gradient.

Bug: 817620
Cq-Include-Trybots: master.tryserver.chromium.android:android_optional_gpu_tests_rel;master.tryserver.chromium.linux:linux_optional_gpu_tests_rel;master.tryserver.chromium.linux:linux_vr;master.tryserver.chromium.mac:mac_optional_gpu_tests_rel;master.tryserver.chromium.win:win_optional_gpu_tests_rel
Change-Id: I2d3a754fb1b8235ff454ea5148dfd9bbfde69068
Reviewed-on: https://chromium-review.googlesource.com/958037Reviewed-by: Biao She <bshe@chromium.org>
Commit-Queue: Ian Vollick <vollick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#542607}

chrome/browser/vr/elements/full_screen_rect.cc

@@ -16,7 +16,7 @@ void FullScreenRect::Render(UiElementRenderer* renderer,
                             const CameraModel& model) const {
   gfx::Transform m;
   m.Scale3d(2.0f, 2.0f, 1.0f);
-  renderer->DrawGradientQuad(m, edge_color(), center_color(),
+  renderer->DrawGradientQuad(m, edge_color(), center_color(), gfx::PointF(),
                              computed_opacity(), size(), corner_radii());
 }
 

chrome/browser/vr/elements/rect.cc

@@ -42,8 +42,8 @@ void Rect::NotifyClientColorAnimated(SkColor color,
 
 void Rect::Render(UiElementRenderer* renderer, const CameraModel& model) const {
   renderer->DrawGradientQuad(model.view_proj_matrix * world_space_transform(),
-                             edge_color_, center_color_, computed_opacity(),
-                             size(), corner_radii());
+                             edge_color_, center_color_, center_point_,
+                             computed_opacity(), size(), corner_radii());
 }
 
 }  // namespace vr

chrome/browser/vr/elements/rect.h

@@ -7,6 +7,7 @@
 
 #include "chrome/browser/vr/elements/ui_element.h"
 #include "third_party/skia/include/core/SkColor.h"
+#include "ui/gfx/geometry/point_f.h"
 
 namespace vr {
 
@@ -37,10 +38,19 @@ class Rect : public UiElement {
   void Render(UiElementRenderer* renderer,
               const CameraModel& model) const override;
 
+  void set_center_point(const gfx::PointF& center_point) {
+    center_point_ = center_point;
+  }
+
  private:
   SkColor center_color_ = SK_ColorWHITE;
   SkColor edge_color_ = SK_ColorWHITE;
 
+  // This is the center point of the gradient, in aspect-corrected, local
+  // coordinates. That is, {0, 0} is always the center of the quad, and the
+  // longer extent always varies between -0.5 and 0.5.
+  gfx::PointF center_point_;
+
   DISALLOW_COPY_AND_ASSIGN(Rect);
 };
 

chrome/browser/vr/renderers/gradient_quad_renderer.cc

@@ -32,6 +32,7 @@ static constexpr char const* kVertexShader = SHADER(
   uniform vec2 u_URCornerOffset;
   uniform vec2 u_LRCornerOffset;
   uniform vec2 u_LLCornerOffset;
+  uniform mediump float u_AspectRatio;
   attribute vec4 a_Position;
   attribute vec2 a_CornerPosition;
   attribute vec2 a_OffsetScale;
@@ -55,7 +56,11 @@ static constexpr char const* kVertexShader = SHADER(
         a_Position[1] + corner_offset[1] * a_OffsetScale[1],
         a_Position[2],
         a_Position[3]);
-    v_Position = position.xy;
+    if (u_AspectRatio > 1.0) {
+      v_Position = vec2(position.x, position.y / u_AspectRatio);
+    } else {
+      v_Position = vec2(position.x * u_AspectRatio, position.y);
+    }
     gl_Position = u_ModelViewProjMatrix * position;
   }
 );
@@ -67,12 +72,14 @@ static constexpr char const* kFragmentShader = SHADER(
   uniform mediump float u_Opacity;
   uniform vec4 u_CenterColor;
   uniform vec4 u_EdgeColor;
+  uniform vec2 u_CenterPosition;
   void main() {
     // NB: this is on the range [0, 1] and hits its extrema at the horizontal
     // and vertical edges of the quad, regardless of its aspect ratio. If we
     // want to have a true circular gradient, we will need to do some extra
     // math.
-    float edge_color_weight = clamp(2.0 * length(v_Position), 0.0, 1.0);
+    vec2 position = v_Position - u_CenterPosition;
+    float edge_color_weight = clamp(2.0 * length(position), 0.0, 1.0);
     float center_color_weight = 1.0 - edge_color_weight;
     vec4 color = u_CenterColor * center_color_weight + u_EdgeColor *
         edge_color_weight;
@@ -114,6 +121,9 @@ GradientQuadRenderer::GradientQuadRenderer()
   opacity_handle_ = glGetUniformLocation(program_handle_, "u_Opacity");
   center_color_handle_ = glGetUniformLocation(program_handle_, "u_CenterColor");
   edge_color_handle_ = glGetUniformLocation(program_handle_, "u_EdgeColor");
+  aspect_ratio_handle_ = glGetUniformLocation(program_handle_, "u_AspectRatio");
+  center_position_handle_ =
+      glGetUniformLocation(program_handle_, "u_CenterPosition");
 }
 
 GradientQuadRenderer::~GradientQuadRenderer() = default;
@@ -121,6 +131,7 @@ GradientQuadRenderer::~GradientQuadRenderer() = default;
 void GradientQuadRenderer::Draw(const gfx::Transform& model_view_proj_matrix,
                                 SkColor edge_color,
                                 SkColor center_color,
+                                const gfx::PointF& center_position,
                                 float opacity,
                                 const gfx::SizeF& element_size,
                                 const CornerRadii& radii) {
@@ -155,6 +166,11 @@ void GradientQuadRenderer::Draw(const gfx::Transform& model_view_proj_matrix,
   SetColorUniform(edge_color_handle_, edge_color);
   SetColorUniform(center_color_handle_, center_color);
   glUniform1f(opacity_handle_, opacity);
+  glUniform1f(aspect_ratio_handle_,
+              element_size.width() / element_size.height());
+
+  glUniform2f(center_position_handle_, center_position.x(),
+              center_position.y());
 
   // Pass in model view project matrix.
   glUniformMatrix4fv(model_view_proj_matrix_handle_, 1, false,

chrome/browser/vr/renderers/gradient_quad_renderer.h

@@ -8,6 +8,7 @@
 #include "base/macros.h"
 #include "chrome/browser/vr/renderers/base_renderer.h"
 #include "third_party/skia/include/core/SkColor.h"
+#include "ui/gfx/geometry/point_f.h"
 
 namespace gfx {
 class SizeF;
@@ -26,6 +27,7 @@ class GradientQuadRenderer : public BaseRenderer {
   void Draw(const gfx::Transform& model_view_proj_matrix,
             SkColor edge_color,
             SkColor center_color,
+            const gfx::PointF& center_position,
             float opacity,
             const gfx::SizeF& element_size,
             const CornerRadii& radii);
@@ -41,6 +43,8 @@ class GradientQuadRenderer : public BaseRenderer {
   GLuint opacity_handle_;
   GLuint center_color_handle_;
   GLuint edge_color_handle_;
+  GLuint aspect_ratio_handle_;
+  GLuint center_position_handle_;
 
   DISALLOW_COPY_AND_ASSIGN(GradientQuadRenderer);
 };

chrome/browser/vr/test/fake_ui_element_renderer.cc

@@ -27,6 +27,7 @@ void FakeUiElementRenderer::DrawGradientQuad(
     const gfx::Transform& view_proj_matrix,
     const SkColor edge_color,
     const SkColor center_color,
+    const gfx::PointF& center_point,
     float opacity,
     const gfx::SizeF& element_size,
     const CornerRadii& corner_radii) {

chrome/browser/vr/test/fake_ui_element_renderer.h

@@ -29,6 +29,7 @@ class FakeUiElementRenderer : public UiElementRenderer {
   void DrawGradientQuad(const gfx::Transform& view_proj_matrix,
                         const SkColor edge_color,
                         const SkColor center_color,
+                        const gfx::PointF& center_point,
                         float opacity,
                         const gfx::SizeF& element_size,
                         const CornerRadii& corner_radii) override;

chrome/browser/vr/ui_element_renderer.cc

@@ -77,13 +77,15 @@ void UiElementRenderer::DrawGradientQuad(
     const gfx::Transform& model_view_proj_matrix,
     const SkColor edge_color,
     const SkColor center_color,
+    const gfx::PointF& center_position,
     float opacity,
     const gfx::SizeF& element_size,
     const CornerRadii& radii) {
   TRACE_EVENT0("gpu", "UiElementRenderer::DrawGradientQuad");
   FlushIfNecessary(gradient_quad_renderer_.get());
   gradient_quad_renderer_->Draw(model_view_proj_matrix, edge_color,
-                                center_color, opacity, element_size, radii);
+                                center_color, center_position, opacity,
+                                element_size, radii);
 }
 
 void UiElementRenderer::DrawGradientGridQuad(

chrome/browser/vr/ui_element_renderer.h

@@ -70,6 +70,7 @@ class UiElementRenderer {
       const gfx::Transform& model_view_proj_matrix,
       const SkColor edge_color,
       const SkColor center_color,
+      const gfx::PointF& center_position,
       float opacity,
       const gfx::SizeF& element_size,
       const CornerRadii& radii);