Hi krumza

Glad to see you're back! Lots of good questions, I'll try to answer all of them:

1. If you have several webgl layers on top of each other, Wade renders them all into a single canvas. But say that you have a group of webgl layers, then a 2d canvas layer on top, then more webgl layers on top of that. In this case Wade renders the first group into a webgl canvas, then it renders a separate 2d canvas object and places it on top of the first canvas, then it renders the last group into a separate canvas (with a separate rendering context) and puts it on top of everything. Switching rendering contexts (especially webgl) multiple times per frame is very slow, hence the drop in performance. If performance is important, I would try to do everything in webgl. Trails can be done in webgl too, it's just a little trickier but can be done. Let me know if there's a specific case where I may help with a shader or something.

2. To prevent rendering artefacts with tiles, I think your tile maps should all be a power of 2 and, if you can, you should extrude each tile, i.e. add a border (1 or 2 pixels wide) by replicating the tile's color near the border. Some software like TexturePacker have an option to do this. The important thing is that the size of texture that contains your tiles is a power of 2, each individual tile does not have to be a power of 2.

3. Thanks for pointing it out, I will fix it now. In the meantime, https://clockworkchilli.com/snippets/ with a / at the end will work.

4. wade.tilemap works in much the same way as wade.iso, it can handle multiple tilemap layers on the same wade layer. It renders the base tiles, then on top of those it renders "transition" tiles (typically you would use these to fade between one terrain type like grass to another terrain type like sand). Finally, you can render "detail" tiles on top. I am aware that the documentation about these isn't really up to scratch, however the editor makes it really easy to design your tile maps in this way. You could export a simple scene with a tilemap from the editor to see what the JSON data structure looks like when you have multiple tilemap layers.

5. Currently all tiles should be the same size in the Wade world. This does not mean that the source textures should be the same size though, they can be any size, but they will be scaled and drawn at a fixed size.

6. That's a good point, we cannot easily do that at the moment. It's something that should be added. You can do something similar by having multiple anymations and some logic to control them in onAnimationEnd. But I'd agree that it's not as easy.

7. In the vast majority of cases, it's safe to ignore those messages. Application Cache is something that is supported by wade, so when wade is initialized it checks whether it's supported by the broswer. However if you don't use it explicitly, there's no problem. Passive event listeners only make a difference when you need to scroll the page, and this is not usually the case in a wade app, which is typically full screen. Saying that, for clarity it'd be good to remove these things completely in newer versions of Wade.

8. All scripts are eval'd in the global (window) context. If you declare a global variable in your scripts, it will be effectively a global variable

9. There are lots of things that we could do with ES6. Modules is one of those things, but there are a lot more. To the point that I've been thinking whether it's worth to add these things to Wade, or just write a new engine from scratch using all the modern ES6 stuff. The thing that's stopping me from doing it (aside from the fact that it'd be a lot of work and I'm busy with a couple of other projects), is that ES6 support is still not great across popular browsers - some of them support a subset of the ES6 funcionality, but some syntax is still in the process of being standardised and supported properly. It's getting there, but it's not quite there yet.

10. Have you tried using the flow chart features of Wade? Again, this is poorly documented, but we have a visual editor to do this, and it generates flow charts in JSON format that can be processed by Wade. I have made a simple dialogue-based game with it, and it worked pretty well, supporting complex cases with multiple choices and branching narratives. Let me know if you want to try that, given the lack of documentation I can try to help if things are not clear.

I hope this helps, if you have any more questions please do ask.

Gio

Yes, I certainly would not mind help, especially on glsl.

I have questions about the draw function

Here's my situation - I'm doing a space-themed scene.Price structure - 5 layers with different "specks" - stars of different degrees of blurring and different values of layerTransform

wade.setLayerTransform(5, 1, 1);
wade.setLayerTransform(11, 1, 1);
wade.setLayerTransform(12, 1/25, 1/4);
wade.setLayerTransform(13, 1/25, 1/5);
wade.setLayerTransform(14, 1/25, 1/6);
wade.setLayerTransform(15, 1/25, 1/7);
wade.setLayerTransform(16, 1/25, 1/25);
wade.setLayerTransform(17, 1, 1);

Layer 5-16-webgl, layer 17-2d

And I only use layer 17 to draw the orbits of planets. Although I tried to save it as a texture - but something didn't work and all because I don't know a replacement for ctx. stroke() in webgl. If I knew this, it wouldn't make sense to use the 2D layer.

Next, for the background, I create an object and throw a huge number of sprites for the stars about 400 pieces to cover the entire territory of my "sector"

Although I could only limit myself to 5 different sprites, with a pixel Shader, for which shaderUniforms I would make dependent on the player's speed and make such a desired parallax with minimal effort. But I can't scroll through these textures - because they are transparent PNG files with colored dots. I've tried shaders from shadertoy , but they don't show the same performance as they do now. What should I do?

