How do I get this example to work in C3?

A while back I played around with this example made by R0J0hound. Works well in C2, but can't get it to work in C3.

Anyone with the knowhow able to help me get this working for C3, as I wanted to continue play around with it in C3.

Link to C2 project file.

dropbox.com/s/osmnwshb7dl4zi5/custom_webgl2.capx

It opens correctly in C3, can't preview the 3D.

Any help appreciated.

R0J0hound do you happen to know why it's not updating the texture in C3?, either with C2 or C3 runtime.

Look at the second answer here:

stackoverflow.com/questions/14521108/dynamically-load-js-inside-js

It shows a way to load a script without jquery. Basically create a script element, set the source url, set the onload function, and finally append the element to your html document somewhere.

That’s probably only the first half of making it work in c3. The c2_callFunction calls need to be changed to c3_callFunction. Also I’d imagine the way to access the objects texture is completely different with the new runtime. That’s just off the top of my head, I haven’t really used c3.

As I recall the gist of that example is it just renders the 3D with some other library, and then it copies the texture over to an object’s texture in construct.

Thanks R0J0hound.

I'm trying to understand this example and get it working to have some objects like coins and other simple 3D elements in games, and rotate them in more than one axis.

I don't need anything as fancy as Q3D but getting some simple 3D elements in the game. Especially for HUD and UI elements.

There is a C3 plugin that includes jQuery, so that helped me a bit on the way, but getting errors like the ones you mentioned, so have to try to change them one by one..

"cr_getC2Runtime is not defined" is probably one of those things I have to replace.

Hopefully once i understand it better I might be able to (with some help) make a simple "3D sprite" plugin out of it someday using a similar approach.

Sorry for the late reply.

This example is probably not the best approach to do what you want. It renders to to a separate canvas which is then copied to a texture on c2’s canvas, and that is used instead of an objects texture. Multiple different objects would just mean doing that multiple times for each model.

The pro is it lets you draw it in order with other construct objects.

The con is copying textures can be slow when you do it a lot.

The construct version specific stuff would be getting the object by uid and changing its texture. That and the calling of event functions from js. For the c2 runtime in c3 it should be enough to just change all occurances of c2 to c3. That, and you need to make sure jquery is included as you’ve already figured out.

For the new runtime you’ll need to consult the ask manual to see the new ways to do things.

A plugin would basically do the same thing. You could then hide a lot of the behind the scenes stuff if done right.

In all reality I’d say the best way to be able to make a simple 3D plugin would be:

1. Make some simpler plugins to get familiar with what’s involved.

2. Do some simple webgl programs outside of construct. It’s a pain but it’s much simpler there. Making it work inside construct just adds complexity.

3. Next flesh out how you’d do what you want to do. You can’t really remove stuff from plugins without breaking projects. I’ve found it’s easier and faster to flesh out ideas and try stuff with a hybrid approach of running js with the browser plugin. A drawback of this is js errors are a bit more obscure.

4. At this point you have a good idea of how you want to do things so you can start doing the plugin. There are some design issues though. You are more limited with the things you can do as opposed to js, so you may need to get creative.

3-4ish. I guess at some point you’ll have to test compatibility with different browsers and such. Idk if there are many things to handle.

Anyways there are probably other ways, this is just some of my observations.

I’m probably toward the tail end of 3 with a better example. It is doing what I want, and it’s much simpler to use multiple meshes or textures.

It won’t ever become a plugin, I find them too limiting and hard to maintain. I also need to test with webgl1, and see what breaks.

It’s only going to be a c2 capx, with no plans to ever be c3. I don’t have internet on my computer most of the time and c3 doesn’t add anything for me. I can try to shove all the construct2 specific stuff in one spot to make updating for c3 easier but it may not be feasible.

I’m going to try to do a game or demo with it first before posting it to iron out any activating design issues.

R0J0hound Thank's for the long detailed reply.

Yes currently it's well above my skill level when it comes to creating plugins. So my first step was to edit this example for c3 (with brute force, vaseline, trial and error) to create a proof of concept and then hire a developer with the knowhow to create and maintain an actual plugin for me.

Only two shader options. Surface shader and lambert. Surface shader would have the look of the coin below. No lights are taken in to account.

