We would like to build a community for Small Basic programmers of any age who like to code. Everyone from total beginner to guru is welcome. Click here to register and share your programming journey!


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Point (0,0) in LD3DView image mapping
#1
Hi

I don't know if this should be new thread.

In the LD3DView examples point (0,0) is in the left down corner for purpose of image mapping. For example, images water.jpg, stones.jpg and wall.jpg are hard to see the right orientation of images. I think that (0,0) should be in the left upper corner of an image.

st
Reply
#2
Hi st,

So this little example shows an image on a 3D square (2 triangles)

Code:
LDNetwork.SetSSL()
flickr = LDUtilities.FixFlickr()
imageURL = Flickr.GetRandomPicture("Car")
tmpFile = File.GetTemporaryFilePath()
LDNetwork.DownloadFile(tmpFile,imageURL)
image = ImageList.LoadImage(tmpFile)
File.DeleteFile(tmpFile)

view3D = LD3DView.AddView(GraphicsWindow.Width,GraphicsWindow.Height,"True")
LD3DView.AutoControl("True","True",2,1)
LD3DView.AddAmbientLight(view3D,"White")
square = LD3DView.AddGeometry(view3D,"-0.5 -0.5 0.5:0.5 -0.5 0.5:0.5 0.5 0.5:0.5 0.5 0.5:-0.5 0.5 0.5:-0.5 -0.5 0.5","0 1 2 3 4 5","","Red","D")
LD3DView.AddImage(view3D,square,"0 0:1 0:1 1:1 1:0 1:0 0",image,"D")
LD3DView.TranslateGeometry(view3D,square,0,0,8)

The image does appear upside down, this is all about the texture coordinates.  I can't see a definative definition, but if we look at https://learn.microsoft.com/en-us/dotnet...oordinates

We see:
Code:
              Positions="-1 -1 0  1 -1 0  -1 1 0  1 1 0"
              Normals="0 0 1  0 0 1  0 0 1  0 0 1"
              TextureCoordinates="0 1  1 1  0 0  1 0   "
              TriangleIndices="0 1 2  1 3 2" />

This suggests that 3D coordinate -1,-1,0 is mapped to image 0,1 and 1,1,0 is mapped to 1,0.

Therefore in the Y direction (up down) -1 maps to 1 and 1 maps to 0; i.e. inverted - this just looks like a convention, so we should probably change the mapping in code, which then shows image correct way up.

Code:
LD3DView.AddImage(view3D,square,"0 1:1 1:1 0:1 0:0 0:0 1",image,"D")

Note that using the pre-defined 3D shapes this has been set up correctly, for example:

Code:
LDNetwork.SetSSL()
flickr = LDUtilities.FixFlickr()
imageURL = Flickr.GetRandomPicture("Car")
tmpFile = File.GetTemporaryFilePath()
LDNetwork.DownloadFile(tmpFile,imageURL)
image = ImageList.LoadImage(tmpFile)
File.DeleteFile(tmpFile)

view3D = LD3DView.AddView(GraphicsWindow.Width,GraphicsWindow.Height,"True")
LD3DView.AutoControl("True","True",2,1)
LD3DView.AddAmbientLight(view3D,"White")
'square = LD3DView.AddGeometry(view3D,"-0.5 -0.5 0.5:0.5 -0.5 0.5:0.5 0.5 0.5:0.5 0.5 0.5:-0.5 0.5 0.5:-0.5 -0.5 0.5","0 1 2 3 4 5","","Red","D")
'LD3DView.AddImage(view3D,square,"0 1:1 1:1 0:1 0:0 0:0 1",image,"D")
cube = LD3DView.AddCube(view3D,1,"Red","D")
LD3DView.AddImage(view3D,cube,"",image,"D")
LD3DView.TranslateGeometry(view3D,cube,0,0,8)
[-] The following 2 users Like litdev's post:
  • AbsoluteBeginner, stevantosic
Reply
#3
Hi litdev

Depending on your previous answer, this a try to rotate image with readable text on both side of a square around Y-axis:

Code:
LDNetwork.SetSSL()
flickr = LDUtilities.FixFlickr()
imageURL = Flickr.GetRandomPicture("word")
tmpFile = File.GetTemporaryFilePath()
LDNetwork.DownloadFile(tmpFile,imageURL)
image = ImageList.LoadImage(tmpFile)
File.DeleteFile(tmpFile)
image = ImageList.LoadImage(tmpFile)

'image = ImageList.LoadImage(Program.Directory + "/text1.png")

view3D = LD3DView.AddView(GraphicsWindow.Width,GraphicsWindow.Height,"True")
LD3DView.AutoControl("True","True",2,1)
LD3DView.AddAmbientLight(view3D,"White")

