[Plugin] Three.js 3D canvas

Post your work in progress addons and get feedback

Post » Mon Jun 02, 2014 11:39 am

@QuaziGNRLnose
hmm...
is now then everything in 3D or can i like import only 3D models into our standard RTS template?
B
26
S
11
G
2
Posts: 669
Reputation: 5,038

Post » Mon Jun 02, 2014 12:33 pm

@QuaziGNRLnose Amazing! LOL, I can't get the last matchstick, I keep hurling into space trying to get on the last sphere! :D

I'd also like to see how does the plug in integrates with Construct.

How do you import and place the 3d objects, is there any visual feedback from within the editor, or this is done programmatically using events? The same goes with the animations, the materials, the lights, the cameras... It would be awesome if you make a video presentation about how you setup and configure a simple scene.

Anyway, the results are truly great, I only hope that implementing the 3D space into a 2D software doesn't end up making the workflow harder than using a native 3d middleware like Unity.
Last edited by eli0s on Mon Jun 02, 2014 12:40 pm, edited 1 time in total.
composer - multimedia artist
www.eli0s.com/en/
B
68
S
26
G
4
Posts: 1,146
Reputation: 9,649

Post » Mon Jun 02, 2014 12:38 pm

@QuaziGNRLnose very well done :) Price it totally justified. I will buy as soon as you answer the peoples questions in this thread.
B
40
S
11
G
4
Posts: 665
Reputation: 8,443

Post » Mon Jun 02, 2014 12:46 pm

I would like to know. Is it possible to run the Three.js canvas on its own rather than "streaming" it into the c2canvas? Mobile performance is essential for me.
B
40
S
11
G
4
Posts: 665
Reputation: 8,443

Post » Mon Jun 02, 2014 2:48 pm

shut up and take my money kind sir...but before this happens answer the people's questions. and another thing why not make a tutorial to show how easy is to work with the plugin in c2 and with three.js how to import objects blah blah blah...a very basic intro for the beginning.
B
18
S
3
G
1
Posts: 248
Reputation: 2,348

Post » Mon Jun 02, 2014 3:22 pm

@Schoening

The plugin has three modes for running the three.js canvas currently. it can be streamed in with video to texture which isn't really recommended because its slow, and the function seems to only work properly in chrome. it flips the texture in ie and firefox so those are upside down, and its either a bug with those or the construct function causing this. There are two modes which add a canvas element to the page and control the CSS styling to move/stretch/angle/make transparent the three.js canvas. One mode just plops it above construct if you want to ONLY use the three.js canvas, and the last one places it below the construct canvas by modifying the zindex of the created canvas and the construct canvas with css (so you need to make the construct canvas background transparent so it shows below) The background of the three.js canvas can also be made transparent if you place it above, so stuff shows behind everything.

Right now i haven't tested any mobile platforms (for lack of having any new enough to support webgl, but id imagine that the above or below modes should work best) i experimented with using three.js to render into the c2canvas directly but i hadn't got it to work since it messes up other rendering. i'll look into perhaps writing some modified three.js renderer for this if its something that people want enough, but right now it seems the extra canvas options are running things really well (as good as they can) on all 3 major browsers so id imagine they'd work well on those mobile platforms that support three.js . (The tiny tank demo uses the below mode if you're interested, but it's quite complex so it may be slow on simple devices, it was intended as a demo of an almost "feature complete" game to test how the plugin performed).

@eli0s

As of now its only done with events, but im working on complementary plugins/behaviours to go with the main one that allow things to be placed/controlled more easily as construct objects. Right now there is a grid and axis gimbal which shows at runtime (not in the editor due to current sdk limitation) which you later disable that gives an idea of the 3D space. To take care of building the level in tiny tank i just used sprites to mock out everything/test collisions in a top down view, and linked the id of the 3d object to those to control the 3d objects, there will eventually be a complementary plugin that comes with the main one in a future update which allows objects to be controlled like this without the middleman sprite or whatever.

Cameras/lights etc. are controlled like all other objects inside of the plugin. cameras are different in that they are not part of the scene and interface with viewports for stuff like splitscreen so they have slightly different controls. As of now imported animations isn't supported since i have to build an animation system first (the three.js animation handler isn't super user friendly), but a system for them will come soon (nothings stopping you however from animating things using construct or even other plugins to make something like the tank, which will give you way better control than importing anyway). 3D collision testing isn't worked out either since it will be part of the individual object complementary plugin to make it integrate with construct better, but you can still code simple 3D collision easily in construct either by making things top down and doing things 2D using constructs collision system directly (this is basically how a game like league of legends or an rts works) or by writing simple tests against the dummies for primitives like spheres/ramps/cubes/cylinder/lemon (lol) which isn't too hard if you look it up, like i did for tiny tank. I plan to perhaps make a 3D custom movement behavior later to make things way easier, and add more robust collision testing for normal information etc to be pulled from colliding geometry-geometry / primitive-primitive / primitive-geometry pairs.