The specs for such a plugin is quite simple:

1. Ability to choose model and texture file.

2. Option to choose between Orthographic and perspective projection.

3. Ability to set the rotation of the object in all angles.

4. Any collissions are not necessary as a dummy sprite could do that job if needed.

5. Object is just using surface shader.

6. Bonus (not required) 1 directional light source. If off using surface shader, if on using labert)

Edittime requirement: Just show a visual representation of the models default rotation setting.

No specularity bump or anything else like that.

The main purpose of this plugin is to use simple 3d objects for various elements that would have the look and feel of a 2D sprite object (hence the primary surface shading model) but can be rotated in any angle.

Anyway that's my goal by fiddling around with this old example. I dont' think C2 or C3 should ever become a 3D engine, but simple 3D objects (rendered as sprites) can be very useful, for UI, pickups, card flips, etc etc.

Here's the example:

* You can load multiple textures and multiple obj files.

* The object files need to have UVs. It will fail without them.

* Look at the capx for a usage example.

dropbox.com/s/71krjzb1heqp8qa/rojo3dwip.capx

To make it work in C3's C2 runtime, you'll need to change cr_getC2Runtime to cr_getC3Runtime, and c2_callFunction to c3_callFunction i'm pretty sure. You'll need to change them in rojo3d.js and in the start of layout event. Also, jquery is needed for this to work. I haven't looked into what to change for the new runtime to work with this.

Yeah, it’s pretty much from scratch.

The zorder used is from the sprite whose drawing function is hijacked. I think the js function that does the hijacking is called overrideObjectDrawgl or something. You just pass a uid and the name of a c2 function to be called when drawing. It can be thought of as a 3D layer in place of that sprite.

You’d have to hijack another sprite to do a separate layer.

Thanks R0j0

You're right. i just saw that in the comments in the capx, the uid and the function setting.

I noticed that this approach was a bit different from the old example. There you were drawing within the boundries of a sprite instead of the whole layer. The only problem with this new approach is that scrolling is not taken into account, i tried to scroll the layout but didnt work as expected.

One thing i liked about the old example was that it was "3D sprites" that you can move around and scale like any other object. Translation like position and scale can be controlled from the editor more simply. The only thing you would need to control with code is rotation. This new approach might be useful in certain cases, and maybe more performant, but i think the 3d object as a sprite is more user friendly.

Anyway! It's really cool work. I'm going to play around with this some more this weekend. Very interesting indeed. Opens up a world of possibilities.

R0J0hound

By the way? is it a big job to change so that the drawing is done within the specified (uid) sprites boundries, like previous example and also renders at the same resolution as the widht and height of the sprite.

So if you scale up this "3d sprite" the pixel density will stay the same. not blurred when upscaled.

If it's not too hard to change.

The "3d sprite" concept is really great and behaves well in the editor.

You can get it to work with scrolling by setting the position relative to scrollx, scrolly

So the monkey head could be 320-scrollx, 240-scrolly.

Changing it to draw witching the object bounds per object is doable. Mostly shifting code around and adding more code to size it within those bounds. It kind of restricts what it can do. Less work to use, more work behind the scenes kind of thing. Probably something to try another day. I’m losing steam on changing how this one works for now.

It’s at a point where it has sufficient flexibility I can try some other ideas out. Albeit by making things a bit more complex to use.

No problem at all Sir. The latest example is super as it is too.

Just found the first example a but more user friendly, since the sprite boundries would give you a hint of where and approximately how big the 3d object will be in your game. Giving you a bit more sense of scale and position when plasing these 3d sprites around the map.

I cringe a bit whenever somebody mentions jQuery...

Imported the project into C3, removed the jQuery requirement, remapped some functions to the C3 versions and fixed the asset imports so that they work in preview ( probably not in cordova though ).

https://www.dropbox.com/s/u5kdslb7cpv52hw/3D%20Hacks.c3p?dl=0

I presume the example is using the runtimes webGL context, rendering to a framebuffer and then somehow hacking it into the runtimes rendering code? You could probably work this into a plugin, which would be a bit less hacky.

It's cool, but probably brittle. AYou shouldn't really be using internal APIs, they are likely to change. Still fun to play around with though.