From ccf6204b7c6811ce8ef6bc4d4326957ccad9629b Mon Sep 17 00:00:00 2001 From: ad-daniel Date: Fri, 13 Jan 2023 11:27:19 +0100 Subject: [PATCH 1/2] Fix transparency --- resources/web/wwi/ImageLoader.js | 5 ++++- resources/web/wwi/Parser.js | 6 +++--- resources/web/wwi/nodes/WbCadShape.js | 2 +- resources/web/wwi/nodes/WbImageTexture.js | 14 +++++++++++--- resources/web/wwi/test.html | 4 ++-- resources/web/wwi/viewer.js | 2 +- src/webots/nodes/WbImageTexture.cpp | 1 - 7 files changed, 22 insertions(+), 12 deletions(-) diff --git a/resources/web/wwi/ImageLoader.js b/resources/web/wwi/ImageLoader.js index f16e88c69c0..5e8a9d2b029 100644 --- a/resources/web/wwi/ImageLoader.js +++ b/resources/web/wwi/ImageLoader.js @@ -3,12 +3,13 @@ import WbImage from './nodes/WbImage.js'; import {arrayXPointer} from './nodes/utils/utils.js'; export default class ImageLoader { - static loadImageTextureInWren(prefix, url, isTransparent, checkTransparency) { + static loadImageTextureInWren(imageTexture, prefix, url, checkTransparency = true) { let needToDownloadTexture = Module.ccall('wr_texture_2d_copy_from_cache', 'number', ['string'], [url]); if (needToDownloadTexture !== 0) return Promise.resolve(); return this.loadTextureData(prefix, url).then((image) => { + let isTransparent = false; if (checkTransparency) { for (let i = 3, n = image.bits.length; i < n; i += 4) { if (image.bits[i] < 255) { @@ -18,6 +19,8 @@ export default class ImageLoader { } } + imageTexture.isTransparent = isTransparent; + let texture = _wr_texture_2d_new(); _wr_texture_set_size(texture, image.width, image.height); _wr_texture_set_translucent(texture, isTransparent); diff --git a/resources/web/wwi/Parser.js b/resources/web/wwi/Parser.js index 21942b02512..ede7701b191 100644 --- a/resources/web/wwi/Parser.js +++ b/resources/web/wwi/Parser.js @@ -1526,18 +1526,18 @@ export default class Parser { let url = getNodeAttribute(node, 'url', ''); if (typeof url !== 'undefined') url = url.split('"').filter(element => { if (element !== ' ') return element; })[0]; // filter removes empty elements. - const isTransparent = getNodeAttribute(node, 'isTransparent', 'false').toLowerCase() === 'true'; + const s = getNodeAttribute(node, 'repeatS', 'true').toLowerCase() === 'true'; const t = getNodeAttribute(node, 'repeatT', 'true').toLowerCase() === 'true'; const filtering = parseFloat(getNodeAttribute(node, 'filtering', '4')); let imageTexture; if (typeof url !== 'undefined' && url !== '') { - imageTexture = new WbImageTexture(id, url, isTransparent, s, t, filtering); + imageTexture = new WbImageTexture(id, url, s, t, filtering); if (!this.#downloadingImage.has(url)) { this.#downloadingImage.add(url); // Load the texture in WREN - this.#promises.push(ImageLoader.loadImageTextureInWren(this.prefix, url, isTransparent)); + this.#promises.push(ImageLoader.loadImageTextureInWren(imageTexture, this.prefix, url)); } } diff --git a/resources/web/wwi/nodes/WbCadShape.js b/resources/web/wwi/nodes/WbCadShape.js index 3a2445506ba..bdc1d715947 100644 --- a/resources/web/wwi/nodes/WbCadShape.js +++ b/resources/web/wwi/nodes/WbCadShape.js @@ -455,7 +455,7 @@ export default class WbCadShape extends WbBaseNode { url = assetPrefix + imageUrl; const imageTexture = new WbImageTexture(getAnId(), url, false, true, true, 4); - const promise = ImageLoader.loadImageTextureInWren(this.prefix, url, false, true); + const promise = ImageLoader.loadImageTextureInWren(imageTexture, this.prefix, url); promise.then(() => imageTexture.updateUrl()); this.#promises.push(promise); return imageTexture; diff --git a/resources/web/wwi/nodes/WbImageTexture.js b/resources/web/wwi/nodes/WbImageTexture.js index ef6e35f8c5b..5f611d985e1 100644 --- a/resources/web/wwi/nodes/WbImageTexture.js +++ b/resources/web/wwi/nodes/WbImageTexture.js @@ -13,11 +13,11 @@ export default class WbImageTexture extends WbBaseNode { #url; #usedFiltering; #wrenTextureIndex; - constructor(id, url, isTransparent, s, t, filtering) { + constructor(id, url, s, t, filtering) { super(id); this.#url = url; - this.#isTransparent = isTransparent; + this.#isTransparent = false; // this field is updated whenever loadTextureData is called this.#repeatS = s; this.#repeatT = t; this.#filtering = filtering; @@ -26,6 +26,14 @@ export default class WbImageTexture extends WbBaseNode { this.#usedFiltering = 0; } + get isTranslarent() { + return this.#isTransparent; + } + + set isTranslarent(newValue) { + this.#isTransparent = newValue; + } + get filtering() { return this.#filtering; } @@ -186,7 +194,7 @@ export default class WbImageTexture extends WbBaseNode { } #updateUrl() { - ImageLoader.loadImageTextureInWren(WbWorld.instance.prefix, this.#url, undefined) + ImageLoader.loadImageTextureInWren(this, WbWorld.instance.prefix, this.#url) .then(() => { this.#updateWrenTexture(); this.#update(); diff --git a/resources/web/wwi/test.html b/resources/web/wwi/test.html index cf9ec3fa747..27215f1206c 100644 --- a/resources/web/wwi/test.html +++ b/resources/web/wwi/test.html @@ -84,7 +84,7 @@ //webotsView.loadProto("https://raw.githubusercontent.com/cyberbotics/webots/feature-web-proto/projects/robots/pal_robotics/tiago_steel/protos/TiagoSteel.proto"); //webotsView.loadProto("https://raw.githubusercontent.com/cyberbotics/webots/feature-web-proto/projects/robots/pal_robotics/tiago_titanium/protos/TiagoTitanium.proto"); //webotsView.loadProto("https://raw.githubusercontent.com/cyberbotics/webots/feature-web-proto/projects/robots/pal_robotics/tiago++/protos/Tiago++.proto"); - // webotsView.loadProto("https://raw.githubusercontent.com/cyberbotics/webots/feature-web-proto/projects/robots/mobsya/thymio/protos/Thymio2Ball.proto"); // wrong textures? + webotsView.loadProto("https://raw.githubusercontent.com/cyberbotics/webots/feature-web-proto/projects/robots/mobsya/thymio/protos/Thymio2.proto"); // wrong textures? //webotsView.loadProto("https://raw.githubusercontent.com/cyberbotics/webots/feature-web-proto/projects/robots/kinematics/tinkerbots/protos/TinkerbotsFinger.proto"); //webotsView.loadProto("https://raw.githubusercontent.com/cyberbotics/webots/feature-web-proto/projects/robots/kinematics/tinkerbots/protos/TinkerbotsDistanceSensor.proto"); //webotsView.loadProto("https://raw.githubusercontent.com/cyberbotics/webots/feature-web-proto/projects/robots/kinematics/tinkerbots/protos/TinkerbotsWheel.proto"); @@ -122,7 +122,7 @@ // webotsView.loadProto("https://raw.githubusercontent.com/cyberbotics/webots/R2022b/projects/objects/balls/protos/SoccerBall.proto"); //webotsView.loadProto("https://raw.githubusercontent.com/cyberbotics/webots/R2022b/projects/objects/chairs/protos/OfficeChair.proto"); // webotsView.loadProto("https://raw.githubusercontent.com/cyberbotics/webots/R2022b/projects/samples/robotbenchmark/wall_following/protos/LinkedWalls.proto"); - webotsView.loadProto("https://raw.githubusercontent.com/cyberbotics/webots/R2022b/projects/appearances/protos/Grass.proto"); + // webotsView.loadProto("https://raw.githubusercontent.com/cyberbotics/webots/R2022b/projects/appearances/protos/Grass.proto"); // DEMO PROTO // webotsView.loadProto("protos/ProtoMf.proto"); diff --git a/resources/web/wwi/viewer.js b/resources/web/wwi/viewer.js index 3cfa8da7320..416f76f2c2e 100644 --- a/resources/web/wwi/viewer.js +++ b/resources/web/wwi/viewer.js @@ -892,7 +892,7 @@ function highlightX3DElement(deviceElement) { if (typeof imageTexture === 'undefined') { imageTexture = new WbImageTexture(getAnId(), computeTargetPath() + '../css/images/marker.png', false, true, true, 4); - ImageLoader.loadImageTextureInWren('', computeTargetPath() + '../css/images/marker.png', false).then(() => { + ImageLoader.loadImageTextureInWren(imageTexture, '', computeTargetPath() + '../css/images/marker.png', false).then(() => { imageTexture.updateUrl(); highlightX3DElement(deviceElement); }); diff --git a/src/webots/nodes/WbImageTexture.cpp b/src/webots/nodes/WbImageTexture.cpp index 174bb962886..389d75c8b43 100644 --- a/src/webots/nodes/WbImageTexture.cpp +++ b/src/webots/nodes/WbImageTexture.cpp @@ -552,7 +552,6 @@ void WbImageTexture::exportNodeFields(WbWriter &writer) const { findField("filtering", true)->write(writer); if (writer.isX3d()) { - writer << " isTransparent=\'" << (mIsMainTextureTransparent ? "true" : "false") << "\'"; if (!mRole.isEmpty()) writer << " role=\'" << mRole << "\'"; } From 618c2ad46a131d70d32466ab715231db805f6f39 Mon Sep 17 00:00:00 2001 From: ad-daniel Date: Fri, 13 Jan 2023 11:32:50 +0100 Subject: [PATCH 2/2] Fixes --- resources/web/wwi/Parser.js | 1 - resources/web/wwi/nodes/WbImageTexture.js | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/resources/web/wwi/Parser.js b/resources/web/wwi/Parser.js index ede7701b191..1a8588d0e45 100644 --- a/resources/web/wwi/Parser.js +++ b/resources/web/wwi/Parser.js @@ -1526,7 +1526,6 @@ export default class Parser { let url = getNodeAttribute(node, 'url', ''); if (typeof url !== 'undefined') url = url.split('"').filter(element => { if (element !== ' ') return element; })[0]; // filter removes empty elements. - const s = getNodeAttribute(node, 'repeatS', 'true').toLowerCase() === 'true'; const t = getNodeAttribute(node, 'repeatT', 'true').toLowerCase() === 'true'; const filtering = parseFloat(getNodeAttribute(node, 'filtering', '4')); diff --git a/resources/web/wwi/nodes/WbImageTexture.js b/resources/web/wwi/nodes/WbImageTexture.js index 5f611d985e1..eec5154fec2 100644 --- a/resources/web/wwi/nodes/WbImageTexture.js +++ b/resources/web/wwi/nodes/WbImageTexture.js @@ -26,11 +26,11 @@ export default class WbImageTexture extends WbBaseNode { this.#usedFiltering = 0; } - get isTranslarent() { + get isTransparent() { return this.#isTransparent; } - set isTranslarent(newValue) { + set isTransparent(newValue) { this.#isTransparent = newValue; }