0

I found this question:

Image manipulation and texture mapping using HTML5 Canvas?,

and in answer I found the working method to render 3d on Canvas. But the main issue of this approach that we can see borders between triangles. Is there any possible way to fix it. I can't find any helpfull information. I will be grateful for any information.

Thanks.

user8771421
  • 1
  • The short answer, No, the long answer, not without dropping the frame by an order of magnitude. But then you can get complex high quality 3D on the canvas with ease. The answer you need is WebGL – Blindman67 Oct 13 '17 at 15:44
  • @Blindman67, what does your "long answer" mean? So there's a way to fix this borders? It would be great if you can give some links for investigation. – user8771421 Oct 17 '17 at 07:47
  • Sorry its should have read "frame rate". The example you referenced is not true 3D because the 2D API does not do 3D transforms, hence the name *CanvasRenderingContext2D*. To get rid of the seams you would have to write a *scanline renderer* in javascript which would be incredibly slow. The canvas does do 3D via the *WebGL* context. It uses the GPU to render 3D and is the only way to do high quality (no seams), high frame rate (60fps), 3D via the canvas. A good starting point for WebGL is *three.js*. Search terms in italic – Blindman67 Oct 17 '17 at 07:59
  • @Blindman67, thank you for quick answer. Yes, example is not a true 3D, but i don't need a 3D renderer. It was my mistake when I wrote this question. I need a possibility to render texture using the approach from example without seams. Maybe you know something about it? Anyway thank you for reply. – user8771421 Oct 17 '17 at 08:24
  • The answer remains the same, you can not remove the seams, you would need to write a *scanline renderer* that draws each pixel in the scene one by one. – Blindman67 Oct 17 '17 at 10:31

0 Answers0