Drawing texture on canvas will cause the Sawtooth by WebGL

Questions
1

I draw a texture on canvas by the WebGL. The original size of texture is 1024x1000 and the size of texture have drawn on canvas is : 256x250. There is Sawtooth around the edge :
screen

2

I suggest you increase the resolution of your canvas in order to mitigate the aliasing effect. Besides, ensure your texture is 1024x1024 so three.js does not have to resize your texture.

In any event, providing a live example with your code will make it easier for the community to give adequate feedback.

3

web.zip (72.0 KB)
it’s my code, and what i want is put the canvas into a div,so i can’t change the size of canvas arbitrarily.

4

Two things:

  • Your code does not use three.js at all. Is this intended?
  • When using mipmapping and the respective texture filtering, your texture will be more sharp.

Here is a three.js demo: https://jsfiddle.net/6sxu9m5d/

5

thank you very much! i am trying something in morph the 2Dtexture,it seems thar THREE.JS does not exist some API about this, so i tried the webGL directly.

6

What do you mean by that? Can you please explain a bit?