Small Basic Forum
Point (0,0) in LD3DView image mapping - Printable Version

+- Small Basic Forum (https://litdev.uk/mybb)
+-- Forum: Small Basic (https://litdev.uk/mybb/forumdisplay.php?fid=1)
+--- Forum: Extensions (https://litdev.uk/mybb/forumdisplay.php?fid=3)
+--- Thread: Point (0,0) in LD3DView image mapping (/showthread.php?tid=31)

Pages: 1 2

Point (0,0) in LD3DView image mapping - stevantosic - 02-04-2024

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

RE: Point (0,0) in LD3DView image mapping - litdev - 02-04-2024

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/api/system.windows.media.media3d.meshgeometry3d.texturecoordinates

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)


RE: Point (0,0) in LD3DView image mapping - stevantosic - 02-18-2024

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

RE: Point (0,0) in LD3DView image mapping - litdev - 02-18-2024

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.

RE: Point (0,0) in LD3DView image mapping - stevantosic - 02-18-2024

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

RE: Point (0,0) in LD3DView image mapping - jrmrhrb00 - 02-19-2024

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

RE: Point (0,0) in LD3DView image mapping - stevantosic - 02-20-2024

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/archive/blogs/smallbasic/3d-visualisation. Awesome.

st

RE: Point (0,0) in LD3DView image mapping - jrmrhrb00 - 02-20-2024

st,

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

JR

RE: Point (0,0) in LD3DView image mapping - jrmrhrb00 - 02-22-2024

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

RE: Point (0,0) in LD3DView image mapping - litdev - 02-22-2024

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.