CODEWITHSUNDEEP
javascriptsafarithree.jstextures
ima747
ima747

Reputation: 4667

Three.js CanvasRenderer textures broken in safari

I have a Three.js based sample I'm working on as a basis for a bigger project. To super simplify I have a plane with a texture which orbits a center point. It is actually attached to the center point and then the center point is rotated. (further testing indicates the parenting and offset from center have no effect, it's just the difference from the camera angle that causes the warping, turning the camera instead of the object still shows warping as the angle increases)

With the WebGL renderer everything works fine. With the canvas renderer I had to adjust the texture loading (imageutils doesn't load properly for the canvas, have to use a texture and an image loader explicitly), but then it works fine in chrome. In safari however the texture exposes corners of the plane (position gets twisted and offset) as the plane moves, It's fine straight on to the camera (https://dl.dropbox.com/u/6768888/StackOverflow/Screen%20Shot%202013-03-20%20at%202.37.47%20PM.png), but off to the sides it's really warped (https://dl.dropbox.com/u/6768888/StackOverflow/Screen%20Shot%202013-03-20%20at%202.38.04%20PM.png, https://dl.dropbox.com/u/6768888/StackOverflow/Screen%20Shot%202013-03-20%20at%202.38.17%20PM.png)

I this appears to be a bug in the canvas renderer but I'm not sure, based on the previous texture loading issue I had maybe there's a work around? I am 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 greatly appreciated, don't want to submit a bug report without more info since this is my first real stab at Three.js so not sure if it's me or the system...

it should also be noted that removing overdraw just ads seams, it doesn't affect the shifting, also making the object bigger and or adding more subdivisions just makes the shifting happen along those new breaks, it doesn't fundamentally alter the problem.

Upvotes: 1

Views: 1506

Answers (1)

user2174988
user2174988

Reputation: 56

Same story with my App. Textures in safari, using canvas renderer are swimming around, chrome & ff are fine. Using WebGLRenderer every things nice and smooth. Joachim

Upvotes: 1

Related Questions