Merge branch 'develop'

# Conflicts:
#	appveyor.yml
#	readme.md

Babylon.Blazor.App/BabylonBlazorApp.csproj

@@ -23,4 +23,10 @@
     <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Update="wwwroot\textures\player.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
+
 </Project>

Babylon.Blazor.App/Custom/SpriteExampleSceneCreator.cs

@@ -0,0 +1,109 @@
+using System;
+using System.Diagnostics;
+using System.Threading.Tasks;
+
+using Babylon.Blazor;
+using Babylon.Blazor.Babylon;
+using Babylon.Blazor.Babylon.Parameters;
+
+using Microsoft.JSInterop;
+
+namespace BabylonBlazorApp.Custom
+{
+    public class SpriteExampleSceneCreator : SceneCreator
+    {
+        public event EventHandler AnimationEnd;
+        private readonly MessageUpdateInvokeHelper? _messageUpdateInvokeHelper;
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="SceneCreator"/> class.
+        /// </summary>
+        /// <param name="babylonInstance">The babylon instance.</param>
+        /// <param name="canvasId">The canvas identifier.</param>
+        public SpriteExampleSceneCreator(BabylonInstance babylonInstance, string canvasId)
+            : base(babylonInstance, canvasId)
+        {
+            _messageUpdateInvokeHelper = new MessageUpdateInvokeHelper(UpdateMessage);
+        }
+
+        /// <summary>
+        /// Creates the asynchronous.
+        /// </summary>
+        /// <param name="canvas">The canvas.</param>
+        /// <returns>Task.</returns>
+        public override async Task CreateAsync(BabylonCanvasBase canvas)
+        {
+            Engine engine = await BabylonInstance.CreateEngine(CanvasId, true);
+            Scene scene = await engine.CreateScene();
+
+            //set rotation center
+            var cameraTarget = await BabylonInstance.CreateVector3(0, 0, 0);
+            //set camera
+            //var camera = await scene.CreateArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 10, cameraTarget, CanvasId);
+            double absolutMax = 10;
+            var camera = await scene.CreateArcRotateCamera("Camera", - Math.PI / 2,  Math.PI / 2, 4, cameraTarget, CanvasId);
+            //var hemisphericLightDirection = await BabylonInstance.CreateVector3(1, 1, 0);
+            //var light1 = await scene.CreateHemispehericLight("light1", hemisphericLightDirection, 0.98);
+
+            SpriteManager spriteManagerPlayers = await scene.CreateSpriteManager("playerManager",
+                                                                          "https://playground.babylonjs.com/textures/player.png",
+                                                                          3,
+                                                                          64,
+                                                                          64
+                                                                          );
+            var player0 = await spriteManagerPlayers.CreateSprite("player0");
+
+            await player0.PlayAnimation(0, 40, false, 100, DotNetObjectReference.Create(_messageUpdateInvokeHelper));
+
+            var player1 = await spriteManagerPlayers.CreateSprite("player1");
+            await player1.SetFrameNumber(2);
+            var player1Position = await BabylonInstance.CreateVector3(-1, 0.2, 0);
+            await player1.SetPosition(player1Position);
+            await player1.SetSize(0.5,0.5);
+            await player1.SetInvert(true, false);
+
+
+            var spriteManagerTrees = await scene.CreateSpriteManager("treesManager", "https://playground.babylonjs.com/textures/palm.png", 1000, 512,1024 );
+            Random rnd = new Random();
+            //We create some trees at random positions
+            for (var i = 0; i < 200; i++) {
+                var tree = await spriteManagerTrees.CreateSprite("tree");
+                double posX = rnd.NextDouble() * 100 - 50;
+                double posZ = rnd.NextDouble() * 10 - 5;
+                var treePosition = await BabylonInstance.CreateVector3(posX, 0, posZ);
+                await tree.SetPosition(treePosition);
+
+                //Add some "dead" trees
+                if (rnd.NextDouble() > 0.9)
+                {
+                    //tree.angle = Math.PI * 90 / 180;
+                    await tree.SetAngle(Math.PI * 90 / 180);
+                    var treePosition2 = await BabylonInstance.CreateVector3(posX, -0.3, posZ);
+                    await tree.SetPosition(treePosition2);
+                }
+            }
+
+            await RunRender(canvas, camera, engine, scene);
+        }
+
+
+        private async Task RunRender(BabylonCanvasBase canvas, ArcRotateCamera camera, Engine engine, Scene scene)
+        {
+            //await camera.SetAutoRotate(canvas.UseAutoRotate, canvas.IdleRotationSpeed);
+            await BabylonInstance.RunRenderLoop(engine, scene);
+        }
+
+        private void UpdateMessage()
+        {
+           Console.WriteLine("Animation finished");
+           OnAnimationEnd();
+        }
+
+        protected virtual void OnAnimationEnd()
+        {
+            EventHandler handler = AnimationEnd;
+
+            handler?.Invoke(this, EventArgs.Empty);
+        }
+    }
+}

