Unusual border effect on three.js webgl transparent png texture

Currently facing an unusual issue with using pngs as textures in three.js. The pngs develop odd borders at the transition between visible and transparent areas. I have tried adjusting the alphatest value, but this sometimes causes the image to disappear entirely in regions with very thin 1px lines. Is there a solution to effectively resolve this problem?

var explosionTexture = new THREE.ImageUtils.loadTexture( 'explosion.png' );
        boomer = new TextureAnimator( explosionTexture, 4, 4, 16, 55 ); // texture, #horiz, #vert, #total, duration.
        var explosionMaterial = new THREE.MeshBasicMaterial( { map: explosionTexture } );
        explosionMaterial.transparent = true;
        var cube2Geometry = new THREE.PlaneGeometry( 64, 64, 1, 1 );
        cube2 = new THREE.Mesh( cube2Geometry, explosionMaterial );
        cube2.position.set(100,26,0);
        scene.add(cube2);


        // renderer

        //renderer = new THREE.WebGLRenderer( { antialias: false, premultipliedAlpha: true  } );
        renderer = new THREE.WebGLRenderer( { antialias: false } );
javascriptthree.js

Answer №1

Give this a shot:

explosionTexture.anisotropy = 0;
explosionTexture.magFilter = THREE.NearestFilter;
explosionTexture.minFilter = THREE.NearestFilter;

Additionally, avoid using antialiasing in the renderer setup:

renderer = new THREE.WebGLRenderer({antialias: false});

Tested this for minecraft texture packs preview, and it's working perfectly :-)

Answer №2

To achieve the desired effect, I found success using material blending with the following configuration:

material.blending = THREE.CustomBlending
material.blendSrc = THREE.OneFactor
material.blendDst = THREE.OneMinusSrcAlphaFactor

For a visual demonstration, refer to this example:

Answer №3

Well done, you've stumbled right into the Texel-to-Pixel-mapping-quagmire. :)

Check this out for a way out, even though it's not specific to WebGL, the fundamentals are still relevant.

Answer №4

After trying various solutions mentioned on different sources, I finally found success in resolving my issue.

What did the trick for me was adjusting the settings for Texture.wrapS (for horizontal wrapping) and Texture.wrapT (for vertical wrapping) specifically for the sprite texture.

Previously, I had noticed an unsightly edge at the top of my sprite. By changing the Texture.wrapT setting from THREE.RepeatWrapping to THREE.ClampToEdgeWrapping, I managed to eliminate the problem entirely.

This simple tweak resolved the issue without the need to modify alpha test values, texture filters, vertices, or antialiasing settings.

Answer №5

Here is how I tackled the problem:

            var cube2GeometryVertices = cube2Geometry.vertices;


            for (var index = 0; index < cube2GeometryVertices.length; index++) {
              cube2GeometryVertices[index].x =  cube2GeometryVertices[index].x - 0.5;
              cube2GeometryVertices[index].y =  cube2GeometryVertices[index].y - 0.5;
            }

Is there a simpler method to shift all vertices by half a pixel?

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 Angular material autocomplete feature fails to close automatically when the document loses focus

Normally, an input field will blur when you click on the 'body' of the document. But when using the autocomplete directive on desktop, the menu never closes on mobile unless you select an item or refresh the page. Initially, I thought this issue ...

javascriptangularjsautocompleteangular-material

Ways to implement a placeholder height for images on a webpage with varying heights using HTML

I'm facing an issue with an image on my website that has a dynamic width and height as defined by the following CSS: .sm_item_image { width:100%; height:auto; max-width:400px; } The problem arises when the image takes some time to load, ...

javascripthtmlcss

Identify the key name in an array of objects and combine the corresponding values

Here is an example of my array structure: array = [{ "name": "obj0_property0", "url": "picture1" }, { "name": "obj1_property0", "url": "picture1" }, { "name": "obj0_property1", "url": "picture2" }] I am looking to transform this array using J ...

javascriptnode.js

Utilizing property validation in your codebase

How can I set up my code to display a warning in the console if the value of the Prop is not a string? The player-name prop should always be a string. If this: <greet :player-name="5"></greet> contains a number, I want my code below to generat ...

javascripthtmlvalidationvue.js

Managing a variety of PHP responses using AJAX

