Construct 3 3DObject Plugin - SDK V1 only
This plugin loads a 3D Model into Construct 3, similar to the new built-in 3DShape plugin, but the 3D object can be a more complicated 3D model, loaded from a 3D model file format and texture. It also supports 3D animations.
It only supports gltf embedded and glb formats (preferably with an embedded texture in the file, a separate texture png file can also be supported.)
Please leave feedback or tag @kindeyegames on X or Mikal in the Construct Community Discord.
Known issues
- The bounding box may not fully track the model with rotations.
3D Model file requirements:
It's highly recommended to set 3DObject projects to 'regular' z-axis settings.
- It's highly recommended to set 3DObject projects to 'regular' z-axis settings.
- Must be gltf/glb embedded formatand embedded texture (png, jpg formats are ok)
- The texture can be embedded in the gltf/glb or supplied as an image in the c3 editor, but the gltf/glb file must have a material referring to a texture if it's not using a solid color.
- Do not include other non diffuse textures (e.g. normal map, bump map, etc.) in the gltf/glb embedded files if possible, they are not used, but would still take up memory.
- It's highly recommended to set 3DObject projects to 'regular' z-axis settings.
- Be aware of the 0,0,0 origin relative to the model center (affects rotation center and position.) This can be changed as needed with the Set local center ACE.
- Be aware of the relative scale of the model in model units. This can be scaled up/down with the Set scale ACE or property and xScale, yScale, zScale (note that these are divisors, to match C3 zScale property.)
- 3D models are available on CGTrader and Turbosquid, but you may need to find the ones that have gltf and texture support. If there are multiple textures, usually look for the ones labeled diffuse or albedo. These will be the base color textures (e.g. not normal maps, bump maps, etc.) You can only use models that have one diffuse/albedo texture or multiple textures. (If you have expertise with blender you can load a model with multiple textures and then bake them to a single texture and export texture in the gltf embedded/glb file.)
- If a model you use is not available in gltf file format, try loading the model into blender and exporting with thegltf embedded orglbfile format.
- Merge multiple animations into a single file gltf/glb file.
- If you are importing fbx to blender consider using plug-in to improve fbx import to blender: https://blendermarket.com/products/better-fbx-importer--exporter
Debugging 3D models
- Load gltf/glb model into: https://sandbox.babylonjs.com/
- Does it render correctly, have texture, animate correctly
- Check textures, material, animations
- Check scale
- Load model in https://gltf.report/ - check for errors / validation
- Check the 0,0,0 origin point of your model in a 3D modeling program (e.g. Blender), center your model as needed.
Performance notes
- Use just a few low polygon models (in the low thousand range, if you have a lot of models, move to the low hundreds range)
- Animating models require additional performance
- You can control the animation rate to reduce the required CPU performance.
- Bake down to a single texture (using 3D modeling tool like blender)
- Use solid color models without texture (will save texture memory).
- Use a smaller texture map to save GPU memory (2k x 2k texture takes up 16MB, 512x512 is 1MB)
- If you are baking texture in blender, consider also baking in AO (on model only), this can give more depth to the model. AO Tutorial
Some more (From @meta comments on CC Discord)
- Do fake shadows with just sprite
- I you want shadow and light formations in your 3D model texture, you need to texture bake with combine bake type.
- At the same time reduce the number of triangles of the models by editing the meshes and investigate this bake type as high poly to low poly bake.
- You will see more things. The result you need to achieve at the end of the day is to achieve a 30k poly effect with low poly models with wonderful baked textures reduced from 30k tri to 1k tri.
- I suggest you to design your whole scene in blender beforehand and do the lighting there and bake it, and I suggest you to use only 1 material for each 3D model.
- Also generally use 256x256 for texture sizes, 512x512 is ideal for things I care about detail
- See WoW examples for great baking of texture with low poly geometry
Basic usage:
- Use project setting z axis scale 'regular'
- This sets the z axis scale to the same scale as x and y, which is better for 3D development (and you also can control the project FOV.)
- Add a 3DObject to the project
- Add gltf embedded file or glb file to the project (preferred to include texture in the embedded gltf/glb file)
- If you are using a gltf/glb with an embedded texture (preferred) set the image editor to a solid color, otherwise:
- Open 3DObject image editor loads the texture file into the image. Note image size must be larger than the Project's setting for spritesheet size (e.g. 512-4096), resize the image larger if needed in the image editor.
- Test! You can use the normal position ACEs to move in x,y direction and position related behaviors should work (though I tend to lock the 3DObject with other sprites w/ behaviors using events)
- To change z position, use the setZ elevation ACE (other behaviors or actions which affect zElevation should also work, e.g. sine behavior, drag and drop, etc.)
- Set the zHeight to match the relative zHeight of the object (used for C3 3D viewport clipping.)
- Please post feedback and pix/vid of your tests.
Advanced uses: read the dev logs and look at their associated examples.
Future state if this goes well:
- *DONE* Support multiple instances of one 3DObject
- *DONE* More animation ACEs (end of animation trigger, etc.)
- *DONE* Add expression for current animation time or frame.
- *DONE* Blend between animation changes
- *DONE* Support multiple textures
- *DONE* Support solid color
- *DONE* Runtime load model (single load allowed)
- *DONE* Load different model for different instances of the same object (single load allowed, allocates memory on CPU and GPU for each instance.)
- *DONE* Dynamic change of a mesh's material (e.g. change a mesh's texture)
- *DONE* Support correct rotation (for mixed multiple node types)
- *DONE* Improve bounding box and z-height regions for rotated models to prevent early clipping.
- *DONE* ACEs for setting animation blend time.
- *DONE* Enable 3D flat lighting in worker animation mode.
- *DONE* Morph targets
- *DONE* Review SS3D Light, changing texture color w/ white lights.
- *DONE* Add vertex snapping (int vertex values) retro mode
- *DONE* Can other parameters (angle x,y,z, etc. be added to timeline)
- *DONE* Enable lighting baking / update lighting in worker animation mode.
- *DONE* Add flashlight example
- Add ACE to preload 3d models at startup w/o draw.
- Review worker animation mode causing issues on ios also with audio and possible crashes
- QoL:
- AnimationTimeLength
- AnimationFrameLength
- Reload model in editor if gltf path changes
- *DONE* On animation <name> finished
- *DONE* CurrentAnimationSpeed
- Add worker mode support for lighting
Big thanks to r0j0hound on the Construct forums for sharing the gltf parsing and animation code which I used as a base for the gltf integration in this plug-in.
Fire elemental model credit: https://sketchfab.com/3d-models/fire-elemental-05fe96ef7fca472ba0bf753686216002
Again, please leave feedback or tag @kindeyegames on Twitter.
A great video from @FozzleCC describing details of how to use 3D models with the plug-in. If this video is useful for you, please support FozzleCC on his Patreon: https://bit.ly/PatreonFoozleCC
Note one change since this video was produced, it is now recommended to embed textures in the gltf / glb files and 3DObject will use them directly from the file, there is no need to load them into the 'image' of the 3DObject. The image can be left blank or filled with a solid color for easier identification in the event sheet.
If you want to go directly to specific subjects in the video, please see the timecode links below:
0:00 - Intro
2:31 - 3DObject Plugin Overview
6:48 - What is GLTF?
7:40 - Blender Intro
8:53 - Where to get 3D Models?
9:59 - Extracting Unity Asset Store Assets
15:21 - Sketchfab and Blender Reference
16:46 - Merging Multiple FBX Animations in Blender
22:35 - Associating texture to model in Blender
24:33 - Export GLTF from Blender
25:29 - Import GLTF into Construct 3
28:43 - Bake Multiple Textures to One in Blender
34:41 - Setting up Lighting for Baking in Blender
40:56 - Importing Baked Texture Model into C3
42:43 - Getting Free Animations from Mixamo.com
43:23 - GTLF Viewer & Debug
45:27 - Tips on Using GLTF Models & Performance
47:04 - Improve Performance with Blender Decimate
| Updated | 3 days ago |
| Status | Released |
| Category | Assets |
| Rating | Rated 5.0 out of 5 stars (26 total ratings) |
| Author | kindeyegames |
| Made with | Construct |
| Tags | 3D,construct,construct-3 |
Download
Click download now to get access to the following files:
Development log
- Complete uniform caching for worker mode also
- Add back uniform location caching (speed up render)
- Fix - gpu-skinning, worker mode w/ non-skinned nodes
- Crash fixes
- Add basic Draco (mesh compression) support
- Fix vector color for models with vertex color
- Fix black color render in r441+
- Fix for unbound buffers (init before 3DObject)
Comments
Log in with itch.io to leave a comment.
Windows 11
Firefox and Edge
rtx3060
Happens on 440.2 Stable and r446
3DObject 2-75-10, fraglight 8-2.8.1, 3dphysics 2.24.2
worker and webgpu off
My test file is https://www.mediafire.com/file/hrnjo7r2q5tmauo/TEST.c3p/file
Enabling each one breaks something different.
Uncaught (in promise)TypeError:renderer.SetUniformMatrix4fv is not a function renderhttps://preview.construct.net/gltfModel.js:267
Drawhttps://preview.construct.net/scripts/plugins/Mikal_3DObject/c3runtime/instance....:285
Drawhttps://editor.construct.net/r440-2/preview/objects/instance.js:1
drawContenthttps://editor.construct.net/r440-2/preview/objects/instanceEffectList.js:1
_DrawContenthttps://editor.construct.net/r440-2/lib/gfx/effectCompositor/effectChain.js:1
_Render_FastPathhttps://editor.construct.net/r440-2/lib/gfx/effectCompositor/effectChain.js:1
Renderhttps://editor.construct.net/r440-2/lib/gfx/effectCompositor/effectChain.js:1
_DrawInstanceWithEffectshttps://editor.construct.net/r440-2/preview/layouts/layer.js:1
_DrawInstanceWithEffectsAndRestorehttps://editor.construct.net/r440-2/preview/layouts/layer.js:1
_DrawInstanceMaybeWithEffectshttps://editor.construct.net/r440-2/preview/layouts/layer.js:1
_Draw3DLayershttps://editor.construct.net/r440-2/preview/layouts/layout.js:1
_DrawLayerListhttps://editor.construct.net/r440-2/preview/layouts/layout.js:1
DrawMainhttps://editor.construct.net/r440-2/preview/layouts/layout.js:1
_Renderhttps://editor.construct.net/r440-2/preview/runtime.js:1
Renderhttps://editor.construct.net/r440-2/preview/runtime.js:1
Tickhttps://editor.construct.net/r440-2/preview/runtime.js:1
normalhttps://editor.construct.net/r440-2/preview/runtime.js:1
When i try open my project in relase 441 or more i always receive black screen in preview. someone also have this problem? Console shows:
[SW-Preview] Up to date
bootPreview.js:105 Registered service worker onhttps://preview.construct.net/
previewWindow.js:1 [C3 preview] Browser opened wrong size popup: wanted 854 x 480, got 854 x 479; resizing to compensate
local.html:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was receivedUnderstand this error
plugin.js:8 opts Object
plugin.js:171 [3DObject] allow gpu skinning
plugin.js:188 [3DObject] shader mikal_frag_light-8 not found
Object3DPlugin @ plugin.js:188Understand this warning
runtime.js:1 [C3 runtime] Hosted in worker, rendering with WebGL 2 [ANGLE (NVIDIA, NVIDIA GeForce RTX 4070 (0x00002786) Direct3D11 vs_5_0 ps_5_0, D3D11)]
40[.WebGL-0x2b14000d4600] GL_INVALID_OPERATION: glDrawElements: It is undefined behaviour to have a used but unbound uniform buffer.Understand this warning
40[.WebGL-0x2b14000d4600] GL_INVALID_OPERATION: glDrawElements: It is undefined behaviour to have a used but unbound uniform buffer.Understand this warning
plugin.js:47 [3DObject] Dummy UBO for bones created and bound.
instance.js:71 Monkey patching C3 renderer...
instance.js:174 Uncaught (in promise) TypeError: this._ExtendQuadBatch is not a function
at C3.Gfx.WebGLRenderer.Quad3D2 (instance.js:174:12)
at i.Plugins.Shape3D.Instance._DrawFace (runtime.js:1:7650)
at i.Plugins.Shape3D.Instance.Draw (runtime.js:1:5856)
at C3.Instance.Draw (instance.js:1:4154)
at C3.Layer._DrawInstance (layer.js:1:29009)
at C3.Layer._DrawInstanceMaybeWithEffects (layer.js:1:28891)
at C3.Layer._DrawInstances_3DCamera (layer.js:1:27673)
at C3.Layer.Draw (layer.js:1:26158)
at C3.Layout._DrawLayerList (layout.js:1:24177)
at C3.Layout.DrawMain (layout.js:1:23029)
i add one GLB model file and nothing more, preview cause black screenexample you can download here: https://drive.google.com/file/d/1MRyHZvYAUpO6FdNsrtlAfDboju97Jbee/view?usp=shari...
The latest beta broke the plugin, my project won't preview unless I delete the 3d object plugin from my project. I looked at the patch notes, they changed the way that things are rendered in order to be more efficient.
The error code:
canvasManager.js:1Error creating WebGL renderer:Error: Error linking shader program: Types of varying 'vColor' differ between VERTEX and FRAGMENT shaders. FRAGMENT varying vColor does not match any VERTEX varying
Is there a way to increase the limit of model loads during runtime? I'm making a multiplayer game and want players to be able to change models. I can't use "load from prefab instance" because 1) other instances of the player object are treated as extra players and 2) when the host syncs instances to peers, the UIDs are different for peers. My current approach works great except for the one-load runtime limit. 
I'm also open to suggestions if you have any ideas! Thanks!
Thanks so much for the replies! This worked. I was using a 2d sprite for the controller originally, but I had it in a container with the model for ease of referencing so I couldn't destroy the model without destroying the player controller. Instead of using a container, I added an instance variable to the model representing which 2d player controller it should follow. This way, I can easily destroy and re-create the model without impacting a player's container. Your idea to destroy & create new works just as well as the "reload" I initially wanted.
Thanks again, and great plugin!
Hi! I have a question. Is it safe to release a game on Steam using this plugin? I need to clear this up before committing to developing a 3D game with it. Can I develop the game without any issues? My main concern is: once the game is released on Steam, do I need to worry about the SDK? Or once it's released, do I no longer need to worry about the SDK?
Thanks Mikal. I reuploaded the files and things are back to normal. However, is there a way to restart an animation. Currently there is only options to speed up, change rate, pause, resume animation. I also noticed upon start of layout, the 3D objects don't appear instantly (delay in spawning). Thanks!
Sorry as I'm a little new to this but where do you set the animation time? I saw set/delete node, blend time, animation speed, rate, pause and resume animation. Since the object keeps looping non-stop, I just want to restart the animation whenever I wanted it to. I'm sorry for being so bad at this. 😔
This add-on will not be ported to SDK V2 (but an LTS version of C3 that is compatible with it will be available for use for quite a while).
I am working on a new, similar addon with more capabilities, which is working with SDK V2 now. I will announce here when it is ready (it will take a bit to get to the same feature set, but it already supports PBR texture and normal maps.)
Yes, transparency/alpha in 3D, in general, is always a challenge. The better results for simple renderers like C3 are to render in order as much as possible.
Check that the render order is the distance from the camera and all layers are 3D.
If your 'world' is one big GLB/GLTF model, it will be hard to sort properly (near and far meshes will all be part of one model.)
An alternate option is the 'screendoor transparency' in the 3D effect, which has a particular 'look' but will make the rendering support out-of-order rendering better.
DAN
Hello,
Watching FoozleCC, he shows sample code to copy and use. I have no idea where this code is – which sample is he showing/using?
https://www.youtube.com/watch?v=p02bz6jax8Y&t=1105s
Construct 3 r416.2 stable
Installed addons: Frag Light 2.8.0, SSAO 1.6, 3DObject, Rotate 3D
Preview 3DObjectFragLight - Scene is completely black.
F12 – I now see I have an error:
main.js:98 Uncaught TypeError: Cannot set properties of undefined (setting 'GetDefaultVertexShaderSource') at main.js:98:57
(anonymous) @ main.js:98Understand this errorAI
c3runtime.js:280 Uncaught (in promise) Error: Error compiling fragment shader: ERROR: 0:11: 'pos' : redefinition
at C3.Gfx.WebGLShaderProgram.Compile (c3runtime.js:280:1243)
at async C3.Gfx.WebGLShaderProgram.Create (c3runtime.js:280:1904)
at async C3.Gfx.WebGLRenderer.CreateShaderProgram (c3runtime.js:460:9318)
at async Promise.all (3DObjectFragLight-8/index 1)
at async C3.CanvasManager._InitWebGL (c3runtime.js:1190:6728)
at async C3.CanvasManager._InitRenderer (c3runtime.js:1190:7050)
at async C3.CanvasManager.CreateCanvas (c3runtime.js:1190:4819)
at async C3.Runtime._InitialiseCanvas (c3runtime.js:1195:18300)
at async C3.Runtime.Init (c3runtime.js:1195:10955)
at async Q._InitDOM (main.js:26:12442)
Same error after publishing and running in chrome using IIS.
3DObjectVertexColor –
Project exported – running in Chrome.. Scene is completely black.
Error log:
main.js:99 Uncaught TypeError: Cannot set properties of undefined (setting 'GetDefaultVertexShaderSource') at main.js:99:57Understand this errorAI
c3runtime.js:280 Uncaught (in promise) Error: Error compiling fragment shader: ERROR: 0:11: 'pos' : redefinition
ERROR: 0:12: 'vColor' : redefinition
at C3.Gfx.WebGLShaderProgram.Compile (c3runtime.js:280:1243)
at async C3.Gfx.WebGLShaderProgram.Create (c3runtime.js:280:1904)
at async C3.Gfx.WebGLRenderer.CreateShaderProgram (c3runtime.js:460:9318)
at async Promise.all (3DObjectVertexColor/index 0)
at async C3.CanvasManager._InitWebGL (c3runtime.js:1190:6728)
at async C3.CanvasManager._InitRenderer (c3runtime.js:1190:7050)
at async C3.CanvasManager.CreateCanvas (c3runtime.js:1190:4819)
at async C3.Runtime._InitialiseCanvas (c3runtime.js:1195:18300)
at async C3.Runtime.Init (c3runtime.js:1195:10955)
at async Q._InitDOM (main.js:26:12442)
Hello, thank you for this great plugin, I have a doubt, when I import a 3d object with the texture embeded appears compresed in game.
If I search the texture manually in construct 3 it shows ok.
The problem is I can´t search the texture for a mesh with multiples materials, also if I set a mesh as "static" with the texture checkbox marked, the texture appears corrupted.
Any idea how to resolve it? Thank you so much
Hi, there! First of all, congratulations and thank you for developing this much needed plugin!
I am creating a 2.5D platformer, but, after implementing some basic functionality to make the camera follow the player, I noticed that the objects on the left or right border of the screen pop in instead of just being there. Any idea of how I can prevent that and make sure that objects within the camera view are always visible?
I've attached a gif to illustrate the issue. The issue is noticeable if you look at the floor close to the horizontal border the player moves toward.
Yes, I used the bounding box scale ACE. Here is a screenshot of a model at the right border, with its bounding box scale set to 2x:
I've noticed that this behavior during runtime is very similar to what happens to 3D models in the layout editor. Here is a gif to illustrate what I mean (I'm scrolling the layout manually with the mouse):
I don't know if seeing the same symptom happening in the layout editor might give us any clue, but I thought I should include this. Perhaps this is caused by some project setting?
secondary nodes seem to light weird. notice that when I export just one node (the sprockets here) they light fine on their own. any idea? (the turret is it's own object so is unrelated to the body) It must be related to my object as testing with the clerk model from your examples is fine. But I don't what property of my object could be influenced by the other nodes
Try the latest version uploaded.
https://kindeyegames.itch.io/c3-3dobject-alpha/devlog/828933/fix-addon-fix-corru...
Apologies if the addon was corrupted for you; use safe mode to uninstall the addon:
https://www.construct.net/en/make-games/manuals/addon-sdk/guide/safe-mode
I am getting an error and I am not sure what it means.
When I set the object source in C3 I get "error: gltf, unhandled bufferView, try exporting gltf without using sparse accessors"
The model loads fine on the tester sites. the error it gives me is "
0
UNUSED_OBJECT
This object may be unused.
2
/meshes/0/primitives/0/attributes/TEXCOORD_0
" But I Don't know what that means.
I uploaded the file I am testing if you wanted to look at it.
https://drive.google.com/file/d/1JPLh9YELbWTffP7mHefZT7v2FmyJtujR/view?usp=shari...
Try this with the original file:
https://kindeyegames.itch.io/c3-3dobject-alpha/devlog/828684/fix-accessors-add-s...
Ok, I looked and the ACE is already there. Use Enable Quaternion and Set Quatrenion.
Set quaternion uses this format: "[x,y,z,w]", where x,y,z,w are the values of the quaternion.
You can use JS to create the quaternion using the globatThis.glMatrix libraries, they are documented here:
You could try:
setAxisAngle(out, axis, rad)
https://glmatrix.net/docs/module-quat.html
Hi, thanks for your reply, here is a test .....
https://drive.google.com/file/d/1Z3WFFDmTIyCTQur6u1Bz4tMStKRL2iF4/view?usp=drive...
original question....
I have tried every way to alter rotation but can't achieve this. please help.
It just picks a point in the mesh defined by the number and position of the point in the mesh list of points.
If you want to be more specific create a very small box and attach it to the model where you want the node to be, so that any of the points will be close to the location desired.
Also be aware that this may not work in gpu skinning. Instead use static geometry setting when this is needed.
Hi kindeyegames,
I'm working on a simulation game about a children's playground, but it will take a while (only 30% of the progress is done at the moment).
Due to the fact that there are a lot of 3D models used (about 30 different models), the performance will need to be optimized again later on (the image only show 1/5 of the game as it is still being designed).
I'll share it with you later if it's done.
Thank you very much for the addon, it makes it easier to make 3D games!
, is that possible?
