[Suggestion] Effects: Access to layer sampler

For developers using the Construct 2 Javascript SDK

Post » Mon Dec 16, 2013 11:24 pm

Construct 2 is an awesome toolset and I have been experimenting a little by adding deferred lightning and shadows by means of an effect.

I managed to get a single light working, however, what I'm really missing to unleash its full potential is access to samplers other than the back and front.

Preferably, I would like access to individual layers. When a layer is flagged as such, it basically becomes a render target. What this allows me to do is setup layers as a normalmap/depthmap from which I can query information.

For example: when I want to stop the light from casting through a wall, I need to know where a wall is in the shader. A depthmap could give me that information.

Screenshot:
LennardF19892013-12-19 13:31:13
B
4
Posts: 6
Reputation: 210

Post » Mon Dec 16, 2013 11:46 pm

Layers don't have their own texture by default. You can make it have one by enabling 'Force own texture' (or changing opacity or adding effects), but this can be a killer for fill rate on mobile devices. When the layer is using its own texture, the back sampler is the layer texture.
Scirra Founder
B
395
S
231
G
88
Posts: 24,367
Reputation: 193,694

Post » Mon Dec 16, 2013 11:56 pm

Yes, I saw that as I was digging through layout.js and glwrap.js. This will probably get me a bit closer to what I want to achieve. However, I imagine this still doesn't allow me to access layer 0 from an effect on layer 4, right (when they have their own texture forced, obviously)?

My idea is to have an instance with a Light effect attached to it (metadata like color, radius, etc), which in turn affects an effect on a layer to render the actual effect, but for that I need access to all render targets I desire.

Also, mobile is not an issue for me right now. I'm looking into the possibilities of Construct for a commercial PC game ;) I could go ahead and write Yet Another 2D engine in some language for my game, but I'd like to give Construct a shot as I can give a lot of the development out of my hands with ease.LennardF19892013-12-17 00:03:32
B
4
Posts: 6
Reputation: 210

Post » Wed Dec 18, 2013 9:01 pm

So I dove into the javascript code of Construct a little and it seems its very doable to expose functions to create and modify render targets by means of a plugin.

I think I'm going to pursue it as I think it can bring Construct 2 - in terms of making WebGL games - to a new level of usability.
B
4
Posts: 6
Reputation: 210

Post » Thu Dec 19, 2013 12:35 pm

For efficiency the engine does not hold on to layer render targets after the layer has finished rendering - it then copies it directly to the destination and subsequent layers are rendered either directly to the destination or on to the same single layer render target. That means you can't currently have a sampler for each layer. It would require engine-level changes to make this possible, and we don't really want to do that since it could seriously degrade performance on mobile.
Scirra Founder
B
395
S
231
G
88
Posts: 24,367
Reputation: 193,694

Post » Thu Dec 19, 2013 1:29 pm

I currently have implemented it with minimal changes to the engine (layout.js and glwrap.js) - literally 10 lines of code combined. I can now define a layer, call it "sampler<something>" (eg. samplerDepth) and set "Force own texture" to true.

This combination makes my code kick in, it bypasses the usual force own texture (keeping this.render_offscreen at false) and creates one in the runtime instead (this.runtime[this.name] rather than this.runtime.layer_tex). With a slight change in the glwrap.js, it then binds a texture based on a parameter name.

With that I have successfully created rendertargets with minimal overhead.

In the screenshots, I implemented a depthbuffer. The red block means obstacle, so my shader will pick that up and not render light on it in the final in-game picture.

In-editor:


In-game:


This is also very useful for normal mapping and specular mapping, as you can now query multiple layers for information (pretty much like a GBuffer in a deferred renderer).LennardF19892013-12-19 13:36:36
B
4
Posts: 6
Reputation: 210


Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 0 guests