I am currently in the process of designing PHP pages for form processing. On these pages, I aim to redirect if the result is successful or display an error message in case of any errors. The structure of the pages is as follows: $arg = $_POST["arg"]; if ( ...

javascriptphpjqueryajax

Encountering invalid parameters while attempting to utilize the track.scrobble service from the Last.Fm API in a Node.js application

After successfully completing the Last.Fm authentication process following the instructions provided here, I received the session key without any issues. However, my attempts to make an authenticated POST request to the track.scrobble method of the Last.Fm ...

javascriptnode.jslast.fm

Locate the selected radio button's label

There are 25 radio button groups on my page. Each group has a specific action that needs to be performed when a radio button is selected. In order to execute the correct action for each group, I require the NAME attribute of that particular radio group. ...

javascriptjqueryradio-button

What is the best way to access the EXIF data of an image (JPG, JPEG, PNG) using node.js?

In my quest to access the EXIF data of an image in order to extract GPS information such as Latitude and Longitude, I have experimented with approximately 4-5 EXIF packages available on npm/node, including exif, exif-parser, node-exif, exifr, exif-js, and ...

javascriptnode.jsnpmexifnpm-package

What is the reason behind my pledge giving back an array containing either [object] or [array]?

As I attempt to iterate through a list of URLs from Github's API to retrieve an array containing all the relevant information, I am encountering an issue. Instead of actual data, the array returned to me is in the format of [object],[object]. I suspec ...

javascriptnode.jspromiseasync-await

most efficient method of sharing information between various angular controllers

I am looking for a way to share form data among multiple controllers before submitting it. Currently, I am using module.value() to store the data as a global variable. var serviceApp = angular.module('sampleservice', [ ]); serviceApp.valu ...

javascriptangularjs

Embark on a journey through Express.js routes with a unique context

After grappling with this issue for a few days, my brain feels fried and I can't seem to find the most efficient solution. My ultimate goal is to be able to repeat a route journey with new context data at the start. For example: app.get('/test& ...

javascriptnode.jsexpress

Issues with the OnChange function not properly functioning in duplicate input fields

I've designed a form that allows for adding or deleting rows, effectively cloning input fields. One of the input fields utilizes Jquery Ajax to retrieve its value. However, upon adding an extra row by cloning the parent row to generate a child row, th ...

javascripthtmljqueryajax

Sharing and showcasing files directly from a local directory

Recently diving into NodeJS and web development, I've successfully used multer to upload a single file within my web application. The file gets uploaded to my "uploads" folder flawlessly, and now I'm planning on storing the file path in my databa ...

javascriptnode.jsexpressuploadmulter

Determining if a date has passed using moment.js, focusing solely on the date

Is it possible to determine if a date has passed based solely on the date itself? Currently, I am using !moment(moment().format("LLL")).isBefore(moment.unix(data.dueDate._seconds).format("LLL")). However, this approach also takes into account the time. F ...

javascriptreactjsnext.jsmomentjs

When it comes to utilizing the method ".style.something" in JavaScript

Here is some javascript code that I am working with: function createDiv(id){ var temp = document.createElement('div'); temp.setAttribute("id", id); document.getElementsByTagName('body')[0].appendChild(temp); } c ...

javascriptcsshtml

Multiplication cannot be performed on operands of type 'NoneType'

Hello everyone, I am attempting to calculate the unit price and quantity from this table using the following model: class Marketers(models.Model): category =models.ForeignKey(Category, on_delete=models.CASCADE, null=True) name =models.CharField(max ...

javascripthtmlcssdjangobootstrap-4

What would you name this particular element?

I want to create a unique slider design but I'm unsure where to begin or how to search for information because I don't know the correct terminology. Does this type of slider have a specific name? I heard about Marquee, but that seems like someth ...

javascripthtmlcssweb

When the component mounts in React using firestore and Redux, the onClick event is triggered instantly

I am facing an issue with my component that displays projects. Each project has a delete button, but for some reason, all delete buttons are being automatically triggered. I am using Redux and Firestore in my application. This behavior might be related to ...

javascriptreactjsreduxgoogle-cloud-firestorematerial-ui

Strange rendering in CSS JQuery Datatable

I am encountering an issue with a DataTable from datatables.net. Each row can be selected by clicking on a checkbox, which triggers a click event. In response to the event, I add or remove a CSS class to change the appearance of the selected rows. $(".cbD ...

javascriptjqueryhtmlcssdatatable

Retrieve data from the controller of the selected element on the subsequent page using AngularJS

Currently, I am in the process of developing an ecommerce platform using angularjs. In my controller, I have a list of various products structured like this: $scope.products = [ {imgLink: 'product1.jpg', name: 'Wingtip Cognac Oxford&apo ...

javascriptjqueryhtmlangularjs