Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tint color for 3D cube #7354

Merged
merged 16 commits into from
Feb 6, 2025
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Introduction for supporting 3D cube base color
  • Loading branch information
NeylMahfouf2608 committed Jan 28, 2025
commit 78fdd3a17ffee53eaf718c632999b7e8a9a8edc4
19 changes: 15 additions & 4 deletions Extensions/3D/Cube3DRuntimeObject.ts
Original file line number Diff line number Diff line change
@@ -24,10 +24,10 @@ namespace gdjs {
rightFaceVisible: boolean;
topFaceVisible: boolean;
bottomFaceVisible: boolean;
color: THREE.Color;
AlexandreSi marked this conversation as resolved.
Show resolved Hide resolved
materialType: 'Basic' | 'StandardWithoutMetalness';
};
}

type FaceName = 'front' | 'back' | 'left' | 'right' | 'top' | 'bottom';
const faceNameToBitmaskIndex = {
front: 0,
@@ -71,7 +71,7 @@ namespace gdjs {
];
_materialType: gdjs.Cube3DRuntimeObject.MaterialType =
gdjs.Cube3DRuntimeObject.MaterialType.Basic;

_color: THREE.Color;
constructor(
instanceContainer: gdjs.RuntimeInstanceContainer,
objectData: Cube3DObjectData
@@ -117,6 +117,9 @@ namespace gdjs {
objectData.content.topFaceResourceName,
objectData.content.bottomFaceResourceName,
];

this._color = objectData.content.color || new THREE.Color(0.5, 0.5, 0.5);

this._materialType = this._convertMaterialType(
objectData.content.materialType
);
@@ -197,16 +200,20 @@ namespace gdjs {

setFaceResourceName(faceName: FaceName, resourceName: string): void {
const faceIndex = faceNameToBitmaskIndex[faceName];
console.log(resourceName);
if (faceIndex === undefined) {
return;
}
if (this._faceResourceNames[faceIndex] === resourceName) {
return;
}

this._faceResourceNames[faceIndex] = resourceName;
this._renderer.updateFace(faceIndex);
}
setCubeColor(color: THREE.Color): void {
AlexandreSi marked this conversation as resolved.
Show resolved Hide resolved
AlexandreSi marked this conversation as resolved.
Show resolved Hide resolved
if (color === this._color) return;
this._color = color;
}

/** @internal */
getFaceAtIndexResourceName(faceIndex: integer): string {
@@ -285,7 +292,11 @@ namespace gdjs {
if (
oldObjectData.content.frontFaceResourceName !==
newObjectData.content.frontFaceResourceName
) {
)
if (oldObjectData.content.color !== newObjectData.content.color) {
this.setCubeColor(newObjectData.content.color);
}
{
this.setFaceResourceName(
'front',
newObjectData.content.frontFaceResourceName
82 changes: 53 additions & 29 deletions Extensions/3D/Cube3DRuntimeObjectPixiRenderer.ts
Original file line number Diff line number Diff line change
@@ -53,6 +53,12 @@ namespace gdjs {
if (!runtimeObject.isFaceAtIndexVisible(faceIndex))
return getTransparentMaterial();

const resourceName = runtimeObject.getFaceAtIndexResourceName(faceIndex);
if (!resourceName || resourceName === '') {
const material = new THREE.MeshBasicMaterial({ vertexColors: true });
console.log('on est bien passés ici !!');
return material;
}
return runtimeObject
.getInstanceContainer()
.getGame()
@@ -75,14 +81,37 @@ namespace gdjs {
) {
const geometry = new THREE.BoxGeometry(1, 1, 1);
// TODO (3D) - feature: support color instead of texture?
const materials = [
getFaceMaterial(runtimeObject, materialIndexToFaceIndex[0]),
getFaceMaterial(runtimeObject, materialIndexToFaceIndex[1]),
getFaceMaterial(runtimeObject, materialIndexToFaceIndex[2]),
getFaceMaterial(runtimeObject, materialIndexToFaceIndex[3]),
getFaceMaterial(runtimeObject, materialIndexToFaceIndex[4]),
getFaceMaterial(runtimeObject, materialIndexToFaceIndex[5]),
];
const materials: THREE.Material[] = [];

for (let i = 0; i < 6; i++) {
AlexandreSi marked this conversation as resolved.
Show resolved Hide resolved
const material: THREE.Material = getFaceMaterial(
runtimeObject,
materialIndexToFaceIndex[i]
);
const basicMaterial: THREE.MeshBasicMaterial =
new THREE.MeshBasicMaterial();
basicMaterial.copy(material);
materials.push(
basicMaterial.map
? getFaceMaterial(runtimeObject, materialIndexToFaceIndex[i])
: new THREE.MeshBasicMaterial({ vertexColors: true })
);
}

let colors: number[] = [];
for (let i = 0; i < geometry.attributes.position.count; i++) {
colors.push(
runtimeObject._color.r,
runtimeObject._color.g,
runtimeObject._color.b
);
}

geometry.setAttribute(
'color',
new THREE.BufferAttribute(new Float32Array(colors), 3)
);
AlexandreSi marked this conversation as resolved.
Show resolved Hide resolved

const boxMesh = new THREE.Mesh(geometry, materials);

super(runtimeObject, instanceContainer, boxMesh);
@@ -121,13 +150,11 @@ namespace gdjs {
*/
updateTextureUvMapping(faceIndex?: number) {
// @ts-ignore - position is stored as a Float32BufferAttribute
const pos: THREE.BufferAttribute = this._boxMesh.geometry.getAttribute(
'position'
);
const pos: THREE.BufferAttribute =
this._boxMesh.geometry.getAttribute('position');
// @ts-ignore - uv is stored as a Float32BufferAttribute
const uvMapping: THREE.BufferAttribute = this._boxMesh.geometry.getAttribute(
'uv'
);
const uvMapping: THREE.BufferAttribute =
this._boxMesh.geometry.getAttribute('uv');
const startIndex =
faceIndex === undefined ? 0 : faceIndexToMaterialIndex[faceIndex] * 4;
const endIndex =
@@ -149,9 +176,10 @@ namespace gdjs {
continue;
}

const shouldRepeatTexture = this._cube3DRuntimeObject.shouldRepeatTextureOnFaceAtIndex(
materialIndexToFaceIndex[materialIndex]
);
const shouldRepeatTexture =
this._cube3DRuntimeObject.shouldRepeatTextureOnFaceAtIndex(
materialIndexToFaceIndex[materialIndex]
);

const shouldOrientateFacesTowardsY =
this._cube3DRuntimeObject.getFacesOrientation() === 'Y';
@@ -180,12 +208,10 @@ namespace gdjs {
if (shouldOrientateFacesTowardsY) {
[x, y] = noRepeatTextureVertexIndexToUvMapping[vertexIndex % 4];
} else {
[
x,
y,
] = noRepeatTextureVertexIndexToUvMappingForLeftAndRightFacesTowardsZ[
vertexIndex % 4
];
[x, y] =
noRepeatTextureVertexIndexToUvMappingForLeftAndRightFacesTowardsZ[
vertexIndex % 4
];
}
}
break;
@@ -211,12 +237,10 @@ namespace gdjs {
if (shouldOrientateFacesTowardsY) {
[x, y] = noRepeatTextureVertexIndexToUvMapping[vertexIndex % 4];
} else {
[
x,
y,
] = noRepeatTextureVertexIndexToUvMappingForLeftAndRightFacesTowardsZ[
vertexIndex % 4
];
[x, y] =
noRepeatTextureVertexIndexToUvMappingForLeftAndRightFacesTowardsZ[
vertexIndex % 4
];
x = -x;
y = -y;
}
70 changes: 38 additions & 32 deletions Extensions/3D/JsExtension.js
Original file line number Diff line number Diff line change
@@ -822,7 +822,8 @@ module.exports = {
propertyName === 'bottomFaceResourceName' ||
propertyName === 'backFaceUpThroughWhichAxisRotation' ||
propertyName === 'facesOrientation' ||
propertyName === 'materialType'
propertyName === 'materialType' ||
propertyName === 'cubeColor'
) {
objectContent[propertyName] = newValue;
return true;
@@ -902,6 +903,12 @@ module.exports = {
.setLabel(_('Depth'))
.setMeasurementUnit(gd.MeasurementUnit.getPixel())
.setGroup(_('Default size'));
objectProperties
.getOrCreate('cubeColor')
AlexandreSi marked this conversation as resolved.
Show resolved Hide resolved
.setValue(objectContent.color || (255, 255, 255))
AlexandreSi marked this conversation as resolved.
Show resolved Hide resolved
.setType('Color')
.setLabel(_('Cube color'))
.setGroup(_('Texture'));

objectProperties
.getOrCreate('frontFaceResourceName')
@@ -2160,9 +2167,10 @@ module.exports = {
}

static getThumbnail(project, resourcesLoader, objectConfiguration) {
const textureResourceName = RenderedCube3DObject2DInstance._getResourceNameToDisplay(
objectConfiguration
);
const textureResourceName =
RenderedCube3DObject2DInstance._getResourceNameToDisplay(
objectConfiguration
);
if (textureResourceName) {
return resourcesLoader.getResourceFullUrl(
project,
@@ -2174,18 +2182,20 @@ module.exports = {
}

updateTextureIfNeeded() {
const textureName = RenderedCube3DObject2DInstance._getResourceNameToDisplay(
this._associatedObjectConfiguration
);
const textureName =
RenderedCube3DObject2DInstance._getResourceNameToDisplay(
this._associatedObjectConfiguration
);
if (textureName === this._renderedResourceName) return;

this.updateTexture();
}

updateTexture() {
const textureName = RenderedCube3DObject2DInstance._getResourceNameToDisplay(
this._associatedObjectConfiguration
);
const textureName =
RenderedCube3DObject2DInstance._getResourceNameToDisplay(
this._associatedObjectConfiguration
);

if (!textureName) {
this._renderFallbackObject = true;
@@ -2496,7 +2506,8 @@ module.exports = {
backFaceUpThroughWhichAxisRotation !==
this._backFaceUpThroughWhichAxisRotation
) {
this._backFaceUpThroughWhichAxisRotation = backFaceUpThroughWhichAxisRotation;
this._backFaceUpThroughWhichAxisRotation =
backFaceUpThroughWhichAxisRotation;
uvMappingDirty = true;
}

@@ -2552,9 +2563,10 @@ module.exports = {
continue;
}

const shouldRepeatTexture = this._shouldRepeatTextureOnFace[
materialIndexToFaceIndex[materialIndex]
];
const shouldRepeatTexture =
this._shouldRepeatTextureOnFace[
materialIndexToFaceIndex[materialIndex]
];

const shouldOrientateFacesTowardsY = this._facesOrientation === 'Y';

@@ -2589,16 +2601,13 @@ module.exports = {
}
} else {
if (shouldOrientateFacesTowardsY) {
[x, y] = noRepeatTextureVertexIndexToUvMapping[
vertexIndex % 4
];
[x, y] =
noRepeatTextureVertexIndexToUvMapping[vertexIndex % 4];
} else {
[
x,
y,
] = noRepeatTextureVertexIndexToUvMappingForLeftAndRightFacesTowardsZ[
vertexIndex % 4
];
[x, y] =
noRepeatTextureVertexIndexToUvMappingForLeftAndRightFacesTowardsZ[
vertexIndex % 4
];
}
}
break;
@@ -2628,16 +2637,13 @@ module.exports = {
}
} else {
if (shouldOrientateFacesTowardsY) {
[x, y] = noRepeatTextureVertexIndexToUvMapping[
vertexIndex % 4
];
[x, y] =
noRepeatTextureVertexIndexToUvMapping[vertexIndex % 4];
} else {
[
x,
y,
] = noRepeatTextureVertexIndexToUvMappingForLeftAndRightFacesTowardsZ[
vertexIndex % 4
];
[x, y] =
noRepeatTextureVertexIndexToUvMappingForLeftAndRightFacesTowardsZ[
vertexIndex % 4
];
x = -x;
y = -y;
}