Fix transparency in webotsjs (#5735)

* Fix transparency * Fixes
cyberbotics · Jan 13, 2023 · 18f3efa · 18f3efa
1 parent 84689d5
commit 18f3efa
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 12 deletions.
diff --git 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
@@ -1526,18 +1526,17 @@ 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
@@ -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
@@ -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 isTransparent() {
+    return this.#isTransparent;
+  }
+
+  set isTransparent(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
@@ -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
@@ -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
@@ -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 << "\'";
   }