From f609bf2762882f2d1ba06024e83a2bdf26efb90c Mon Sep 17 00:00:00 2001 From: Neyl Date: Wed, 5 Feb 2025 19:00:39 +0100 Subject: [PATCH] Base push for tint experi;ent --- Extensions/3D/Cube3DRuntimeObject.ts | 30 +++++----- .../3D/Cube3DRuntimeObjectPixiRenderer.ts | 18 +++--- Extensions/3D/JsExtension.js | 58 +++++++++---------- .../pixi-renderers/pixi-image-manager.ts | 2 + 4 files changed, 50 insertions(+), 58 deletions(-) diff --git a/Extensions/3D/Cube3DRuntimeObject.ts b/Extensions/3D/Cube3DRuntimeObject.ts index 2c7c859c534b..2edbcb0bb89c 100644 --- a/Extensions/3D/Cube3DRuntimeObject.ts +++ b/Extensions/3D/Cube3DRuntimeObject.ts @@ -24,7 +24,7 @@ namespace gdjs { rightFaceVisible: boolean; topFaceVisible: boolean; bottomFaceVisible: boolean; - color: string; + tint: string; materialType: 'Basic' | 'StandardWithoutMetalness'; }; } @@ -72,7 +72,7 @@ namespace gdjs { ]; _materialType: gdjs.Cube3DRuntimeObject.MaterialType = gdjs.Cube3DRuntimeObject.MaterialType.Basic; - _color: number; + _tint: number; constructor( instanceContainer: gdjs.RuntimeInstanceContainer, objectData: Cube3DObjectData @@ -119,8 +119,8 @@ namespace gdjs { objectData.content.bottomFaceResourceName, ]; - this._color = gdjs.rgbOrHexStringToNumber( - objectData.content.color || '128;128;128' + this._tint = gdjs.rgbOrHexStringToNumber( + objectData.content.tint || '128;128;128' ); this._materialType = this._convertMaterialType( @@ -212,11 +212,11 @@ namespace gdjs { this._faceResourceNames[faceIndex] = resourceName; this._renderer.updateFace(faceIndex); } - setColor(color: string): void { - const colorinHex = gdjs.rgbOrHexStringToNumber(color); - if (colorinHex === this._color) return; - this._color = colorinHex; - this._renderer.updateColor(); + setTint(tint: string): void { + const tintInHex = gdjs.rgbOrHexStringToNumber(tint); + if (tintInHex === this._tint) return; + this._tint = tintInHex; + this._renderer.updateTint(); } /** @internal */ @@ -302,8 +302,8 @@ namespace gdjs { newObjectData.content.frontFaceResourceName ); } - if (oldObjectData.content.color !== newObjectData.content.color) { - this.setColor(newObjectData.content.color); + if (oldObjectData.content.tint !== newObjectData.content.tint) { + this.setTint(newObjectData.content.tint); } if ( @@ -438,7 +438,7 @@ namespace gdjs { vfb: this._visibleFacesBitmask, trfb: this._textureRepeatFacesBitmask, frn: this._faceResourceNames, - c: this._color, + c: this._tint, }; } @@ -493,9 +493,9 @@ namespace gdjs { } } if (networkSyncData.c !== undefined) { - if (this._color !== networkSyncData.c) { - this._color = networkSyncData.c; - this._renderer.updateColor(); + if (this._tint !== networkSyncData.c) { + this._tint = networkSyncData.c; + this._renderer.updateTint(); } } } diff --git a/Extensions/3D/Cube3DRuntimeObjectPixiRenderer.ts b/Extensions/3D/Cube3DRuntimeObjectPixiRenderer.ts index eb92de06e2b0..2438299f9553 100644 --- a/Extensions/3D/Cube3DRuntimeObjectPixiRenderer.ts +++ b/Extensions/3D/Cube3DRuntimeObjectPixiRenderer.ts @@ -53,10 +53,6 @@ namespace gdjs { if (!runtimeObject.isFaceAtIndexVisible(faceIndex)) return getTransparentMaterial(); - const resourceName = runtimeObject.getFaceAtIndexResourceName(faceIndex); - if (!resourceName) { - return new THREE.MeshBasicMaterial({ vertexColors: true }); - } return runtimeObject .getInstanceContainer() .getGame() @@ -94,13 +90,13 @@ namespace gdjs { this.updateSize(); this.updatePosition(); this.updateRotation(); - this.updateColor(); + this.updateTint(); } - updateColor() { - const colors: number[] = []; + updateTint() { + const tints: number[] = []; - const normalizedColor = gdjs - .hexNumberToRGBArray(this._cube3DRuntimeObject._color) + const normalizedTint = gdjs + .hexNumberToRGBArray(this._cube3DRuntimeObject._tint) .map((component) => component / 255); for ( @@ -108,12 +104,12 @@ namespace gdjs { i < this._boxMesh.geometry.attributes.position.count; i++ ) { - colors.push(...normalizedColor); + tints.push(...normalizedTint); } this._boxMesh.geometry.setAttribute( 'color', - new THREE.BufferAttribute(new Float32Array(colors), 3) + new THREE.BufferAttribute(new Float32Array(tints), 3) ); } diff --git a/Extensions/3D/JsExtension.js b/Extensions/3D/JsExtension.js index 1415cbae2c1a..c35ca9a61769 100644 --- a/Extensions/3D/JsExtension.js +++ b/Extensions/3D/JsExtension.js @@ -823,7 +823,7 @@ module.exports = { propertyName === 'backFaceUpThroughWhichAxisRotation' || propertyName === 'facesOrientation' || propertyName === 'materialType' || - propertyName === 'color' + propertyName === 'tint' ) { objectContent[propertyName] = newValue; return true; @@ -904,10 +904,10 @@ module.exports = { .setMeasurementUnit(gd.MeasurementUnit.getPixel()) .setGroup(_('Default size')); objectProperties - .getOrCreate('color') - .setValue(objectContent.color || '128;128;128') + .getOrCreate('tint') + .setValue(objectContent.tint || '128;128;128') .setType('Color') - .setLabel(_('Color')) + .setLabel(_('Tint')) .setGroup(_('Texture')); objectProperties @@ -1099,7 +1099,7 @@ module.exports = { topFaceResourceRepeat: false, bottomFaceResourceRepeat: false, materialType: 'Basic', - color: '128;128;128', + tint: '128;128;128', }; Cube3DObject.updateInitialInstanceProperty = function ( @@ -1578,18 +1578,18 @@ module.exports = { object .addScopedAction( - 'SetColor', - _('Color'), - _('Change the color of the cube.'), - _('Change the color of _PARAM0_ to _PARAM1_'), - _('Color'), + 'SetTint', + _('Tint'), + _('Change the tint of the cube.'), + _('Change the tint of _PARAM0_ to _PARAM1_'), + _('Tint'), 'res/actions/color24.png', 'res/actions/color.png' ) .addParameter('object', _('3D Cube'), 'Cube3DObject', false) - .addParameter('color', _('Color'), '', false) + .addParameter('color', _('Tint'), '', false) .getCodeExtraInformation() - .setFunctionName('setColor'); + .setFunctionName('setTint'); extension .addExpressionAndConditionAndAction( @@ -2361,7 +2361,7 @@ module.exports = { this._facesOrientation = 'Y'; this._backFaceUpThroughWhichAxisRotation = 'X'; this._shouldUseTransparentTexture = false; - this._color = ''; + this._tint = ''; const geometry = new THREE.BoxGeometry(1, 1, 1); const materials = [ @@ -2385,16 +2385,10 @@ module.exports = { return getTransparentMaterial(); } - const resourceName = this._faceResourceNames[faceIndex]; - - if (!resourceName) { - return new THREE.MeshBasicMaterial({ vertexColors: true }); - } - // Utilisation du loader de ressources pour obtenir le matériau return await this._pixiResourcesLoader.getThreeMaterial( project, - resourceName, + this._faceResourceNames[faceIndex], { useTransparentTexture: this._shouldUseTransparentTexture, } @@ -2421,11 +2415,11 @@ module.exports = { this._updateTextureUvMapping(); } - _updateColor() { - const colors = []; - const normalizedColor = objectsRenderingService + _updateTint() { + const tints = []; + const normalizedTint = objectsRenderingService .hexNumberToRGBArray( - objectsRenderingService.rgbOrHexToHexNumber(this._color) + objectsRenderingService.rgbOrHexToHexNumber(this._tint) ) .map((component) => component / 255); @@ -2434,12 +2428,12 @@ module.exports = { i < this._threeObject.geometry.attributes.position.count; i++ ) { - colors.push(...normalizedColor); + tints.push(...normalizedTint); } this._threeObject.geometry.setAttribute( 'color', - new THREE.BufferAttribute(new Float32Array(colors), 3) + new THREE.BufferAttribute(new Float32Array(tints), 3) ); } @@ -2475,7 +2469,7 @@ module.exports = { let materialsDirty = false; let uvMappingDirty = false; - let colorDirty = false; + let tintDirty = false; const shouldUseTransparentTexture = object.content.enableTextureTransparency; @@ -2483,10 +2477,10 @@ module.exports = { this._shouldUseTransparentTexture = shouldUseTransparentTexture; materialsDirty = true; } - const color = object.content.color || '128;128;128'; - if (this._color !== color) { - this._color = color; - colorDirty = true; + const tint = object.content.tint || '128;128;128'; + if (this._tint !== tint) { + this._tint = tint; + tintDirty = true; } const faceResourceNames = [ @@ -2580,7 +2574,7 @@ module.exports = { if (materialsDirty) this._updateThreeObjectMaterials(); if (uvMappingDirty) this._updateTextureUvMapping(); - if (colorDirty) this._updateColor(); + if (tintDirty) this._updateTint(); } /** diff --git a/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts b/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts index 03cb6091f7b6..c68f40143b7f 100644 --- a/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts +++ b/GDJS/Runtime/pixi-renderers/pixi-image-manager.ts @@ -242,12 +242,14 @@ namespace gdjs { map: this.getThreeTexture(resourceName), side: useTransparentTexture ? THREE.DoubleSide : THREE.FrontSide, transparent: useTransparentTexture, + vertexColors: true, }) : new THREE.MeshStandardMaterial({ map: this.getThreeTexture(resourceName), side: useTransparentTexture ? THREE.DoubleSide : THREE.FrontSide, transparent: useTransparentTexture, metalness: 0, + vertexColors: true, }); this._loadedThreeMaterials.put(cacheKey, material); return material;