Babylon.Blazor.App/Pages/SpriteExample.razor

@@ -0,0 +1,48 @@
+@page "/sprite1"
+@* single szene solution only *@
+
+@using BabylonBlazorApp.Custom
+@inherits BabylonCanvasBase
+
+<h3>Sprite Example</h3>
+<div>@_message</div>
+<canvas id=@CanvasId touch-action="none"></canvas>
+
+@code {
+
+    /// <summary>
+    /// Initializes the szene.
+    /// </summary>
+    /// <param name="babylonInstance">The babylon instance.</param>
+    /// <param name="canvasId">The canvas identifier.</param>
+    protected override async Task InitializeSzene(BabylonInstance babylonInstance, string canvasId)
+    {
+        RecreateControlAfterRefresh = false;
+
+        //don't use base init 
+        //await base.InitializeSzene(babylonInstance, canvasId);
+
+        SpriteExampleSceneCreator creator = new SpriteExampleSceneCreator(babylonInstance, canvasId);
+
+        creator.AnimationEnd += OnAnimationFinished;
+
+        await creator.CreateAsync(this);
+    }
+
+    /// <summary>
+    /// Returns a flag to indicate whether the component should render.
+    /// </summary>
+    /// <returns><c>true</c> if XXXX, <c>false</c> otherwise.</returns>
+    protected override bool ShouldRender()
+    {
+        return base.ShouldRender();
+    }
+
+    private void OnAnimationFinished(object sender, EventArgs e)
+    {
+        InvokeAsync(() => { _message = "Animation finished"; StateHasChanged();});
+    }
+
+    private string? _message = "Animation running";
+
+}

Babylon.Blazor.App/Shared/NavMenu.razor

@@ -32,6 +32,11 @@
                 <span class="oi oi-code" aria-hidden="true"></span> Drawing test
             </NavLink>
         </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="sprite1">
+                <span class="oi oi-code" aria-hidden="true"></span> Sprite Example
+            </NavLink>
+        </li>
     </ul>
 </div>
 

Babylon.Blazor.Lib/Babylon/Scene.cs

@@ -74,19 +74,7 @@ public async Task<Mesh> CreateBox(string name, MeshParameters parameters)
                              JsObjRef);
             return new Mesh(jsMesh, BabylonInstance);
         }
-        public async Task<Mesh> CreateTorus(string name, MeshParameters parameters)
-        {
-            //var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
-            var jsMesh = await BabylonInstance.InvokeAsync<IJSObjectReference>(
-                             "createTorus",
-                             name,
-                             parameters.Options.Data,
-                             parameters.Rotation?.JsObjRef,
-                             parameters.Position?.JsObjRef,
-                             JsObjRef);
-            return new Mesh(jsMesh, BabylonInstance);
-        }
-
+
         /// <summary>
         /// Creates the cylinder.
         /// </summary>
@@ -210,6 +198,27 @@ public async Task<Mesh> CreateSphere(string name, MeshParameters parameters)
             return new Mesh(jsMesh, BabylonInstance);
         }
 
+        /// <summary>
+        /// Creates the sprite manager.
+        /// </summary>
+        /// <param name="name">The name. Manager name</param>
+        /// <param name="url">The URL. path to the image/spritesheet url</param>
+        /// <param name="capacity">The capacity. Maximum number of sprite instances in this manager</param>
+        /// <param name="width">The width. Width of a sprite or a cell within a spritesheet.</param>
+        /// <param name="height">The height. Height of a sprite or a cell within a spritesheet</param>
+        /// <returns>SpriteManager.</returns>
+        public async Task<SpriteManager> CreateSpriteManager(string name, string url, int capacity, int width, int height)
+        {
+            var jsMesh = await BabylonInstance.InvokeAsync<IJSObjectReference>(
+                             "сreateSpriteManager",
+                             name,
+                             url,
+                             capacity,
+                             width, height,
+                             JsObjRef);
+            return new SpriteManager(jsMesh, BabylonInstance);
+        }
+
         /// <summary>
         /// Creates the text plane.
         /// </summary>
@@ -231,6 +240,19 @@ public async Task<Mesh> CreateTextPlane(Vector3 position, string text, Color3 te
             return new Mesh(jsMesh, BabylonInstance);
         }
 
+        public async Task<Mesh> CreateTorus(string name, MeshParameters parameters)
+        {
+            //var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
+            var jsMesh = await BabylonInstance.InvokeAsync<IJSObjectReference>(
+                             "createTorus",
+                             name,
+                             parameters.Options.Data,
+                             parameters.Rotation?.JsObjRef,
+                             parameters.Position?.JsObjRef,
+                             JsObjRef);
+            return new Mesh(jsMesh, BabylonInstance);
+        }
+
         /// <summary>
         /// Creates the tube.
         /// </summary>

