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.

Sign up for GitHub

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

Fix transparency in webotsjs #5735

Merged
merged 3 commits into from
Jan 13, 2023
Merged

Fix transparency in webotsjs #5735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ccf6204
Fix transparency
ad-daniel Jan 13, 2023
618c2ad
Fixes
ad-daniel Jan 13, 2023
9ba413e
Merge branch 'feature-web-proto' into fix-transparency-webotsjs
ad-daniel Jan 13, 2023
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
5 changes: 4 additions & 1 deletion resources/web/wwi/ImageLoader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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);
Expand Down
5 changes: 2 additions & 3 deletions resources/web/wwi/Parser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}

Expand Down
2 changes: 1 addition & 1 deletion resources/web/wwi/nodes/WbCadShape.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
14 changes: 11 additions & 3 deletions resources/web/wwi/nodes/WbImageTexture.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down Expand Up @@ -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();
Expand Down
4 changes: 2 additions & 2 deletions resources/web/wwi/test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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");
Expand Down
2 changes: 1 addition & 1 deletion resources/web/wwi/viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down
1 change: 0 additions & 1 deletion src/webots/nodes/WbImageTexture.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 << "\'";
}
Expand Down