From 26e7389e385f0742b1757ccf15688c5985486aba Mon Sep 17 00:00:00 2001
From: Johan Klokkhammer Helsing <johanhelsing@gmail.com>
Date: Fri, 20 May 2022 19:04:48 +0200
Subject: [PATCH 1/2] Make animate_shader example work on WASM

Previously, it would draw nothing and complain with the following
console warnings:

Firefox:

WebGL warning: drawElementsInstanced: Buffer for uniform block is smaller than UNIFORM_BLOCK_DATA_SIZE

Chrome:

[.WebGL-00003B081B72A300] GL_INVALID_OPERATION: It is undefined behaviour to use a uniform buffer that is too small.

Issue: #4813
---
 examples/shader/animate_shader.rs | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/examples/shader/animate_shader.rs b/examples/shader/animate_shader.rs
index dd46d6293d985..8dcf2a7596b0a 100644
--- a/examples/shader/animate_shader.rs
+++ b/examples/shader/animate_shader.rs
@@ -16,7 +16,10 @@ use bevy::{
             AddRenderCommand, DrawFunctions, EntityRenderCommand, RenderCommandResult, RenderPhase,
             SetItemPipeline, TrackedRenderPass,
         },
-        render_resource::*,
+        render_resource::{
+            std140::{AsStd140, Std140},
+            *,
+        },
         renderer::{RenderDevice, RenderQueue},
         view::{ComputedVisibility, ExtractedView, Msaa, Visibility},
         RenderApp, RenderStage,
@@ -59,7 +62,7 @@ impl Plugin for CustomMaterialPlugin {
         let render_device = app.world.resource::<RenderDevice>();
         let buffer = render_device.create_buffer(&BufferDescriptor {
             label: Some("time uniform buffer"),
-            size: std::mem::size_of::<f32>() as u64,
+            size: TimeUniform::std140_size_static() as u64,
             usage: BufferUsages::UNIFORM | BufferUsages::COPY_DST,
             mapped_at_creation: false,
         });
@@ -133,14 +136,14 @@ fn queue_custom(
     }
 }
 