Babylon.Blazor.Lib/Babylon/Sprite.cs

@@ -0,0 +1,93 @@
+#nullable enable
+using System.Threading.Tasks;
+
+using Microsoft.JSInterop;
+
+namespace Babylon.Blazor.Babylon
+{
+    public class Sprite : BabylonObject, IJsLibInstanceGetter
+    {
+        public Sprite(IJSObjectReference jsObjRef, IJSInProcessObjectReference babylonInstance)
+            : base(jsObjRef)
+        {
+            BabylonInstance = babylonInstance;
+        }
+
+        public async Task PlayAnimation(
+            int fromKey,
+            int toKey,
+            bool isInLoop,
+            int startDelayMs,
+            DotNetObjectReference<MessageUpdateInvokeHelper>? onAnimationEndObjRef=null)
+        {
+            await BabylonInstance.InvokeVoidAsync(
+                "playAnimation",
+                fromKey,
+                toKey,
+                isInLoop,
+                startDelayMs, 
+                onAnimationEndObjRef,
+                JsObjRef);
+        }
+
+        public async Task SetPickable(bool pickable)
+        {
+            await BabylonInstance.InvokeVoidAsync(
+                "setPickable",
+                pickable,
+                JsObjRef);
+        }
+
+        public async Task SetPosition(Vector3 position)
+        {
+            await BabylonInstance.InvokeVoidAsync(
+                "setPosition",
+                position.JsObjRef,
+                JsObjRef);
+        }
+
+        public async Task SetInvert(bool invertU, bool invertV)
+        {
+            await BabylonInstance.InvokeVoidAsync(
+                "setInvert",
+                invertU, 
+                invertV,
+                JsObjRef);
+        }
+        /// <summary>
+        /// Sets the size.
+        /// </summary>
+        /// <param name="height">The height. 0..1</param>
+        /// <param name="width">The width. 0..1</param>
+        public async Task SetSize(double height, double width)
+        {
+            await BabylonInstance.InvokeVoidAsync(
+                "setSize",
+                height,
+                width,
+                JsObjRef);
+        }
+
+        public async Task SetFrameNumber(int frameNumber)
+        {
+            await BabylonInstance.InvokeVoidAsync(
+                "setFrameNumber",
+                frameNumber,
+                JsObjRef);
+        }
+
+        /// <summary>
+        /// Gets the babylon instance.
+        /// </summary>
+        /// <value>The babylon instance.</value>
+        public IJSInProcessObjectReference BabylonInstance { get; }
+
+        public async Task SetAngle(double angleRadian)
+        {
+            await BabylonInstance.InvokeVoidAsync(
+                "setAngle",
+                angleRadian,
+                JsObjRef);
+        }
+    }
+}

Babylon.Blazor.Lib/Babylon/SpriteManager.cs

@@ -0,0 +1,35 @@
+using System.Threading.Tasks;
+
+using Microsoft.JSInterop;
+
+namespace Babylon.Blazor.Babylon
+{
+    public class SpriteManager : BabylonObject, IJsLibInstanceGetter
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="SpriteManager"/> class.
+        /// </summary>
+        /// <param name="jsObjRef">The js object reference.</param>
+        /// <param name="babylonInstance">The babylon instance.</param>
+        public SpriteManager(IJSObjectReference jsObjRef, IJSInProcessObjectReference babylonInstance)
+            : base(jsObjRef)
+        {
+            BabylonInstance = babylonInstance;
+        }
+
+        public async Task<Sprite> CreateSprite(string name)
+        {
+            var sprite = await BabylonInstance.InvokeAsync<IJSObjectReference>(
+                             "сreateSprite",
+                             name,
+                             JsObjRef);
+            return new Sprite(sprite, BabylonInstance);
+        }
+
+        /// <summary>
+        /// Gets the babylon instance.
+        /// </summary>
+        /// <value>The babylon instance.</value>
+        public IJSInProcessObjectReference BabylonInstance { get; }
+    }
+}

Babylon.Blazor.Lib/BabylonCanvasBase.cs

@@ -115,7 +115,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         protected override bool ShouldRender()
         {
             //Console.WriteLine("*ShouldRender*");
-            _reRender = true;
+            _reRender = RecreateControlAfterRefresh;
             return base.ShouldRender();
         }
 
@@ -148,6 +148,8 @@ protected override bool ShouldRender()
         [Parameter]
         public bool UseAutoRotate { get; set; } = true;
 
+        public bool RecreateControlAfterRefresh { get; set; } = true;
+
         /// <summary>
         /// Gets the babylon instance.
         /// </summary>