square = LD3DView.AddGeometry(view3D,"-0.5 -0.5 0.5:0.5 -0.5 0.5:0.5 0.5 0.5:0.5 0.5 0.5:-0.5 0.5 0.5:-0.5 -0.5 0.5","0 1 2 3 4 5","","Red","D")
LD3DView.AddImage(view3D,square, "0 1:1 1:1 0:1 0:0 0:0 1",image,"D")
LD3DView.TranslateGeometry(view3D,square,0,0,8)

squareBack = LD3DView.CloneObject(view3D, square)

LD3DView.RotateGeometry(view3D,squareBack,0,1,0,180)

LD3DView.AnimateRotation(view3D,square,0,1,0,0,360,5,-1)
LD3DView.AnimateRotation(view3D,squareBack,0,1,0,0,360,5,-1)

Is it possible to do it with AddBackImage and texture?
Default AddBackImage makes a "mirror" image and text is unreadable from left to right.

st
Reply
#4
Hi, 

There is no way to use differnt texture coordinates for the front and back, but we can use different images, one being reversed.

Look into the following:

Code:
imageReverse = LDImage.Copy(image)
LDImage.EffectReflect(imageReverse,0)

I can give a full example, but this should be a good start.
[-] The following 1 user Likes litdev's post:
  • stevantosic
Reply
#5
Many thanks! Now I see the power of LDImage. Great, really great.

Code:
LDNetwork.SetSSL()
flickr = LDUtilities.FixFlickr()
imageURL = Flickr.GetRandomPicture("word")
tmpFile = File.GetTemporaryFilePath()
LDNetwork.DownloadFile(tmpFile,imageURL)
image = ImageList.LoadImage(tmpFile)
File.DeleteFile(tmpFile)

imageReverse = LDImage.Copy(image)
' Vertical
LDImage.EffectReflect(imageReverse, 0)
' Horizontal
'LDImage.EffectReflect(imageReverse, 1)

view3D = LD3DView.AddView(GraphicsWindow.Width,GraphicsWindow.Height,"True")
LD3DView.AutoControl("True","True",2,1)
LD3DView.AddAmbientLight(view3D,"White")
square = LD3DView.AddGeometry(view3D,"-0.5 -0.5 0.5:0.5 -0.5 0.5:0.5 0.5 0.5:0.5 0.5 0.5:-0.5 0.5 0.5:-0.5 -0.5 0.5","0 1 2 3 4 5","","Red","D")
LD3DView.AddImage(view3D,square, "0 1:1 1:1 0:1 0:0 0:0 1",image,"D")
LD3DView.AddBackImage(view3D,square, "",imageReverse,"D")

LD3DView.TranslateGeometry(view3D,square,0,0,8)
LD3DView.AnimateRotation(view3D,square,0,1,0,0,360,5,-1)
'LD3DView.AnimateRotation(view3D,square,1,0,0,0,360,5,-1)

st
[-] The following 2 users Like stevantosic's post:
  • AbsoluteBeginner, litdev
Reply
#6
st,

If I run this I see one picture that turns 360, but it only shows the frontside 180 degrees. The backside is blank 180 degrees. Is that the way it supposed to be?

JR
Reply
#7
Hi JR

I guess you need to download Beta version of LitDev extension version 1.2.26.0. (https://litdev.uk/#Extensions). For details you can see https://litdev.uk/mybb/showthread.php?tid=29.
Then you will see the same rotating image without blank square.

Also, there is litdev's article about 3D visualisation: https://learn.microsoft.com/en-us/archiv...ualisation. Awesome.

st
[-] The following 1 user Likes stevantosic's post:
  • AbsoluteBeginner
Reply
#8
st,

That fixed it! Thanks so much. I didn't realize that I needed the Beta version. Thanks for LitDev article.

JR
[-] The following 1 user Likes jrmrhrb00's post:
  • stevantosic
Reply
#9
LD3DView.AddImage(view3D,square,"0 0:1 0:1 1:1 1:0 1:0 0",image,"D")

LD3DView.AddImage(view3D,square,"0 1:1 1:1 0:1 0:0 0:0 1",image,"D")

The first line will show an image that is upside down. The second line corrects this and it shows the scene right side up. I totally don't understand this. I think in the first line where it is: 0 0:1 and it changes to 0 1:1 that is for y and the same at the end of the first line which is 0 changes to 1 in the second line. Why did everything else in the second line change? As I said I don't understand.

JR
Reply
#10
The texture coordinates say how an image is orientated and represent coordinates on the image that are to be associated with each coordinate for the 3D shape.

So 0 0:1 0:1 1:1 1:0 1:0 0 are the first coodinate of the shape corresponds to 0 0 on the image, 1 0 the second coordinate etc.

The difference between the two is that they have the y coordinate of the image reversed, hence upside down.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)