CanvasTexture: Strange shadow

Questions
,
1

Canvas has not strange shadow with getCanvasDom() , such as this example in codepen, but THREE.SpriteMaterial 's params { map: new THREE.CanvasTexture( getCanvasDom() ) } has strange shadow.

function getCanvasDom() {
  var WIDTH = 512
  var canvasDom = document.createElement("canvas");
  canvasDom.width = WIDTH;
  canvasDom.height = WIDTH;
  var ctx = canvasDom.getContext("2d");
  ctx.fillStyle = "#ffffff";
  ctx.strokeStyle = "#ffffff";
  ctx.arc( WIDTH / 2, WIDTH / 2, 250, 0, 2*Math.PI, true );
  ctx.fill();

  return canvasDom;
}

white canvas demo
image

white canvas for CanvasTexture demo
image

2

Seems to be a blending issue. Setting the blending property of the sprite’s material to NoBlending removes the artifact: https://codepen.io/anon/pen/maaopG

An other options is the set the transparent property to false (SpriteMaterial is transparent per default).

4

Thank you for reply. I’m not sure what is wrong or not setting correctly for this demo.

Setting the transparent property to true with WebGLRenderer.alpha: false : https://codepen.io/anon/pen/jdOVwJ

The result looks OK:
image

But I want to set WebGLRenderer.alpha: true, the SpriteMaterial isn’t a circular: https://codepen.io/anon/pen/OdJXVG

Screenshot:
image

5

Before diving into the details of transparency and blending, why do you need this setting?

6

I wanna to make a simple project without TextureLoader, I choose other way CanvasTexture to finish this project, but it’s not my expectation.

Not good (CanvasTexture) screenshot:
image

BTW, I try to use TextureLoader with “white_circle_bg.png”, it looks OK.

Good (TextureLoader) screenshot:
image

7

Instead of drawing the texture at runtime via the Canvas 2D API, have you considered to serialize the image as base64 and use it as a data source for an Image object? The approach looks like this:

https://jsfiddle.net/rat4k5g8/

Notice the small red dot in the HTML view. Of course the alternative is to just load the image from the backend via TextureLoader.

8

Thank you for reply. Sorry, it doesn’t work. I try to serialize the image as base64 as:

var texture = new THREE.TextureLoader().load(
  getCanvasDom().toDataURL('image/png')
);

Finally, I found TextureLoader and CanvasTexture are prototype Texture. I tried to debug I found anything, I am not sure the strange shadow when is it generated.

codepen: https://codepen.io/anon/pen/exZvvp

Screenshots:
image

10

It seems to work by setting premultipliedAlpha of your sprite’s material to true: https://codepen.io/anon/pen/jdqLNd