[Community] [3D Sprite] Fix 3D sprites being rendered all black (#1577)

Author: D8H

extensions/community/Sprite3D.json

@@ -2,14 +2,14 @@
   "author": "",
   "category": "General",
   "extensionNamespace": "",
-  "gdevelopVersion": ">=5.5.222",
   "fullName": "3D sprite",
+  "gdevelopVersion": ">=5.5.222",
   "helpPath": "/objects/sprite/",
   "iconUrl": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0ibWRpLWdob3N0LW91dGxpbmUiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMkM3LjAzIDIgMyA2LjAzIDMgMTFWMjJMNiAxOUw5IDIyTDEyIDE5TDE1IDIyTDE4IDE5TDIxIDIyVjExQzIxIDYuMDMgMTYuOTcgMiAxMiAyTTE5IDE3LjE3TDE4IDE2LjE3TDE2LjU5IDE3LjU5TDE1IDE5LjE3TDEzLjQxIDE3LjU5TDEyIDE2LjE3TDEwLjU5IDE3LjU5TDkgMTkuMTdMNy40MSAxNy41OUw2IDE2LjE3TDUgMTcuMTdWMTFDNSA3LjE0IDguMTQgNCAxMiA0UzE5IDcuMTQgMTkgMTFWMTcuMTdNMTEgMTBDMTEgMTEuMTEgMTAuMTEgMTIgOSAxMlM3IDExLjExIDcgMTAgNy45IDggOSA4IDExIDguOSAxMSAxME0xNyAxMEMxNyAxMS4xMSAxNi4xMSAxMiAxNSAxMlMxMyAxMS4xMSAxMyAxMCAxMy45IDggMTUgOCAxNyA4LjkgMTcgMTBaIiAvPjwvc3ZnPg==",
   "name": "Sprite3D",
   "previewIconUrl": "https://asset-resources.gdevelop.io/public-resources/Icons/3bd33ec77ed20d3f631c6c92884728b375aa2879174bc9f289c864d0e0383d59_ghost-outline.svg",
   "shortDescription": "An animated sprite in 3D.",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "The 3D sprite is an object that can be moved and rotated in 3D.",
   "origin": {
     "identifier": "Sprite3D",
@@ -40,6 +40,8 @@
             "    return;",
             "}",
             "",
+            "const vertexColors = [];",
+            "",
             "class Sprite3DRenderer {",
             "    /** @type {gdjs.CustomRuntimeObject} */",
             "    object;",
@@ -51,14 +53,22 @@
             "     */",
             "    constructor(object) {",
             "        this.object = object;",
-            "        ",
+            "",
             "        const geometry = new THREE.PlaneGeometry(1, -1);",
             "        const animationFrame = object.getAnimator().getCurrentFrame();",
             "        if (animationFrame) {",
             "            const material = animationFrame.texture;",
             "            this.mesh = new THREE.Mesh(geometry, material);",
             "            this.mesh.rotation.order = 'ZYX';",
             "            object.get3DRendererObject().add(this.mesh);",
+            "            // Ensure a forward compatibility when vertexColors will be set to true",
+            "            // in the engine to allow to tint 3D sprites.",
+            "            vertexColors.length = geometry.attributes.position.count * 3;",
+            "            vertexColors.fill(1);",
+            "            geometry.setAttribute(",
+            "                'color',",
+            "                new THREE.BufferAttribute(new Float32Array(vertexColors), 3)",
+            "            );",
             "        }",
             "        this.updateFrame();",
             "        object.getAnimator().setOnFrameChangeCallback(() => this.updateFrame());",
@@ -158,6 +168,42 @@
       "isAnimatable": true,
       "isUsingLegacyInstancesRenderer": true,
       "name": "Sprite3D",
+      "objects": [],
+      "objectsFolderStructure": {
+        "folderName": "__ROOT"
+      },
+      "objectsGroups": [],
+      "layers": [
+        {
+          "ambientLightColorB": 200,
+          "ambientLightColorG": 200,
+          "ambientLightColorR": 200,
+          "camera3DFarPlaneDistance": 10000,
+          "camera3DFieldOfView": 45,
+          "camera3DNearPlaneDistance": 3,
+          "cameraType": "",
+          "followBaseLayerCamera": false,
+          "isLightingLayer": false,
+          "isLocked": false,
+          "name": "",
+          "renderingType": "",
+          "visibility": true,
+          "cameras": [
+            {
+              "defaultSize": true,
+              "defaultViewport": true,
+              "height": 0,
+              "viewportBottom": 1,
+              "viewportLeft": 0,
+              "viewportRight": 1,
+              "viewportTop": 0,
+              "width": 0
+            }
+          ],
+          "effects": []
+        }
+      ],
+      "instances": [],
       "eventsFunctions": [
         {
           "fullName": "",
@@ -206,43 +252,7 @@
           "objectGroups": []
         }
       ],
-      "propertyDescriptors": [],
-      "objects": [],
-      "objectsFolderStructure": {
-        "folderName": "__ROOT"
-      },
-      "objectsGroups": [],
-      "layers": [
-        {
-          "ambientLightColorB": 200,
-          "ambientLightColorG": 200,
-          "ambientLightColorR": 200,
-          "camera3DFarPlaneDistance": 10000,
-          "camera3DFieldOfView": 45,
-          "camera3DNearPlaneDistance": 3,
-          "cameraType": "",
-          "followBaseLayerCamera": false,
-          "isLightingLayer": false,
-          "isLocked": false,
-          "name": "",
-          "renderingType": "",
-          "visibility": true,
-          "cameras": [
-            {
-              "defaultSize": true,
-              "defaultViewport": true,
-              "height": 0,
-              "viewportBottom": 1,
-              "viewportLeft": 0,
-              "viewportRight": 1,
-              "viewportTop": 0,
-              "width": 0
-            }
-          ],
-          "effects": []
-        }
-      ],
-      "instances": []
+      "propertyDescriptors": []
     }
   ]
 }