Start a new topic

Confused with "Scaled Distance Units (SDUs)"

Confused with "Scaled Distance Units (SDUs)"

I did a sample code for Html drawable. Even the SDU value of drawable is 1, the drawable is larger than the target image. The code is like following. The width of the image is also same to 500px. Please help me with this. I want the html drawable to be the same size as the target image size when augment on the target image.


var html = new AR.HtmlDrawable({

uri: "assets/index.html"

}, 1, {

viewportWidth: 500,

viewportHeight: 680,

offsetX: 0,

offsetY: 0,



clickThroughEnabled: true,

allowDocumentLocationChanges: false,

onDocumentLocationChanged: function onDocumentLocationChangedFn(uri) {





Html File

<!DOCTYPE html> 

<html lang="en">


<meta name="viewport" content="target-densitydpi=device-dpi, width = 500, user-scalable = 0">




<div id="doc">

  <div id="content">

    <div class="imageContent">

      <ul class="slides">

        <li><img src="images/background.jpg" /></li>







Hi Namil,

Due to internal rendering reasons, you need to specify the width of the HTMLDrawable as the second parameter in the constructur, in SDUs.

Remember that 1 SDU is equal to the height of the target. When you set the HTMLDrawable to 1 SDU in the constructor, its width will equal the height of the target (=1 SDU), so assuming that your target is higher that wide, the HTMLDrawable's width will exceed the Target's width. You need to calculate its width based on the aspect ratio of the HTMLDrawable and the Target. Also remember that, due to the nature of HTML rendering, the height of a HTMLDrawable is flexible, so it might be hard to adjust a HTMLDrawable exactly to the size of the target.

You will be better off using ImageDrawables in your example. For ImageDrawables, you set the height of it in the second constructor parameter. So, assuming that your target is of aspect ratio 16:9, and your image is of aspect ratio 16:9 (the real pixel values are irrelevant), by using the following line, your Image will exactly overlap the Target:

new AR.ImageDrawable(imgResource, 1);




This still confuses me a bit because I haven't been able to reproduce these results with 3d models. I am working on an AR project which requires objects to appear life-size in the view. In the wikitude 3d encoder, these objects appear to be of a resonable size, however when viewed in the app, they appear to be enormous. This requires that I scale the objects down to thousandths of their original size. I think what might help me solve this problem is an explanation of how the size of an object in the encoder relates to its size in the AR view. There is a grid plane in the encoder which I am using to reference scale.

Thank you,



You can find details on the size of 3D models here:

When using the Wikitude 3D Encoder you can roughly estimate the size of the 3D model. If your 3D model fits into the square with the dimension 1 unit in the 3D Encoder as shown in the image below you can use 1 as value for 3D Model Scale. If your model uses 2 grid units, you need to set the value to 0.5 and so on. The picture below explains it futhter.



One other thing I wanted to ask is does the height of the target play any role in determining the size of the object on screen.

Thanks for your help,

Login or Signup to post a comment