I am currently working on a Three.js based sample project that will serve as the foundation for a larger project. The project involves a plane with a texture which orbits a center point. The plane is attached to the center point and then the center point is rotated. Although further testing indicates that parental relationships and offset from the center have no effect, it seems that warping occurs due to the difference in camera angles. The warping persists even when the camera is moved instead of the object.
Everything functions properly with the WebGL renderer. However, with the canvas renderer, I had to make adjustments to the texture loading process (imageutils does not load properly for the canvas, so I had to use a texture and an image loader explicitly). After this adjustment, the project worked fine in Chrome. In Safari, though, the texture exposes corners of the plane as the plane moves, causing the position to become twisted and offset. The warping is evident when viewed from the sides but not when viewed straight on (). The issue seems to be a bug in the canvas renderer, but I am unsure. Is there a workaround for this, given my previous texture loading issue? I am currently using overdraw:true.
var geometry = new THREE.PlaneGeometry(width, height, 1, 1);
var material = new THREE.MeshBasicMaterial( { overdraw:true, map:texture, side:THREE.DoubleSide } );
mesh = new THREE.Mesh( geometry, material );
Any thoughts or recommendations would be appreciated. I do not want to report a bug without more information, as this is my first attempt at utilizing Three.js and I am unsure if the issue lies with me or the system.
It is worth mentioning that removing overdraw only adds seams and does not impact the shifting. Additionally, enlarging the object or adding more subdivisions only results in the shifting occurring along these new breaks, rather than resolving the underlying issue.