-#[derive(Default)]
-struct ExtractedTime {
+#[derive(Default, Clone, AsStd140)]
+struct TimeUniform {
     seconds_since_startup: f32,
 }
 
 // extract the passed time into a resource in the render world
 fn extract_time(mut commands: Commands, time: Res<Time>) {
-    commands.insert_resource(ExtractedTime {
+    commands.insert_resource(TimeUniform {
         seconds_since_startup: time.seconds_since_startup() as f32,
     });
 }
@@ -152,15 +155,11 @@ struct TimeMeta {
 
 // write the extracted time into the corresponding uniform buffer
 fn prepare_time(
-    time: Res<ExtractedTime>,
+    time: Res<TimeUniform>,
     time_meta: ResMut<TimeMeta>,
     render_queue: Res<RenderQueue>,
 ) {
-    render_queue.write_buffer(
-        &time_meta.buffer,
-        0,
-        bevy::core::cast_slice(&[time.seconds_since_startup]),
-    );
+    render_queue.write_buffer(&time_meta.buffer, 0, time.as_std140().as_bytes());
 }
 
 // create a bind group for the time uniform buffer
@@ -202,7 +201,7 @@ impl FromWorld for CustomPipeline {
                     ty: BindingType::Buffer {
                         ty: BufferBindingType::Uniform,
                         has_dynamic_offset: false,
-                        min_binding_size: BufferSize::new(std::mem::size_of::<f32>() as u64),
+                        min_binding_size: BufferSize::new(TimeUniform::std140_size_static() as u64),
                     },
                     count: None,
                 }],

From 67aad4607c35a2bf5d1c71f3b98169cea8dc8bde Mon Sep 17 00:00:00 2001
From: Johan Klokkhammer Helsing <johanhelsing@gmail.com>
Date: Sat, 21 May 2022 10:04:38 +0200
Subject: [PATCH 2/2] Adopt animate_shader after encase migration

Use ShaderType/UniformBuffer
---
 examples/shader/animate_shader.rs | 35 ++++++++++++-------------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/examples/shader/animate_shader.rs b/examples/shader/animate_shader.rs
index 8dcf2a7596b0a..6226395da707a 100644
--- a/examples/shader/animate_shader.rs
+++ b/examples/shader/animate_shader.rs
@@ -16,10 +16,7 @@ use bevy::{
             AddRenderCommand, DrawFunctions, EntityRenderCommand, RenderCommandResult, RenderPhase,
             SetItemPipeline, TrackedRenderPass,
         },
-        render_resource::{
-            std140::{AsStd140, Std140},
-            *,
-        },
+        render_resource::*,
         renderer::{RenderDevice, RenderQueue},
         view::{ComputedVisibility, ExtractedView, Msaa, Visibility},
         RenderApp, RenderStage,
@@ -59,20 +56,9 @@ pub struct CustomMaterialPlugin;
 
 impl Plugin for CustomMaterialPlugin {
     fn build(&self, app: &mut App) {
-        let render_device = app.world.resource::<RenderDevice>();
-        let buffer = render_device.create_buffer(&BufferDescriptor {
-            label: Some("time uniform buffer"),
-            size: TimeUniform::std140_size_static() as u64,
-            usage: BufferUsages::UNIFORM | BufferUsages::COPY_DST,
-            mapped_at_creation: false,
-        });
-
         app.sub_app_mut(RenderApp)
             .add_render_command::<Transparent3d, DrawCustom>()
-            .insert_resource(TimeMeta {
-                buffer,
-                bind_group: None,
-            })
+            .init_resource::<TimeMeta>()
             .init_resource::<CustomPipeline>()
             .init_resource::<SpecializedMeshPipelines<CustomPipeline>>()
             .add_system_to_stage(RenderStage::Extract, extract_time)
@@ -136,8 +122,10 @@ fn queue_custom(
     }
 }
 
-#[derive(Default, Clone, AsStd140)]
+#[derive(Default, Clone, ShaderType)]
 struct TimeUniform {
+    // on WebGL, uniforms need to be at least 16 bytes wide
+    #[align(16)]
     seconds_since_startup: f32,
 }
 
@@ -148,18 +136,21 @@ fn extract_time(mut commands: Commands, time: Res<Time>) {
     });
 }
 
+#[derive(Default)]
 struct TimeMeta {
-    buffer: Buffer,
+    buffer: UniformBuffer<TimeUniform>,
     bind_group: Option<BindGroup>,
 }
 
 // write the extracted time into the corresponding uniform buffer
 fn prepare_time(
     time: Res<TimeUniform>,
-    time_meta: ResMut<TimeMeta>,
+    mut time_meta: ResMut<TimeMeta>,
+    render_device: Res<RenderDevice>,
     render_queue: Res<RenderQueue>,
 ) {
-    render_queue.write_buffer(&time_meta.buffer, 0, time.as_std140().as_bytes());
+    time_meta.buffer.set(time.clone());
+    time_meta.buffer.write_buffer(&render_device, &render_queue);
 }
 
 // create a bind group for the time uniform buffer
@@ -173,7 +164,7 @@ fn queue_time_bind_group(
         layout: &pipeline.time_bind_group_layout,
         entries: &[BindGroupEntry {
             binding: 0,
-            resource: time_meta.buffer.as_entire_binding(),
+            resource: time_meta.buffer.binding().unwrap(),
         }],
     });
     time_meta.bind_group = Some(bind_group);
@@ -201,7 +192,7 @@ impl FromWorld for CustomPipeline {
                     ty: BindingType::Buffer {
                         ty: BufferBindingType::Uniform,
                         has_dynamic_offset: false,
-                        min_binding_size: BufferSize::new(TimeUniform::std140_size_static() as u64),
+                        min_binding_size: Some(TimeUniform::min_size()),
                     },
                     count: None,
                 }],