Start a new topic

HtmlDrawable around z-axis

Hello !
I'm trying to display a HtmlDrawable in my app and I need to apply a 180° rotation on its z-axis to mirror it.
Yet, it seems like a rotation of n° around z is considered a rotation of -n° around y.

Is it a bug from the wikitude SDK or did I just misunderstood something here ?

thanks,
Vivien

Hi Alex,

I've been playing around with different rotation angle values and I think I finally understood the issue.

It seems like the z-axis "follows" the rotation around the x-axis and the y-axis.

Therefore, when I applied "rotate.x: 270", the z-axis became equivalent to the y-axis in the opposite direction ; hence the        "rotate.y: n" <=> "rotate.z: -n"


Is this intentionnal (to keep the z-axis normal to the drawable, I guess) or is it a bug ?


thanks,

Vivien

Hi Vivien,


it seems to me that everything is working as intended.


You mention you are using rotate.global.z in your code?


The order rotations and translations are used to calculate the position of the drawables is the following:

1. rotate

2. translate

3. rotate.global

4. translate.global


This means that if you have not applied a translate property then rotate and rotate.global will have the same effect. However, if you have applied a translate property then

- rotate: will rotate the drawable around the center of the augmentation

- rotate.global: will rotate the drawable around the center of the target image or the location


So if you use translate.y = 100 and rotate.global.z = 180 the result will look like translate.y = -100 and rotate.z = 180.


Regarding the mirrored property, it is only possible to use it in combination with the front camera.


Best Regards,

Alex

Hi Alex

Thanks for clarifying which axis is which, I was indeed a bit confused about it.
But it stills seems like this :

HTML
rotate : {
    x: 0,
    y: n,
    z: 0
}

is equivalent to :

HTML
rotate: {
    x: 0,
    y: 0,
    z: -n
}

where the rotation is in both those cases by "-n" degrees around the z axis (the one "coming out of the target image")


It seems to work as expected with other Drawables though, I only noticed this with HtmlDrawable


here's the exact "options" I'm setting to it : 

HTML
options: {
    viewportWidth: 64,
    viewportHeight: 50,
    backgroundColor: #FFFFFF00,
    translate: {
        x: 0,
        y: 100,
        z: 0
    },
    rotate: {
        x: 270,
        y: 0,
        z: 0
    },
    verticalAnchor: AR.CONST.VERTICAL_ANCHOR.BOTTOM
}

with in my code :  rotate.global.z = 180 + myAngle

(it should have been a -100 translation on the y axis)


In the end it gives the expected result but it works because it's just a drawable set at a fixed distance of the user. For a more mobile drawable it might be more complicated.


And I tried to use the mirrored property but either set at true or false, it doesnt affect the HtmlDrawable ; is it because i'm using the back camera ?


Vivien

 

Hi Vivien,


for ImageTracking the x/y plane of the coordinate system is aligned with the image plane, the z axis is "coming out of the target image". 

If you want to mirror a Drawable you have to rotate it around y not z as this would just make the Drawable displayed upside-down . You could also use the mirrored property of Drawables.


Best Regards,

Alex


I finally managed to get the expected result by applying an oppsite translation on the y-axis and adding 180° to the rotation around global.z but i'm still concerned about the issue since it might be more complicated in other cases
Login or Signup to post a comment