When rendering a PNG image with an alpha channel, three.js has been reported to leak pixels from the videocard

Struggling to come up with a suitable title for my question here.. I'm encountering an issue when loading PNG files from an external URL, specifically with one PNG that has a non-power-of-two alpha channel created in Gimp. When I load and use this PNG as a texture on a plane, it renders mixed with what appears to be fragmented screenshots of the current screen. In the attached screenshot, you can see that it looks as though the cat image is layered with inverted parts of the Chromium developer inspector window on the right. I've noticed that it mentions the image isn't a power of two, so it needs to be resized, but I haven't seen this behavior with other textures before. https://i.sstatic.net/AtD4k.png Using three.js R77, Chromium Version 57.0.2987.98 Built on Ubuntu, running on Ubuntu 16.04 (64-bit)

Answer №1

Oh dear, it seems like there's a little bug in the browser. Would you mind sharing a simple example that demonstrates the issue? If you have a moment, feel free to report the bug on crbug.com/ and include it there. Otherwise, just provide a link to where I can access the test case. Thank you! (I specialize in Chrome's WebGL implementation.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The inline style in Angular 2 is not functioning as expected when set dynamically

Having a small dilemma... I'm trying to apply an inline style within a div like this: div style="background: url(..{{config.general.image}})"></div Oddly enough, it was functioning in beta 16 but ever since the RC1 upgrade, it's no longer ...

What is the best way to ensure that an ASync function only continues once all necessary information has been collected?

retrieveStudentGrades() { let grades = {}; let totalStudents = this.state.studentDetails.length; let studentCount = 0; this.state.courses.map((course) => { this.state.studentDetails.map((student) => { request.get( ...

What is the process for attaching the stack when initializing and throwing errors separately in JavaScript?

In all the documentation I've read, it consistently advises to both throw and initialize errors on the same line. For example: throw new Error("My error"); But what if you were to first initialize the error and then throw it on separate lines? For ...

Creating variable assignments based on object properties

I am facing a dilemma with a simple object that contains constants. { KEY1: "value1", KEY2: "value2" } I am looking for a way to make these constants accessible globally. Currently, I have to use Config.KEY1 to access the values globally, but I w ...

What is the process for retrieving the text element from a React component when using React.cloneElement?

Can I centralize a translation function for all table header elements? const CustomersTable = () => { var headers=<> <th>Name</th> <th>Age</th> <th>Another text</th> </> ...

Generate a new entry by analyzing components from a separate array in a single line

I have a list of essential items and I aim to generate a record based on the elements within that list. Each item in the required list will correspond to an empty array in the exist record. Essentially, I am looking to condense the following code into one ...

How come the overlay only appears the first time the button is clicked in JQUERY? What could be the issue here?

Why is my purple overlay with yellow text showing only once after the button is clicked, even though I have toggled the function? Check out my codepen to test the issue: https://codepen.io/cat999/project/editor/AEeEdg $('.animate-this').cl ...

Attempting to create a conditional state in Redux based on data fetched from an API

I'm currently exploring the most effective way to set up a conditional modal popup based on whether the response from an API call is null or not. While I typically work with functional components, the component I'm working with here is built as a ...

Guide to sending an ajax request from one page and receiving the response on a different page

Looking for advice on sending Ajax requests using jQuery and HTML5. I have multiple pages within my application. Is it possible to send an Ajax request from one page (e.g sync.html) and receive a response on another page (e.g home.html)? I am aware of alte ...

Using jQuery to evaluate multiple conditions within an if statement

I'm working on a script that needs to continuously monitor for the presence of an input field with the class name "email" (as this content is loaded via AJAX). If this input exists, I need to show another input field with the class name of "upload". A ...

Python script used to extract data from Vine platform

I am looking to extract post data, such as title, likes, shares, and content, from various brands' public accounts on Vine using Python. Currently, I have a few ideas in mind: There is a Vine API called Vinepy available on GitHub (https://github.c ...

What is the recommended approach for embedding scripts within Angular templates?

I am working on an Angular SPA that consists of multiple tabs, each served by templates. Depending on the tab, different scripts (both local and CDN) are required. Therefore, I am looking for a way to load these scripts only when they are needed, which mea ...

Why is it not performing as expected when removing all non-numeric elements from the array?

let arr = [1, "5", 3, 27, undefined, { name: 'Steven' }, 11]; for (let i = 0; i < arr.length; i++) { if (typeof arr[i] !== 'number') { arr.splice(i, 1); } } console.log(arr); // result: [1, 3, 27, {…}, 11 ...

Creating a tooltip for a specific cell within an AG grid react component is a useful customization feature

How can I customize the tooltip for a specific row in my AG Grid? I see that there is a tooltipField available in ColDefs, but I want to provide a custom string instead of using a field value. Is there a way to achieve this customization? ...

issue related to prototypejs event handlers and event triggering

Currently, I am in the process of learning both the prototype framework and javascript as a whole. My current task involves refactoring some existing code to generate HTML from data within a class by utilizing an event listener. Despite my efforts, I am en ...

Omit words from list in a route in Express.js

When working with the Express.js Framework, I am faced with a scenario where I have the following route defined: app.post('/:username/:slug', user.fn); I am now looking for a solution to create a regular expression that can validate if the slug ...

Populate the browser screen with a series of unpredictable numbers

I'm looking to fully populate the visible window of a webpage with random numbers. My current approach involves generating a long string of random digits first, and then applying the following properties to a div: #mydiv{ font-family: "Inconso ...

Tips on adjusting a position that shifts with changes in window size

Working on a website for my grandpa, I'm planning to include a small biker character that runs across the screen. When hovered over, he stops and advises "wear a helmet." The animation works well, but there's an issue with the positioning when th ...

Webpage created from scratch encounters technical difficulties on mobile device browser

My website seems to be getting stuck at the beginning of a section, particularly on mobile browsers. You can check out the website here <section class="home-slider owl-carousel"> <div class="slider-item" style="background-image: url(images/bg ...

Sequentially run jQuery functions

function functionOne() { $('#search-city-form').trigger('click'); } function functionTwo() { $("form input[name='tariffId']").val("137"); $('#search-city-form').trigger('click'); } function funct ...