yahiko00

Member

26

287 Neutral

• Rank
Member
1. 2D Procedural Generated 2D Starfield & Planet

Thanks. Since I'm brand new in the world of shaders, my gas clouds are far from perfect, and I'm not sure to understand what you mean @taylorswift by "high frequencies" nor how to implement these. My background is not really CG, unfortunately. Here is the fragment shader I use to generate my nebulae. Anyone who has suggestions to improve this shader both in terms of rendering aspect and/or performance is welcome. // nebulae.frag.glsl // inspired from: https://www.shadertoy.com/view/lslSDS precision mediump float; uniform vec2 iResolution; uniform float iGlobalTime; uniform float redPow; uniform float greenPow; uniform float bluePow; uniform float noiseColor; #define PI 3.141592653589793 // Simplex Noise by IQ vec2 hash(vec2 p) { p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3))); return -1.0 + 2.0 * fract(sin(p) * 43758.5453123); } float noise(in vec2 p) { const float K1 = 0.366025404; // (sqrt(3) - 1) / 2; const float K2 = 0.211324865; // (3 - sqrt(3)) / 6; vec2 i = floor(p + K1 * (p.x + p.y)); vec2 a = p - i + K2 * (i.x + i.y); vec2 o = (a.x > a.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); // vec2 of = 0.5 + 0.5 * vec2(sign(a.x - a.y), sign(a.y - a.x)); vec2 b = a - o + K2; vec2 c = a - 1.0 + 2.0 * K2; vec3 h = max(0.5 - vec3(dot(a, a), dot(b, b), dot(c, c)), 0.0); vec3 n = h * h * h * h * vec3(dot(a, hash(i + 0.0)), dot(b, hash(i + o)), dot(c, hash(i + 1.0))); return dot(n, vec3(70.0)); } const mat2 m = mat2(0.80, 0.60, -0.60, 0.80); float fbm4(in vec2 p) { float f = 0.0; f += 0.5000 * noise(p); p = m * p * 2.02; f += 0.2500 * noise(p); p = m * p * 2.03; f += 0.1250 * noise(p); p = m * p * 2.01; f += 0.0625 * noise(p); return f; } float marble(in vec2 p) { return cos(p.x + fbm4(p)); } float dowarp (in vec2 q, out vec2 a, out vec2 b) { float ang = 0.; ang = 1.2345 * sin(33.33); // 0.015 * iGlobalTime; mat2 m1 = mat2(cos(ang), -sin(ang), sin(ang), cos(ang)); ang = 0.2345 * sin(66.66); // 0.021 * iGlobalTime; mat2 m2 = mat2(cos(ang), -sin(ang), sin(ang), cos(ang)); a = vec2(marble(m1 * q), marble(m2 * q + vec2(1.12, 0.654))); ang = 0.543 * cos(13.33); // 0.011 * iGlobalTime; m1 = mat2(cos(ang), -sin(ang), sin(ang), cos(ang)); ang = 1.128 * cos(53.33); // 0.018 * iGlobalTime; m2 = mat2(cos(ang), -sin(ang), sin(ang), cos(ang)); b = vec2(marble(m2 * (q + a)), marble(m1 * (q + a))); return marble(q + b + vec2(0.32, 1.654)); } void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; vec2 q = 2. * uv - 1.; q.y *= iResolution.y / iResolution.x; // camera vec3 rd = normalize(vec3(q.x, q.y, 1.)); // Nebulae Background q.x = 0.5 + atan(rd.z, rd.x) / (2. * PI); q.y = 0.5 - asin(rd.y) / PI + 0.512 + 0.0001 * iGlobalTime; q *= 2.34; vec2 wa = vec2(0.); vec2 wb = vec2(0.); float f = dowarp(q, wa, wb); f = 0.5 + 0.5 * f; // Colorization vec3 col = vec3(f); float wc = f; col = vec3(wc, wc * wc, wc * wc * wc); // increase: R, G, B wc = abs(wa.x); col -= vec3(wc * wc, wc, wc * wc * wc); // decrease: G, R, B wc = abs(wb.x); col += vec3(wc * wc * wc, wc * wc, wc); // increase: B, G, R col *= 0.7; // decrease all RGB components: more black, less white col.r = pow(col.r, redPow); // high pass filter for red col.g = pow(col.g, greenPow); // high pass filter for green col.b = pow(col.b, bluePow); // high pass filter for blue col = smoothstep(0., 1., col); // Smoothen color gradients //col = 0.5 - (1.4 * col - 0.7) * (1.4 * col - 0.7); // color translation col = 0.75 * sqrt(col); // increase all RGB components: less black, more white col *= 1. - noiseColor * fbm4(8. * q); // add noise col = clamp(col, 0., 1.); // Vignetting // vec2 r = -1.0 + 2.0 * uv; // float vb = max(abs(r.x), abs(r.y)); // col *= (0.15 + 0.85 * (1.0 - exp(-(1.0 - vb) * 30.0))); gl_FragColor = vec4(col, 1.0); } About star color selection, this is a parameter I can easily change through the GUI of my generator. But I agree, colors shown above are not realistic. By now, I am working on (fast) planet generation. If anyone has some hints or ressources about this, I am obviously interested. Cheers!
2. 2D Procedural Generated 2D Starfield & Planet