I made this plugin so that i could use the simplicity of construct to make 3D stuff easier for me (using three.js directly is fast but a huge pain for bigger projects) Unity is pretty different, in that it does have a build in scene editor for 3D etc, but doing stuff is nowhere near coding wise as in construct. They can't easily be compared, but making tiny tank to me felt no harder than making any other game medium complexity project in construct 2, besides having to deal with the complexity of making 3D artwork in bender/sculptris vs in 2D graphics in paint. I tried unity and didn't really find it that intuitive at all so i feel this will be better for a lot of people, caveats about the editor aside (making external software editor which loads scenes should be possible for me later, but its not even that necessary if you use dummies or make a lot of top-down style games)

@irina

I'm not sure what you're asking. this plugin allows you to load and control 3D graphics using construct. the layout editor is the same if thats what youre asking, but when you add this object you can "set the position" of the 3D objects to the x,y of 2D objects in something like an rts, to make it look 3D. This plugin requires intermediate knowledge of construct, but tutorials and simplifications will come with time.

@Lof

Importing animations from blender etc. is not yet supported, but you can animate things by controlling articulated models at present (for example to make something like a car/tank/robot/plane etc.) support for skinned meshes and morph targets will eventually come.

@Ize

Animation Support ?
- not yet, will come eventually, see other answers
Loading the 3D Objects seems to take a while... is there a way to show the loading progress?
- Yes, you can show loading progress by loading the models sequentially and updating some bar, i just do it all in one go the demo
How is it integrated into C2 ?
- models/textures are added to the files directory. Images can be whatever common format, models can be .obj or three.js JSON files (not all the imported features for JSON models are supported yet however)
How is a basic scene setup?
in the layout editor:
- Add the Q3D object which is a big blank square like the paster, and adjust various properties/position/scale to control how it's integrated (see reply to schoening for more detail)
- Create a top down / side view (2D view) of the scene in the layout editor using mock-up sprites which will be hidden/destroyed your choice, you don't even need these if you dont want to build scenes in the layout.
in the event editor:
- Load the models/textures in using the event editor
- wait for the models/textures to fully load and then when they're loaded start creating the game scene/objects
- create all the lights/materials objects etc. because of how webGL works, creating and destroying things like lights or changing too many textures/materials is slow, so its a good idea to create all your lights at the beginning or when a new area is loading, on the fly changes will cause temporary hangups (in regular three.js stuff like this is hard to get working, but i made it work as well as i could, there shouldn't be bugginess, only delays when materials are rebuilt for lights/fog etc being changed.) some things will need you to test what works best. Its good to make lights have 0 intensity to turn them off rather than destroy/create them constantly, things like that etc. The information for each action/condition in the top bar tries to clarify this stuff so try to read it.
- make your game like any other construct game, with the added dimension for all your graphics, its not really that different.
How do the events look like for a basic scene?
^ see above
Will there be a plugin "demo" so we can test it before buying?
likely not, since it would be difficult to track what people do with it.

Apart from that minifying is not yet supported, it was breaking a lot of things and i figured people rather play with it now than wait a few more weeks, im working towards fixing this but its difficult since this plugin uses a "global" object a lot so that other plugins can work with it

Images of the workflow will come soon.
B
75
S
13
G
8
Posts: 1,973
Reputation: 9,841

Post » Mon Jun 02, 2014 3:34 pm

@QuaziGNRLnose , thank you for your detailed answer. I am very impressed so far, but since I am not very familiar with many technical procedures, I would really like to see a video demonstration of how you set up a basic scene. You know, practical stuff, a showcase of the things you mention above within Construct's environment, nothing fancy. ;)
composer - multimedia artist
www.eli0s.com/en/
B
68
S
26
G
4
Posts: 1,146
Reputation: 9,649

Post » Mon Jun 02, 2014 4:15 pm

@QuaziGNRLnose Thanks for clearing that up :)
You should make your own topic to promote your plugin. Good thing I only spend a week on my plugin else I would be really jealous that this came out so soon after :)

Good luck to you, and I see what I can create with that plugin ^^
B
40
S
11
G
4
Posts: 665
Reputation: 8,443

Post » Mon Jun 02, 2014 4:25 pm

Really impressive! This look far better that I thought!
Just bought it :D
Last edited by dhondon on Mon Jun 02, 2014 5:03 pm, edited 1 time in total.
B
34
S
15
G
6
Posts: 244
Reputation: 4,372

Post » Mon Jun 02, 2014 4:33 pm

@QuaziGNRLnose I just thought of the most important thing for my project. Do the meshes re-use the Geometry / Material?
B
40
S
11
G
4
Posts: 665
Reputation: 8,443

PreviousNext

Return to Work in Progress Addons

Who is online

Users browsing this forum: No registered users and 1 guest