Away3D Forum Need help understanding texture mapping

jansensan, Newbie
Posted: 10 August 2011 07:46 PM Total Posts: 16

Hello Away3D forums! I’m just jumping into this library, love it so far.

I’m really a beginner when it comes to the 3D logic. I mean, I get the idea of cameras, scenes, etc. but creating objects and interacting with them is still voodoo to me.

So I managed to run Away 3D 4.0 on FDT 4 Pure with Flash Player 11 beta 2, I can place a cube and other basic shapes on the scene, and changes their properties.

I’m at a point where I need to look into two things:

a) how to apply a bitmap to an object

I have managed to add an image to a cube, however when I try with another image, I get errors. Is there something I should know about what type, format or dimension of images work?

How do I choose what image I apply to what side of my cube? Or is there another way to go about this?

b) how to interact with the object

I did try to read and use the examples (https://github.com/away3d/away3d-examples-broomstick), but there arent any comments and I do not get what the mesh thing is. I want to be able to drag an object by clicking on etc.

Thanks in advance, any help is useful! Don’t worry, I’m not new to AS3 at all, just 3D.

Somokon, Member
Posted: 10 August 2011 08:26 PM Total Posts: 75 [ # 1 ]

Hi jansensan,

The dimensions of a bitmap need to match and be in powers of two. eg. 256x256, 512x512, 1024x1024, etc. I use .jpgs and .pngs, but you should be able to use any format that AS3 can load and parse into a bitmapData object.

To build mouse interaction with a 3D object, you need to add MouseEvent3D listeners to your objects, and do whatever logic you need to move them around in the callback functions.

jansensan, Newbie
Posted: 10 August 2011 08:41 PM Total Posts: 16 [ # 2 ]

Oh that is already great help! With a square image however, how do I choose what goes on what side? Especially if I want to do shapes that are not a cube, but more like a wall for example?

skitley, Newbie
Posted: 11 August 2011 12:19 AM Total Posts: 6 [ # 3 ]

Jansensan,

This is high-level (brief) overview from my standpoint: two basic workflows to applying a material to a mesh.

1) Rely on your 3D software (Maya, 3dsMax, Blender, etc) to create textured models and apply materials. Then export that in a compatible format (.3ds for example) to bring into Away3D. From there, its actionscript, and Away3D is able to parse the incoming file and do its thing to make the mesh and material available.

2) Make everything in actionscript (I dont know enough details about how to do this yet, so I say no further).

In the case of #1, your exported files will contain information about materials associated with the model/mesh (a list of coordinates that relate to the placement of your texture/material). So for this process, you will ideally not have to worry about aligning your texture on your model, as the importing/parsing of the 3D file will be taken care of by Away3D.

Check out this guy’s blog article (and others on his site) - http://www.derschmale.com/2011/07/22/the-away3d-4-0-scene-graph-architecture-1-node-types/
It’s a good read about how meshes and materials relate.

Lastly, if you really want to dive into the 3D world to get the basics down, I’d recommend Blender. It’s free, there’s TONS of tutorials all over the place, and knowing the 3D workflow is a huge benefit for programming assets that you may receive or make yourself.

alx1507, Newbie
Posted: 11 August 2011 02:42 PM Total Posts: 4 [ # 4 ]

Somokon - 10 August 2011 08:26 PM
Hi jansensan,

The dimensions of a bitmap need to match and be in powers of two. eg. 256x256, 512x512, 1024x1024, etc. I use .jpgs and .pngs, but you should be able to use any format that AS3 can load and parse into a bitmapData object.

I may be wrong but I believe you can also do something along the lines of 1024x512. I’ve had luck with things that are the ‘silver ratio’ (512x256, 2048x1024, etc…)

Alexander Seifert, Moderator
Posted: 12 August 2011 07:18 AM Total Posts: 129 [ # 5 ]

alx1507,
that’s correct. Textures do not need to be square. However, if they are not, automatic mip map creation will fail, which lead Stage3D to throw an error in previous versions. I don’t know if that’s still the case, but if so, you need to set BitmapMaterial.mimap = false to prevent that error.

Cheers!
Alex

Signature

http://www.deltastrike.org

jansensan, Newbie
Posted: 13 August 2011 01:51 PM Total Posts: 16 [ # 6 ]

Alex, thanks for the tip on the mipmap value, it works that way.

However, I am confused as of how a texture is applied. I read about the tile6 parameter, so if it is set to true, the mapping is applied, otherwise it just repeats the texture on each side. I also read that a 2x3 grid is necessary for this, so I did this image to test: http://jansensan.net/experiments/away3d-tests/resources/images/1024x1024.jpg

See the test results here (you need Flash Player 11): http://jansensan.net/experiments/away3d-tests/cube01.html

Drag the mouse on the screen to rotate the cube.

Now I see that some sides are repeated, some others are not respecting the 2x3 grid. So how does one go about choosing what is put on each side without having to resort to 3D software?

Thanks!

Amon, Newbie
Posted: 15 August 2011 03:15 PM Total Posts: 15 [ # 7 ]

I don’t understand it either. If I use tile6 param set to true, according to docs, I expect to give 2x3 bitmapData wrapped in BitmapMaterial as an input where unit of this measure is power of two. However it yells that given material is not power of two! How can it be power of two when what I need is 2:3 ratio!?

It appears that I am not the only one: googling…

Is it a bug?

80prozent, Sr. Member
Posted: 15 August 2011 06:50 PM Total Posts: 430 [ # 8 ]

hi

i checked in the cube.buildUVs() function.

here is the part of the function that produces the error:

for (i = 0; i <= _segmentsW; i++) {
    outer_uv = u_tile_dim * (i/_segmentsW);

    for (j = 0; j <= _segmentsH; j++) {
     uvData[uidx++] = outer_uv;
     uvData[uidx++] = 1-v_tile_dim * (j/_segmentsH);
     uvData[uidx++] = 1-outer_uv;
     uvData[uidx++] = 1-(v_tile_step + v_tile_dim * (j/_segmentsH));
    }
   }

   for (i = 0; i <= _segmentsW; i++) {
    outer_uv = u_tile_step + u_tile_dim * (i/_segmentsW);

    for (j = 0; j <= _segmentsD; j++) {
     uvData[uidx++] = outer_uv;
     uvData[uidx++] = 1-v_tile_dim * (j/_segmentsD);
     uvData[uidx++] = outer_uv;
     uvData[uidx++] = v_tile_step + v_tile_dim * (j/_segmentsD);
    }
   }

   for (i = 0; i <= _segmentsH; i++) {
    outer_uv = 2*u_tile_step + u_tile_dim * (i/_segmentsH);

    for (j = 0; j <= _segmentsD; j++) {
     uvData[uidx++] = 1-v_tile_dim * (j/_segmentsD);
     uvData[uidx++] = 1-outer_uv;
     uvData[uidx++] = v_tile_step + v_tile_dim * (j/_segmentsD);
     uvData[uidx++] = 1-outer_uv;
    }
   }

   target.updateUVData(uvData); 

i changed it into this:

for (i = 0; i <= _segmentsW; i++) {
    outer_uv = u_tile_dim * (i/_segmentsW);

    for (j = 0; j <= _segmentsH; j++) {
     uvData[uidx++] = outer_uv;
     uvData[uidx++] = 1-v_tile_dim * (j/_segmentsH);
     uvData[uidx++] = 1-outer_uv;
     uvData[uidx++] = 1-(v_tile_step + v_tile_dim * (j/_segmentsH));
    }
   }

   for (i = 0; i <= _segmentsW; i++) {
    outer_uv = u_tile_step + u_tile_dim * (i/_segmentsW);

    for (j = 0; j <= _segmentsD; j++) {
     uvData[uidx++] = outer_uv;
     uvData[uidx++] = 1-v_tile_dim * (j/_segmentsD);
     uvData[uidx++] = 1-outer_uv;
     uvData[uidx++] = 1-(v_tile_step + v_tile_dim * (j/_segmentsD));
    }
   }

   for (i = 0; i <= _segmentsH; i++) {
    outer_uv = v_tile_step + v_tile_dim * (i/_segmentsW);

    for (j = 0; j <= _segmentsD; j++) {
     uvData[uidx++] = (u_tile_dim * ((_segmentsD-j)/_segmentsD));
     uvData[uidx++] = 1-outer_uv;
     uvData[uidx++] = 1-(u_tile_dim * ((_segmentsD-j)/_segmentsD));
     uvData[uidx++] = v_tile_step + v_tile_dim * ((_segmentsW-i)/_segmentsW);
    }
   }

   target.updateUVData(uvData); 

and its working like expected

hope that helps

Signature

sorry…i hope my actionscript is better than my english…

Amon, Newbie
Posted: 15 August 2011 07:15 PM Total Posts: 15 [ # 9 ]

But what’s the point in narrowing 6 square bitmap data objects in order to pack them into the one square bitmap, and then cut it, and stretch them again while producing faces on 3D stage? Why there is no possibility to supply 6 separate objects as in SkyBox instead of that lossy concept?

jansensan, Newbie
Posted: 15 August 2011 07:37 PM Total Posts: 16 [ # 10 ]

Thanks for the fix 80prozent, it indeed corrects the issue:
http://jansensan.net/experiments/away3d-tests/cube02.html

To the guys of Away3d: is this something that we can look forward to being corrected into a next release?

Amon: I agree with you, maybe there should be a way to provide 6 different images if we want to, although I think that people who work with 3D software are used to having an image mapped onto a shape.

80prozent, Sr. Member
Posted: 15 August 2011 07:37 PM Total Posts: 430 [ # 11 ]

i understand what you mean

loading 1024x1024 pixel, and scaling the bitmap down again seems like a waste of memory…

but then again, how you wanna place 6 quads on one quad without wasting space.

i had a look into the skybox. it seems to be far more complex than a simple cube-primitive, using its own spezial skyboxmaterial to load a cubemap (that is another class) and somehow theres a thing involved called CubeTexture3DProxy….

the skybox even has its own render-pass (SkyBoxPass)

all this stuff is way over my head (i hope only for now) and i cant tell you if it would be usefull to create something like this only to map a primitive cube skybox-like.

i guess primitives should be simple.

for a cube with different sides the easy way:

build your cube out of 6 planes each with own material

or build a cuba as a mesh, consisting of 6 submeshes, each with own material

Signature

sorry…i hope my actionscript is better than my english…

John Brookes, Moderator
Posted: 15 August 2011 08:34 PM Total Posts: 732 [ # 12 ]

A single texture is faster than 6 on the gpu.

To swap a side draw on the bitmapdata of the material.

SKybox uses 6 as you need big bitmaps and theres a limit to how big a single texture can be

Amon, Newbie
Posted: 16 August 2011 07:17 AM Total Posts: 15 [ # 13 ]

Ok, so even if 2x3 grid on a square is right and inteded, I assume that jansensan’s test pointed out an issue with tile6 option?

Ringo Blanken, Administrator
Posted: 16 August 2011 07:57 AM Total Posts: 120 [ # 14 ]

Amon he talks about a 2x3 grid, what I see in his picture is a 3x2 grid.

Signature

Freelancer: http://www.ringo.nl/en/
http://www.jiglibflash.com
http://www.awayphysics.com
http://www.away3d.com

Alexander Seifert, Moderator
Posted: 16 August 2011 08:38 AM Total Posts: 129 [ # 15 ]

JohnBrookes - 15 August 2011 08:34 PM
SKybox uses 6 as you need big bitmaps and theres a limit to how big a single texture can be

According to some statements from Adobe, there is no limit any more regarding texture size. Would it be worth performance wise changing the SkyBox to a single texture instead of six?

Signature

http://www.deltastrike.org

Need help understanding texture mapping Software: Away3D 4.x

jansensan, Newbie Posted: 10 August 2011 07:46 PM Total Posts: 16 Hello Away3D forums! I’m just jumping into this library, love it so far. I’m really a beginner when it comes to the 3D logic. I mean, I get the idea of cameras, scenes, etc. but creating objects and interacting with them is still voodoo to me. So I managed to run Away 3D 4.0 on FDT 4 Pure with Flash Player 11 beta 2, I can place a cube and other basic shapes on the scene, and changes their properties. I’m at a point where I need to look into two things: a) how to apply a bitmap to an object I have managed to add an image to a cube, however when I try with another image, I get errors. Is there something I should know about what type, format or dimension of images work? How do I choose what image I apply to what side of my cube? Or is there another way to go about this? b) how to interact with the object I did try to read and use the examples (https://github.com/away3d/away3d-examples-broomstick), but there arent any comments and I do not get what the mesh thing is. I want to be able to drag an object by clicking on etc. Thanks in advance, any help is useful! Don’t worry, I’m not new to AS3 at all, just 3D.
Somokon, Member Posted: 10 August 2011 08:26 PM Total Posts: 75 [ # 1 ] Hi jansensan, The dimensions of a bitmap need to match and be in powers of two. eg. 256x256, 512x512, 1024x1024, etc. I use .jpgs and .pngs, but you should be able to use any format that AS3 can load and parse into a bitmapData object. To build mouse interaction with a 3D object, you need to add MouseEvent3D listeners to your objects, and do whatever logic you need to move them around in the callback functions.
jansensan, Newbie Posted: 10 August 2011 08:41 PM Total Posts: 16 [ # 2 ] Oh that is already great help! With a square image however, how do I choose what goes on what side? Especially if I want to do shapes that are not a cube, but more like a wall for example?
skitley, Newbie Posted: 11 August 2011 12:19 AM Total Posts: 6 [ # 3 ] Jansensan, This is high-level (brief) overview from my standpoint: two basic workflows to applying a material to a mesh. 1) Rely on your 3D software (Maya, 3dsMax, Blender, etc) to create textured models and apply materials. Then export that in a compatible format (.3ds for example) to bring into Away3D. From there, its actionscript, and Away3D is able to parse the incoming file and do its thing to make the mesh and material available. 2) Make everything in actionscript (I dont know enough details about how to do this yet, so I say no further). In the case of #1, your exported files will contain information about materials associated with the model/mesh (a list of coordinates that relate to the placement of your texture/material). So for this process, you will ideally not have to worry about aligning your texture on your model, as the importing/parsing of the 3D file will be taken care of by Away3D. Check out this guy’s blog article (and others on his site) - http://www.derschmale.com/2011/07/22/the-away3d-4-0-scene-graph-architecture-1-node-types/ It’s a good read about how meshes and materials relate. Lastly, if you really want to dive into the 3D world to get the basics down, I’d recommend Blender. It’s free, there’s TONS of tutorials all over the place, and knowing the 3D workflow is a huge benefit for programming assets that you may receive or make yourself.
alx1507, Newbie Posted: 11 August 2011 02:42 PM Total Posts: 4 [ # 4 ] Somokon - 10 August 2011 08:26 PM Hi jansensan, The dimensions of a bitmap need to match and be in powers of two. eg. 256x256, 512x512, 1024x1024, etc. I use .jpgs and .pngs, but you should be able to use any format that AS3 can load and parse into a bitmapData object. I may be wrong but I believe you can also do something along the lines of 1024x512. I’ve had luck with things that are the ‘silver ratio’ (512x256, 2048x1024, etc…)
Alexander Seifert, Moderator Posted: 12 August 2011 07:18 AM Total Posts: 129 [ # 5 ] alx1507, that’s correct. Textures do not need to be square. However, if they are not, automatic mip map creation will fail, which lead Stage3D to throw an error in previous versions. I don’t know if that’s still the case, but if so, you need to set BitmapMaterial.mimap = false to prevent that error. Cheers! Alex Signature http://www.deltastrike.org
jansensan, Newbie Posted: 13 August 2011 01:51 PM Total Posts: 16 [ # 6 ] Alex, thanks for the tip on the mipmap value, it works that way. However, I am confused as of how a texture is applied. I read about the tile6 parameter, so if it is set to true, the mapping is applied, otherwise it just repeats the texture on each side. I also read that a 2x3 grid is necessary for this, so I did this image to test: http://jansensan.net/experiments/away3d-tests/resources/images/1024x1024.jpg See the test results here (you need Flash Player 11): http://jansensan.net/experiments/away3d-tests/cube01.html Drag the mouse on the screen to rotate the cube. Now I see that some sides are repeated, some others are not respecting the 2x3 grid. So how does one go about choosing what is put on each side without having to resort to 3D software? Thanks!
Amon, Newbie Posted: 15 August 2011 03:15 PM Total Posts: 15 [ # 7 ] I don’t understand it either. If I use tile6 param set to true, according to docs, I expect to give 2x3 bitmapData wrapped in BitmapMaterial as an input where unit of this measure is power of two. However it yells that given material is not power of two! How can it be power of two when what I need is 2:3 ratio!? It appears that I am not the only one: googling… Is it a bug?
80prozent, Sr. Member Posted: 15 August 2011 06:50 PM Total Posts: 430 [ # 8 ] hi i checked in the cube.buildUVs() function. here is the part of the function that produces the error: for (i = 0; i <= _segmentsW; i++) { outer_uv = u_tile_dim * (i/_segmentsW); for (j = 0; j <= _segmentsH; j++) { uvData[uidx++] = outer_uv; uvData[uidx++] = 1-v_tile_dim * (j/_segmentsH); uvData[uidx++] = 1-outer_uv; uvData[uidx++] = 1-(v_tile_step + v_tile_dim * (j/_segmentsH)); } } for (i = 0; i <= _segmentsW; i++) { outer_uv = u_tile_step + u_tile_dim * (i/_segmentsW); for (j = 0; j <= _segmentsD; j++) { uvData[uidx++] = outer_uv; uvData[uidx++] = 1-v_tile_dim * (j/_segmentsD); uvData[uidx++] = outer_uv; uvData[uidx++] = v_tile_step + v_tile_dim * (j/_segmentsD); } } for (i = 0; i <= _segmentsH; i++) { outer_uv = 2u_tile_step + u_tile_dim (i/_segmentsH); for (j = 0; j <= _segmentsD; j++) { uvData[uidx++] = 1-v_tile_dim * (j/_segmentsD); uvData[uidx++] = 1-outer_uv; uvData[uidx++] = v_tile_step + v_tile_dim * (j/_segmentsD); uvData[uidx++] = 1-outer_uv; } } target.updateUVData(uvData); i changed it into this: for (i = 0; i <= _segmentsW; i++) { outer_uv = u_tile_dim * (i/_segmentsW); for (j = 0; j <= _segmentsH; j++) { uvData[uidx++] = outer_uv; uvData[uidx++] = 1-v_tile_dim * (j/_segmentsH); uvData[uidx++] = 1-outer_uv; uvData[uidx++] = 1-(v_tile_step + v_tile_dim * (j/_segmentsH)); } } for (i = 0; i <= _segmentsW; i++) { outer_uv = u_tile_step + u_tile_dim * (i/_segmentsW); for (j = 0; j <= _segmentsD; j++) { uvData[uidx++] = outer_uv; uvData[uidx++] = 1-v_tile_dim * (j/_segmentsD); uvData[uidx++] = 1-outer_uv; uvData[uidx++] = 1-(v_tile_step + v_tile_dim * (j/_segmentsD)); } } for (i = 0; i <= _segmentsH; i++) { outer_uv = v_tile_step + v_tile_dim * (i/_segmentsW); for (j = 0; j <= _segmentsD; j++) { uvData[uidx++] = (u_tile_dim * ((_segmentsD-j)/_segmentsD)); uvData[uidx++] = 1-outer_uv; uvData[uidx++] = 1-(u_tile_dim * ((_segmentsD-j)/_segmentsD)); uvData[uidx++] = v_tile_step + v_tile_dim * ((_segmentsW-i)/_segmentsW); } } target.updateUVData(uvData); and its working like expected hope that helps Signature sorry…i hope my actionscript is better than my english…
Amon, Newbie Posted: 15 August 2011 07:15 PM Total Posts: 15 [ # 9 ] But what’s the point in narrowing 6 square bitmap data objects in order to pack them into the one square bitmap, and then cut it, and stretch them again while producing faces on 3D stage? Why there is no possibility to supply 6 separate objects as in SkyBox instead of that lossy concept?
jansensan, Newbie Posted: 15 August 2011 07:37 PM Total Posts: 16 [ # 10 ] Thanks for the fix 80prozent, it indeed corrects the issue: http://jansensan.net/experiments/away3d-tests/cube02.html To the guys of Away3d: is this something that we can look forward to being corrected into a next release? Amon: I agree with you, maybe there should be a way to provide 6 different images if we want to, although I think that people who work with 3D software are used to having an image mapped onto a shape.
80prozent, Sr. Member Posted: 15 August 2011 07:37 PM Total Posts: 430 [ # 11 ] i understand what you mean loading 1024x1024 pixel, and scaling the bitmap down again seems like a waste of memory… but then again, how you wanna place 6 quads on one quad without wasting space. i had a look into the skybox. it seems to be far more complex than a simple cube-primitive, using its own spezial skyboxmaterial to load a cubemap (that is another class) and somehow theres a thing involved called CubeTexture3DProxy…. the skybox even has its own render-pass (SkyBoxPass) all this stuff is way over my head (i hope only for now) and i cant tell you if it would be usefull to create something like this only to map a primitive cube skybox-like. i guess primitives should be simple. for a cube with different sides the easy way: build your cube out of 6 planes each with own material or build a cuba as a mesh, consisting of 6 submeshes, each with own material Signature sorry…i hope my actionscript is better than my english…
John Brookes, Moderator Posted: 15 August 2011 08:34 PM Total Posts: 732 [ # 12 ] A single texture is faster than 6 on the gpu. To swap a side draw on the bitmapdata of the material. SKybox uses 6 as you need big bitmaps and theres a limit to how big a single texture can be
Amon, Newbie Posted: 16 August 2011 07:17 AM Total Posts: 15 [ # 13 ] Ok, so even if 2x3 grid on a square is right and inteded, I assume that jansensan’s test pointed out an issue with tile6 option?
Ringo Blanken, Administrator Posted: 16 August 2011 07:57 AM Total Posts: 120 [ # 14 ] Amon he talks about a 2x3 grid, what I see in his picture is a 3x2 grid. Signature Freelancer: http://www.ringo.nl/en/ http://www.jiglibflash.com http://www.awayphysics.com http://www.away3d.com
Alexander Seifert, Moderator Posted: 16 August 2011 08:38 AM Total Posts: 129 [ # 15 ] JohnBrookes - 15 August 2011 08:34 PM SKybox uses 6 as you need big bitmaps and theres a limit to how big a single texture can be According to some statements from Adobe, there is no limit any more regarding texture size. Would it be worth performance wise changing the SkyBox to a single texture instead of six? Signature http://www.deltastrike.org

Need help understanding texture mapping

Login

Away3D Forum

Member Login