Some progresses have been made since the last time. I've replaced the blur filter which cause an undesirable loss of brightness by a bloom filter which on the contrary, enhance stars' brightness, which is what I wanted. More importantly, I have implemented a first attempt of a gas cloud based on the simplex noise shader --- inspired by the many examples available on shadertoy.com (thanks again @JTippetts). If find the results quite convincing although there is room for improvement. This is not really possible for the moment to control the shape of the gas cloud, and I can hardly define the main color of it. I guess I need to dig more into the math of this shader... Feel free to try it online: http://yahiko.developpez.com/apps/Starfield/ To make it works, with the gas cloud and the bloom effect, your browser and your GPU (or integrated Intel Graphics) need to support WebGL. Any feedback and suggestion are welcome to improve the overall aspect. Cheers!
3. 2D Procedural Generated 2D Starfield & Planet

Thanks for your reply Since I got similar FPS on one of my GPU-less laptop too, I guess your Thinkpad has no GPU too. Any FPS feedback on other devices would interest me as well
4. 2D Procedural Generated 2D Starfield & Planet

Just curious: on which hardware have you taken this screenshot? I'm wondering so because of the FPS which is quite low.
5. 2D Procedural Generated 2D Starfield & Planet

As a recall, I have implemented a GUI to let anyone play with parameters with the online demonstration of the star field generator. Feel free to play along with these parameters and tell me which ones produce good visual results. It is not possible at the moment to save and export parameters, but you can take screenshot you can share. Thanks to that, it is already surely possible to choose more "realistic" colors for stars, or their numbers in each layer. Although any comments can be interesting... as long as it is said in polite form. Also, a very first version of comets has been implemented. It uses a particle system with 500 particles, which seems a good compromise between resolution and performance. Now gas clouds...
6. 2D Procedural Generated 2D Starfield & Planet

I've used a fragment shader to blur each of my circles but it seemed quite inefficient. Right now I am working on a simplex noise 2D fragment shader to generate gas clouds, but I am not an expert of shaders in general to be honest. I've clicked on your link, and this is really, really impressive. I will definitely investigate the really short code of this visually astounding shader You made my day!
7. 2D Procedural Generated 2D Starfield & Planet

Thanks for your contributions. I know all of these, but this starfield has more aesthetics goals than being accurate astrophysically speaking
8. 2D Procedural Generated 2D Starfield & Planet

Hello, I'm back with some news about my project. I've brought some improvements to the star field generation. Colors now use HSL instead of RGB. Also, I choose them over a Gaussian distribution giving the star field a more realistic aspect. All stars of a given layer now share a same "tone". I've encountered some issues with Phaser which seemed to leak into memory above 700 stars --- and drew me lines instead of circles. So, I changed to Pixi.js which is hopefully quite close to Phaser and seems more reliable since there is no more glitches for a large number of stars. To give an overall better aspect, I've applied a blur filter to the whole scene. At first, I've tried to blur stars one by one but this is really inefficient... You can see below a static overview. The animated GIF was too big to upload From a performance point of view, instead of drawing and redrawing stars each frame, I turned them into sprites. This improved dramatically my FPS. I've also added a quick and dirty GUI on the right side in order to be able to play along with various parameters. I've uploaded an online version here: http://yahiko.developpez.com/apps/Starfield/ For the time being, I hadn't got the time to implement comets, supernovae or gas clouds, but this is still in the roadmap. I'll let you know.
9. Find the bounds of isometric image

It seems to me a problem related to the convex hull. There are several algorithms you can find easily on the Web. One way to find your 2D bounding boxes could be to consider your object as a king of polygon, compute the convex hull, and then get the bounding box.
10. 2D Procedural Generated 2D Starfield & Planet

I've been quite busy this week, so I haven't been able to really work on this project. However, I've succeeded to implement a first experiment of a 2-layer starfield as suggested. I've used TypeScript and Phaser. For information, I've implemented a cache where I draw on a hidden canvas before displaying it. As a begining, I find this result quite promising. A uniform distribution is not an issue after all since stars seem quite scattered with some voids and clusters. I will try to improve this demonstration a little bit by using HSL colors instead of RGB, and chosing colors according to a gaussian distribution and not a uniform distribution, which is not realistic in such a case. As a roadmap, I would like to implement some special objects like comets and supernovae. Also, I would be interested to have some hints to produce some gas clouds as we can seen below: Thanks!
11. 2D Procedural Generated 2D Starfield & Planet