And here is a sudden question)) I was just checking how you fixed the snippet section and I got the idea to do something - namely wade.setLayer3DTransform ('rotateX(45deg)', 'center center'); for these layers. The result stunned me/

stunning depth effect.

But unfortunately as most likely you understand it is blackened by the fact that half of the screen will be eaten due to transformation))..

in fact, two-thirds of the screen remains.  and I don't pay attention to the curve of the planets - you could draw them on a different layer, just transforming the coordinates. And the curve of the player's ship is also minimal because it is centered. And there, too, a heat map could be added to minimize this skew effect. And that would be pretty damn great I think.

and of course the most beautiful effect will be if you use the transformation: 'rotateX(45deg)', 'bottom center'. But this way there is generally almost a quarter of the screen unfortunately. Any sorcery and shamanism with the transformation parameters does not help but makes it more ugly: scale, translate-it is impossible to fill the entire screen and not osatvit empty zones without losing the attractiveness of the appearance

I understand how I would theoretically do it through three.js: would create multiple THREE.PlaneGeometry of huge dimensions at different levels of elevation - so would parralax background. then I would add THREE.CubeGeometry as a skyBox. And I think after a few trials and errors I would have chosen the parameters of the camera and the viewing radius for this effect/ 

But I don't want to drag all the logic to three.js and rewrite all my source, because there's a lot more there. and I think that there is some way to do this through the shaders of something. in fact, you need to somehow expand several layers (5 or 6) and somehow add an analog of blurring and sky box

I don't want to just give up and throw everything away for a couple of years))

Hi krumza

Sorry for the late reply, just got back from my holidays.

While it's more straightforward to think about this in terms of canvas-2d rendering (i.e. draw curves and skewed polygons), WebGl is going to be hugely more performant. It's more complicated but it's worth the effort.

In a canvas-2d  context, you typically want to think about how you define the shape of things, for exmple where a line starts and where it ends, etc. In WebGl, with a glsl shader, the only thing you care about is: what is the color of a pixel at coordinates (x, y)?

If you have a look at this old blog post of mine, that's a good example (in fact, you can just copy and paste that code for your planets :) )

So effectively there I'm drawing a circle, but instead of doing it the canvas-2d way (draw a circle with radius r at coordinates x,y), I do it the glsl way: for each pixel at coordinate x,y, would it be inside the circle or outside? In the same way, you could ask: would a pixel at coordinates x,y be on the circumference or somewhere near the edge of the circle? If it is, I want it to be blue, otherwise I want it to be transparent.

That's the basic idea, in your case you'd do this with an ellipse rather than a circle, to achieve that depth effect. The first thing you want to do is convert your uv coordinates into a [-1, 1] range. By default, a Wade Sprite's uv coordinates raneg from (0,0) at the top-left corner to (1,1) at the bottom-right coordinate. For what you want to do, it's easier if (-1,-1) is top-left and (1,1) is bottom-right, so (0,0) is the center of the sprite. This makes everything simpler since you want to draw a symmetrical object. So the first thing to do is:

vec2 uv = (uvAlphaTime.xy - 0.5) * 2.;

Then you want to use a standard ellipse formula to decide if a point is near the edge. The edge is defined as the set of points that meet this condition:

(x^2/a^2)+(y^2/b^2)=1

where a and b define the curvature of your ellipse.

So in your shader, you'd calculate the distance from the edge like this:

float e = abs(1 - length(uv * uv / (vec2(a,b) * vec2(a,b))));

And then decide what color you want based on the distance from the edge. In the simplest form, it's going to be something like:

vec4 color = e < 0.02 ? vec4(0,0,1,1) : vec4(0);

But this would give you an ugly hard edge. For a nice looking soft edge, you'd want to change the color's alpha based on the value of e, so it's 1 where e is 0 (exactly on the edge), and it fades out to 0 as e grows.

I hope this helps you get started, please feel free to ask more questions and I'd be happy to helps. Looks like a fun project!

this is just one of the scenes of the project (it is non-commercial), just for the soul

On this step happen some strange thing - i dont understand, but half of texture is losing:

vec2 uv = (uvAlphaTime.xy - 0.5) * 2.;

but now I'm more concerned about motionblur ) Here is another scene^

Of course, I will be happy to help with shaders - the same motionblur should be applied to all layers-so that there are no jumps at low FPS

Next question - on physics - I added PhysicsObject there and made the following parameters:

    const RESTITUTION = 1;
    const FRICTION = .01;
    const DAMPING = .5;
    const DENSITY = 1000;

But strikes what the inelastic that i wanna  get. I can't find the appropriate parameters. And it slows down a bit - although there are only 20 objects

Then I would like to understand how to calculate the force of impact in a collision - what to multiply by what?)) I use onCollision = function(data) {...} but there is a lot of information coming in - and I just need to get information about the collision energy in Joules