Difference between revisions of "Libs3D Library"

From GiderosMobile
(wip)
 
(19 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
== I am ready ==
 
== I am ready ==
As we have seen, when it comes to 3D, Gideros has a bunch of helper files packed in the '''Library''' folder.
+
As we have seen, to make more advanced 3D, Gideros has a bunch of helper files packed in the '''Library''' folder.
 +
 
 +
I will try to impress you with 3D Gideros ✨.
  
 
Here is the plan:
 
Here is the plan:
 
* start with shapes
 
* start with shapes
 
* add some .obj models
 
* add some .obj models
* maybe some .glb files
+
* add some .fbx animations
* some .fbx animations
 
 
 
I will try to impress you with 3D Gideros ✨.
 
  
Create a new Gideros project and add these two folders in the '''''assets''''' folder:
+
Please create a new Gideros project and copy the two following '''Library''' folders in the '''''assets''''' folder:
 
*'''3dbase'''
 
*'''3dbase'''
 
*'''luashader'''
 
*'''luashader'''
 +
 +
Create a '''models''' folder, and in this folder an '''objs''' folder. I also add a '''textures''' folder. Your file structure should look something like this:
 +
*'''YourProjectName'''
 +
**Plugins
 +
**Files
 +
***3dbase
 +
***luashader
 +
***models
 +
****objs
 +
****textures
 +
***''main''.lua
  
 
You can run your project, you should have a blank screen.
 
You can run your project, you should have a blank screen.
  
== The 3D Assets ==
+
== .obj Rulez ==
When you work with 3D, you need to follow some "engine" rulez. In Gideros there are a couple things to know:
+
When you work with 3D, you need to follow some "engine" rulez. In Gideros, for the '''.obj''' file format, those are:
*the texture shouldn't be embedded in the model. In Blender, use ''unpack resources''
+
*'''currently Gideros supports ''.png'' and ''.jpg'' image formats'''
*currently Gideros supports
+
*'''currently Gideros supports ''Base Color'', ''Texture map'' and ''Normal Map'''''
I have chosen this asset pack: https://roadtovostok.itch.io/road-to-vostok-assets-vol1.
+
*'''the textures shouldn't be embedded in the models. In Blender, use ''unpack resources''''':
 +
[[File:Blender_unpack_resources.png|414px]]
 +
 
 +
*'''your Blender BSDF shaders should look something like''':
 +
[[File:Blender_shading_tab.png|558px]]
 +
 
 +
*'''Gideros will import the position of the models, so make sure your models are at location 0, 0, 0'''
 +
 
 +
*'''I believe Gideros also imports the origin of the models, so place the origins accordingly'''
 +
 
 +
'''I personally use this Blender add-on: https://extensions.blender.org/add-ons/act-game-asset-creation-toolset/'''
 +
 
 +
Please note, you can still have the ''Metallic'', ''Roughness'' and other textures attached in your Blender BSDF shaders, Gideros will just ignore them.
 +
 
 +
== The assets: '''.obj''' ==
 +
I have chosen this cc0 asset pack: https://roadtovostok.itch.io/road-to-vostok-assets-vol1.
 +
 
 +
In 3D, the assets you download from the internet, often need some adjustement to follow your "engine" rulez 🤷‍♂️. I already made those adjustements and you can find the adjusted asset pack here: '''https://mokatunprod.itch.io/3dpixel-obj-packs'''.
 +
 
 +
Please copy the '''roadtovostok''' asset pack (or your own models) in the ''objs'' folder:
 +
***models
 +
****objs
 +
*****roadtovostok
 +
 
 +
== Gideros 3D ==
 +
For 3D, we use a Viewport with a 3D perspective projection Matrix. Everything is already setup and ready to use in the helper file ''3DView.lua''.
 +
 
 +
We set up a fullscreen 3D Viewport. For the perspective projection Matrix, we need a field of view (fov), a clipping near plane distance and a clipping far plane distance.
 +
<syntaxhighlight lang="lua">
 +
application:setBackgroundColor(0x454545)
 +
 
 +
-- we set up a fullscreen 3D viewport (fov: consoles 60, pc 90)
 +
local sw, sh = application:getContentWidth(), application:getContentHeight()
 +
local view = D3.View.new(sw,sh, 90, 0.1,1*1024) -- (sw,sh, fov, near,far)
 +
</syntaxhighlight>
 +
 
 +
'''For consoles a good fov angle should be around 60 and for pc around 90'''
 +
 
 +
<youtube>blZUao2jTGA</youtube>
 +
 
 +
The view is a Viewport with a perspective projection. You can see it as a "camera" you can position and set a target to look at.
 +
 
 +
Finally, we will add all our 3D models to a scene. The scene is a simple Sprite.
 +
<syntaxhighlight lang="lua">
 +
-- we will add 3D shapes and models to a scene
 +
local scene = view:getScene()
 +
</syntaxhighlight>
 +
 
 +
== A shape for the Ground ==
 +
The asset pack doesn't come with some kind of ground, so let's build our own.
  
'''In 3D, the assets you download often need some adjustement 🤷‍♂️. I made those adjustements and will use the pack I uploaded here: https://mokatunprod.itch.io/3dpixel-obj-packs'''
+
For the ground, we are going to use the Plane shape available in the helper file ''3DShapes.lua''.
 +
<syntaxhighlight lang="lua">
 +
-- a shape
 +
local ground = D3.Plane.new(0.6*8, nil, 0.6*8) -- (w,h,d)
 +
</syntaxhighlight>
  
You can download the adjusted pack or use your own models.
+
'''By definition a plane is flat, that's why we can set the height (h) as nil'''
  
 +
We add some image texture to it. Please pick any ground texture you like from any site (eg. https://polyhaven.com/textures) and put it in the '''textures''' folder. I picked this one: https://polyhaven.com/a/forrest_ground_01 '''1K JPG'''.
  
 +
[[File:3d_plane_polyhaven_forrest_ground.png|480px]]
  
== The Ground ==
+
<syntaxhighlight lang="lua">
As we are more learning than making a game, we won't really care if the 3D assets don't match 🤷‍♂️!
+
-- a shape
 +
local ground = D3.Plane.new(0.6*8, nil, 0.6*8) -- (w,h,d)
 +
-- and its texture
 +
local tex = Texture.new("models/textures/forrest_ground_01_diff_1k.jpg", nil, { wrap=Texture.REPEAT, } )
 +
local texsx, texsy = 0.17*8, 0.17*8 -- texture scaling
 +
ground:mapTexture(tex, texsx, texsy)
 +
</syntaxhighlight>
  
 +
'''Scale the texture according to your texture size using texture scale x (tessx) and texture scale y (texsy)'''
  
 +
We tell the shape to receive light and shadows.
 
<syntaxhighlight lang="lua">
 
<syntaxhighlight lang="lua">
 +
-- we tell the shape to receive light and shadows
 +
ground:updateMode(D3.Mesh.MODE_LIGHTING + D3.Mesh.MODE_SHADOW)
 
</syntaxhighlight>
 
</syntaxhighlight>
  
[[File:3d_toruZ.png|414px]]
+
Finally, we add the ground to the scene and the view to Gideros '''stage'''. The view (camera) has a position and a target to look at.
 +
<syntaxhighlight lang="lua">
 +
-- we add the shape to the scene
 +
scene:addChild(ground)
 +
-- and the scene to stage
 +
stage:addChild(view)
 +
 
 +
-- we position the view (camera) and its target
 +
view:lookAt(0*8,0.5*8,1*8, 0*8,0*8,0*8) -- (eyex,eyey,eyez, targetx,targety,targetz, upx,upy,upz)
 +
</syntaxhighlight>
  
 
== I am out 2 ==
 
== I am out 2 ==

Latest revision as of 03:10, 30 January 2026

I am ready

As we have seen, to make more advanced 3D, Gideros has a bunch of helper files packed in the Library folder.

I will try to impress you with 3D Gideros ✨.

Here is the plan:

  • start with shapes
  • add some .obj models
  • add some .fbx animations

Please create a new Gideros project and copy the two following Library folders in the assets folder:

  • 3dbase
  • luashader

Create a models folder, and in this folder an objs folder. I also add a textures folder. Your file structure should look something like this:

  • YourProjectName
    • Plugins
    • Files
      • 3dbase
      • luashader
      • models
        • objs
        • textures
      • main.lua

You can run your project, you should have a blank screen.

.obj Rulez

When you work with 3D, you need to follow some "engine" rulez. In Gideros, for the .obj file format, those are:

  • currently Gideros supports .png and .jpg image formats
  • currently Gideros supports Base Color, Texture map and Normal Map
  • the textures shouldn't be embedded in the models. In Blender, use unpack resources:

Blender unpack resources.png

  • your Blender BSDF shaders should look something like:

Blender shading tab.png

  • Gideros will import the position of the models, so make sure your models are at location 0, 0, 0
  • I believe Gideros also imports the origin of the models, so place the origins accordingly
I personally use this Blender add-on: https://extensions.blender.org/add-ons/act-game-asset-creation-toolset/

Please note, you can still have the Metallic, Roughness and other textures attached in your Blender BSDF shaders, Gideros will just ignore them.

The assets: .obj

I have chosen this cc0 asset pack: https://roadtovostok.itch.io/road-to-vostok-assets-vol1.

In 3D, the assets you download from the internet, often need some adjustement to follow your "engine" rulez 🤷‍♂️. I already made those adjustements and you can find the adjusted asset pack here: https://mokatunprod.itch.io/3dpixel-obj-packs.

Please copy the roadtovostok asset pack (or your own models) in the objs folder:

      • models
        • objs
          • roadtovostok

Gideros 3D

For 3D, we use a Viewport with a 3D perspective projection Matrix. Everything is already setup and ready to use in the helper file 3DView.lua.

We set up a fullscreen 3D Viewport. For the perspective projection Matrix, we need a field of view (fov), a clipping near plane distance and a clipping far plane distance.

application:setBackgroundColor(0x454545)

-- we set up a fullscreen 3D viewport (fov: consoles 60, pc 90)
local sw, sh = application:getContentWidth(), application:getContentHeight()
local view = D3.View.new(sw,sh, 90, 0.1,1*1024) -- (sw,sh, fov, near,far)
For consoles a good fov angle should be around 60 and for pc around 90

The view is a Viewport with a perspective projection. You can see it as a "camera" you can position and set a target to look at.

Finally, we will add all our 3D models to a scene. The scene is a simple Sprite.

-- we will add 3D shapes and models to a scene
local scene = view:getScene()

A shape for the Ground

The asset pack doesn't come with some kind of ground, so let's build our own.

For the ground, we are going to use the Plane shape available in the helper file 3DShapes.lua.

-- a shape
local ground = D3.Plane.new(0.6*8, nil, 0.6*8) -- (w,h,d)
By definition a plane is flat, that's why we can set the height (h) as nil

We add some image texture to it. Please pick any ground texture you like from any site (eg. https://polyhaven.com/textures) and put it in the textures folder. I picked this one: https://polyhaven.com/a/forrest_ground_01 1K JPG.

3d plane polyhaven forrest ground.png

-- a shape
local ground = D3.Plane.new(0.6*8, nil, 0.6*8) -- (w,h,d)
-- and its texture
local tex = Texture.new("models/textures/forrest_ground_01_diff_1k.jpg", nil, { wrap=Texture.REPEAT, } )
local texsx, texsy = 0.17*8, 0.17*8 -- texture scaling
ground:mapTexture(tex, texsx, texsy)
Scale the texture according to your texture size using texture scale x (tessx) and texture scale y (texsy)

We tell the shape to receive light and shadows.

-- we tell the shape to receive light and shadows
ground:updateMode(D3.Mesh.MODE_LIGHTING + D3.Mesh.MODE_SHADOW)

Finally, we add the ground to the scene and the view to Gideros stage. The view (camera) has a position and a target to look at.

-- we add the shape to the scene
scene:addChild(ground)
-- and the scene to stage
stage:addChild(view)

-- we position the view (camera) and its target
view:lookAt(0*8,0.5*8,1*8, 0*8,0*8,0*8) -- (eyex,eyey,eyez, targetx,targety,targetz, upx,upy,upz)

I am out 2

To do.

You are strongly encouraged to mess with the code.

Bye for now!


Libs3D