Thanks for your kinds replies @sergamer1! It makes me think that years ago, I have developped a small PRNG visualizer: http://yahiko.co.nf/RNGVisualizer/ (see second row) And that is quite true that the result is better than I expected when I opened this thread this afternoon. Playing with the brightness would certainly improve the result too. When I said "slowly animate", I am not still sure of what to get, but it could be nice if the starfield is not just a static picture in the background. A two-layer starfield with a parallax effect could be interesting indeed. Also, you mentioned in your second post "density function accross the sky". Could you please explain this?
12. 2D Procedural Generated 2D Starfield & Planet

Hi, Not sure to post at the right place, if not, please forgive me... For a game project I am working on, I would like to implement a 2D starfield as a background. I do not want to deal with static tiles, since I plan to slowly animate the starfield. So, I am trying to figure out how to generate a random starfield for the entire map. I feel that using a uniform distribution for the stars will not do the trick. Instead I would like something similar to the screenshot below, taken from the game Star Wars: Empire At War (all credits to Lucasfilm, Disney, and so on...). Is there someone who could have an idea of a distribution which could result in such a starfield? Any insight would be appreciated
13. Clash of the Daemons

Hi everyone! Here are some news about my little project which can be tested here: Clash of the Daemons. We can now move and attack at the same time. More generally, the input handling has been improved with implementation of multiple commands assignement for a keystroke as well as a delay before repeat. We can go back to the title screen after the game over. Behaviors can now be assembled together. High-level behaviors have been redesigned, especially ranged attack and hit-and-run. A new behavior, sneak attack, has been implemented (Fig. 2). A character (pawn) can have a set of weapons (inventory). Current weapons are claw (melee) and fireballs (ranged). Only one weapon can be active at a time. Each weapon has a charging time (time needed before activation), an activation time (time the weapon is active as well as its effects) and a cooldown time (time during which the weapon is unsusable). Key mapping has been changed accordingly. CTRL to attack, and TAB to switch to the next weapon. Debugging mode has been improved. These following informations can be displayed: FPS, grid, velocity vector, obstacle detector, hitbox, collisions, simplified sprites (Fig. 3). Improved the build process with the automation of graphical assets compilation (mainly the spritesheet). Title screen has been updated and improved a little bit (Fig 1.) Bug fixes: Attack animations run to their last frame. A memory leak in the AI module has been fixed. When the player loses a life, the HP bar now updates accordingly. Monsters will not be spawned at the same location of another game object anymore. Fig. 1: Title screen Fig. 2: Sneak attack behavior Fig. 3: Displaying debug mode informations There is a lot of room for improvements (and bug fixes! ^_^) of course.  Still, if there is anyone serious enough interested in this project, for improving its game design, gameplay, graphics, sounds, musics, background story, programming also, feel free to contact me. Best, Yahiko
14. Clash of the Daemons

Link : http://yahiko.developpez.com/apps/ClashDaemons/ Controls: Arrow keys to move CTRL for melee attack SHIFT for ranged attack This is a hack 'n slash based on a prototype for an AI implementation of behavior trees, which is the main reason of this project. Sprites of monsters come from OpenGameArt.org. The title screen and the HUD were made by myself.   Features implemented so far: 2D circle based collisions AI (cf. below) Pathfinding (not enabled for now) Respawn of monsters   AI behaviors implemented so far: Red monster : Melee attack Orange monster : Ranged attack Khaki monster : Hit and run Yellow : Just wandering   Technologies: Written in TypeScript Powered by Phaser Framework   If anyone serious enough is interested to improve this game (game design, game play, graphics, optimizations), feel free to contact me.
15. [WIP] Clash of the Daemons

Link : http://yahiko.developpez.com/apps/ClashDaemons/ Controls: Arrow keys to move CTRL for melee attack SHIFT for ranged attack This is a hack 'n slash based on a prototype for an AI implementation of behavior trees, which is the main reason of this project. Sprites of monsters come from OpenGameArt.org. The title screen and the HUD were made by myself.   Features implemented so far: 2D circle based collisions AI (cf. below) Pathfinding (not enabled for now) Respawn of monsters   AI behaviors implemented so far: Red monster : Melee attack Orange monster : Ranged attack Khaki monster : Hit and run Yellow monster : Just wandering   Technologies: Written in TypeScript Powered by Phaser Framework   If anyone serious enough is interested to improve this game (game design, game play, graphics, optimizations), feel free to contact me.