[gui] GGUI initial alpha transparency support (#3592)

* ggui transparency prototype

* particles

* blend func

* Auto Format

Co-authored-by: Taichi Gardener <taichigardener@gmail.com>

python/taichi/examples/ggui_examples/mpm3d_ggui.py

@@ -35,8 +35,8 @@
                     shape=n_particles)  # deformation gradient
 Jp = ti.field(float, n_particles)
 
-colors = ti.Vector.field(3, float, n_particles)
-colors_random = ti.Vector.field(3, float, n_particles)
+colors = ti.Vector.field(4, float, n_particles)
+colors_random = ti.Vector.field(4, float, n_particles)
 materials = ti.field(int, n_particles)
 grid_v = ti.Vector.field(dim, float, (n_grid, ) * dim)
 grid_m = ti.field(float, (n_grid, ) * dim)
@@ -155,7 +155,9 @@ def init_cube_vol(first_par: int, last_par: int, x_begin: float,
         F[i] = ti.Matrix([[1, 0, 0], [0, 1, 0], [0, 0, 1]])
         v[i] = ti.Vector([0.0, 0.0, 0.0])
         materials[i] = material
-        colors_random[i] = ti.Vector([ti.random(), ti.random(), ti.random()])
+        colors_random[i] = ti.Vector(
+            [ti.random(), ti.random(),
+             ti.random(), ti.random()])
         used[i] = 1
 
 
@@ -199,7 +201,7 @@ def set_color_by_material(material_colors: ti.ext_arr()):
         mat = materials[i]
         colors[i] = ti.Vector([
             material_colors[mat, 0], material_colors[mat, 1],
-            material_colors[mat, 2]
+            material_colors[mat, 2], 1.0
         ])
 
 

python/taichi/shaders/Circles_vk.vert

@@ -3,7 +3,7 @@
 layout(location = 0) in vec3 in_position;
 layout(location = 1) in vec3 in_normal;
 layout(location = 2) in vec2 in_texcoord;
-layout(location = 3) in vec3 in_color;
+layout(location = 3) in vec4 in_color;
 
 layout(binding = 0) uniform UBO {
   vec3 color;
@@ -25,6 +25,6 @@ void main() {
   if (ubo.use_per_vertex_color == 0) {
     selected_color = ubo.color;
   } else {
-    selected_color = in_color;
+    selected_color = in_color.rgb;
   }
 }

python/taichi/shaders/Lines_vk.vert

@@ -3,7 +3,7 @@
 layout(location = 0) in vec3 in_position;
 layout(location = 1) in vec3 in_normal;
 layout(location = 2) in vec2 in_texcoord;
-layout(location = 3) in vec3 in_color;
+layout(location = 3) in vec4 in_color;
 
 layout(location = 0) out vec2 frag_texcoord;
 
@@ -25,6 +25,6 @@ void main() {
   if (ubo.use_per_vertex_color == 0) {
     selected_color = ubo.color;
   } else {
-    selected_color = in_color;
+    selected_color = in_color.rgb;
   }
 }

python/taichi/shaders/Mesh_vk.frag

@@ -32,10 +32,10 @@ layout(binding = 1, std430) buffer SSBO {
 }
 ssbo;
 
-layout(location = 3) in vec3 selected_color;
+layout(location = 3) in vec4 selected_color;
 
 vec3 lambertian() {
-  vec3 ambient = ubo.scene.ambient_light * selected_color;
+  vec3 ambient = ubo.scene.ambient_light * selected_color.rgb;
   vec3 result = ambient;
 
   for (int i = 0; i < ubo.scene.point_light_count; ++i) {
@@ -50,13 +50,13 @@ vec3 lambertian() {
     else{
       factor = max(dot(light_dir, normal), 0);
     }
-    vec3 diffuse = factor * selected_color * light_color;
+    vec3 diffuse = factor * selected_color.rgb * light_color;
     result += diffuse;
   }
 
   return result;
 }
 
 void main() {
-  out_color = vec4(lambertian(), 1);
+  out_color = vec4(lambertian(), selected_color.a);
 }

python/taichi/shaders/Mesh_vk.vert

@@ -3,12 +3,12 @@
 layout(location = 0) in vec3 in_position;
 layout(location = 1) in vec3 in_normal;
 layout(location = 2) in vec2 in_texcoord;
-layout(location = 3) in vec3 in_color;
+layout(location = 3) in vec4 in_color;
 
 layout(location = 0) out vec3 frag_pos;
 layout(location = 1) out vec3 frag_normal;
 layout(location = 2) out vec2 frag_texcoord;
-layout(location = 3) out vec3 selected_color;
+layout(location = 3) out vec4 selected_color;
 
 struct SceneUBO {
   vec3 camera_pos;
@@ -39,7 +39,7 @@ void main() {
   frag_normal = in_normal;
 
   if (ubo.use_per_vertex_color == 0) {
-    selected_color = ubo.color;
+    selected_color = vec4(ubo.color, 1.0);
   } else {
     selected_color = in_color;
   }

python/taichi/shaders/Particles_vk.frag

@@ -32,7 +32,7 @@ ssbo;
 layout(location = 0) out vec4 out_color;
 
 layout(location = 0) in vec4 pos_camera_space;
-layout(location = 1) in vec3 selected_color;
+layout(location = 1) in vec4 selected_color;
 
 float project_z(float view_z) {
   vec4 projected = ubo.scene.projection * vec4(0, 0, view_z, 1);
@@ -46,7 +46,7 @@ vec3 to_camera_space(vec3 pos) {
 
 // operates in camera space !!
 vec3 lambertian(vec3 frag_pos, vec3 frag_normal) {
-  vec3 ambient = ubo.scene.ambient_light * selected_color;
+  vec3 ambient = ubo.scene.ambient_light * selected_color.rgb;
   vec3 result = ambient;
 
   for (int i = 0; i < ubo.scene.point_light_count; ++i) {
@@ -56,7 +56,7 @@ vec3 lambertian(vec3 frag_pos, vec3 frag_normal) {
         normalize(to_camera_space(ssbo.point_lights[i].pos) - frag_pos);
     vec3 normal = normalize(frag_normal);
     vec3 diffuse =
-        max(dot(light_dir, normal), 0.0) * selected_color * light_color;
+        max(dot(light_dir, normal), 0.0) * selected_color.rgb * light_color;
 
     result += diffuse;
   }
@@ -80,7 +80,7 @@ void main() {
       pos_camera_space.xyz / pos_camera_space.w + coord_in_sphere * ubo.radius;
   vec3 frag_normal = coord_in_sphere;
   vec3 color = lambertian(frag_pos, frag_normal);
-  out_color = vec4(color, 1.0);
+  out_color = vec4(color, selected_color.a);
 
   float depth =
       (pos_camera_space.z / pos_camera_space.w) + z_in_sphere * ubo.radius;

python/taichi/shaders/Particles_vk.vert

@@ -3,7 +3,7 @@
 layout(location = 0) in vec3 in_position;
 layout(location = 1) in vec3 in_normal;
 layout(location = 2) in vec2 in_texcoord;
-layout(location = 3) in vec3 in_color;
+layout(location = 3) in vec4 in_color;
 
 struct SceneUBO {
   vec3 camera_pos;
@@ -25,7 +25,7 @@ layout(binding = 0) uniform UBO {
 ubo;
 
 layout(location = 0) out vec4 pos_camera_space;
-layout(location = 1) out vec3 selected_color;
+layout(location = 1) out vec4 selected_color;
 
 void main() {
   float distance = length(in_position - ubo.scene.camera_pos);
@@ -38,7 +38,7 @@ void main() {
   gl_Position.y *= -1;
 
   if (ubo.use_per_vertex_color == 0) {
-    selected_color = ubo.color;
+    selected_color = vec4(ubo.color, 1.0);
   } else {
     selected_color = in_color;
   }

python/taichi/shaders/SetImage_vk.vert

@@ -5,7 +5,7 @@
 layout(location = 0) in vec3 in_position;
 layout(location = 1) in vec3 in_normal;
 layout(location = 2) in vec2 in_texcoord;
-layout(location = 3) in vec3 in_color;
+layout(location = 3) in vec4 in_color;
 
 layout(location = 0) out vec2 frag_texcoord;
 

python/taichi/shaders/Triangles_vk.vert

@@ -3,7 +3,7 @@
 layout(location = 0) in vec3 in_position;
 layout(location = 1) in vec3 in_normal;
 layout(location = 2) in vec2 in_texcoord;
-layout(location = 3) in vec3 in_color;
+layout(location = 3) in vec4 in_color;
 
 layout(location = 0) out vec2 frag_texcoord;
 layout(location = 1) out vec3 selected_color;
@@ -24,6 +24,6 @@ void main() {
   if (ubo.use_per_vertex_color == 0) {
     selected_color = ubo.color;
   } else {
-    selected_color = in_color;
+    selected_color = in_color.rgb;
   }
 }

python/taichi/ui/staging_buffer.py

@@ -14,7 +14,7 @@ def get_vbo_field(vertices):
         pos = 3
         normal = 3
         tex_coord = 2
-        color = 3
+        color = 4
         vertex_stride = pos + normal + tex_coord + color
         vbo = Vector.field(vertex_stride, f32, shape=(N, ))
         vbo_field_cache[vertices] = vbo
@@ -30,6 +30,14 @@ def copy_to_vbo(vbo: template(), src: template(), offset: template(),
             vbo[i][offset + c] = src[i][c]
 
 
+@kernel
+def fill_vbo(vbo: template(), value: template(), offset: template(),
+             num_components: template()):
+    for i in vbo:
+        for c in ti.static(range(num_components)):
+            vbo[i][offset + c] = value
+
+
 def validate_input_field(f, name):
     if f.dtype != f32:
         raise Exception(f"{name} needs to have dtype f32")
@@ -66,9 +74,11 @@ def copy_texcoords_to_vbo(vbo, texcoords):
 
 def copy_colors_to_vbo(vbo, colors):
     validate_input_field(colors, "colors")
-    if colors.n != 3:
-        raise Exception(f'colors can only be 3D vector fields')
+    if colors.n != 3 and colors.n != 4:
+        raise Exception(f'colors can only be 3D/4D vector fields')
     copy_to_vbo(vbo, colors, 8, colors.n)
+    if colors.n == 3:
+        fill_vbo(vbo, 1.0, 11, 1)
 
 
 @ti.kernel

taichi/backends/vulkan/vulkan_device.cpp

@@ -165,7 +165,15 @@ vkapi::IVkPipeline VulkanPipeline::graphics_pipeline(
     blend_attachments[i].colorWriteMask =
         VK_COLOR_COMPONENT_R_BIT | VK_COLOR_COMPONENT_G_BIT |
         VK_COLOR_COMPONENT_B_BIT | VK_COLOR_COMPONENT_A_BIT;
-    blend_attachments[i].blendEnable = VK_FALSE;
+    blend_attachments[i].blendEnable = VK_TRUE;
+    blend_attachments[i].srcColorBlendFactor = VK_BLEND_FACTOR_SRC_ALPHA;
+    blend_attachments[i].dstColorBlendFactor =
+        VK_BLEND_FACTOR_ONE_MINUS_SRC_ALPHA;
+    blend_attachments[i].colorBlendOp = VK_BLEND_OP_ADD;
+    blend_attachments[i].srcAlphaBlendFactor = VK_BLEND_FACTOR_SRC_ALPHA;
+    blend_attachments[i].dstAlphaBlendFactor =
+        VK_BLEND_FACTOR_ONE_MINUS_SRC_ALPHA;
+    blend_attachments[i].alphaBlendOp = VK_BLEND_OP_ADD;
   }
 
   graphics_pipeline_template_->color_blending.attachmentCount =

taichi/ui/backends/vulkan/renderable.cpp

@@ -135,7 +135,7 @@ void Renderable::create_graphics_pipeline() {
       {0, 0, BufferFormat::rgb32f, offsetof(Vertex, pos)},
       {1, 0, BufferFormat::rgb32f, offsetof(Vertex, normal)},
       {2, 0, BufferFormat::rg32f, offsetof(Vertex, texCoord)},
-      {3, 0, BufferFormat::rgb32f, offsetof(Vertex, color)}};
+      {3, 0, BufferFormat::rgba32f, offsetof(Vertex, color)}};
 
   pipeline_ = app_context_->device().create_raster_pipeline(
       source, raster_params, vertex_inputs, vertex_attribs);

taichi/ui/backends/vulkan/vertex.h

@@ -9,14 +9,20 @@ struct Vertex {
     float y;
     float z;
   };
+  struct vec4 {
+    float x;
+    float y;
+    float z;
+    float w;
+  };
   struct vec2 {
     float x;
     float y;
   };
   vec3 pos;
   vec3 normal;
   vec2 texCoord;
-  vec3 color;
+  vec4 color;
 };
 
 }  // namespace ui