2

My friend and I are working on a web based game where we want to have a blackhole-like thing rendered in some form of an engine or 3D program for us to freely manipulate adding more "arms" making it smaller or bigger and playing around with its light.

Here's a picture of our concept of the graphic element:

(smaller black hole:)

(larger black hole:)

We want help to find the best possible solution for this, and possible also some kind on guide to create these elements. So far everything is designed in photoshop but if we want the hole to be dynamic we can't use pictures.

DMGregory
  • 134,153
  • 22
  • 242
  • 357
Athax
  • 29
  • 1
  • I'm sorry, but we don't do tool recommendations on this website, because they are always based on personal opinion, requirements and preferences. But you might ask on https://softwarerecs.stackexchange.com for a good tool to create such graphics. – Philipp Dec 17 '16 at 15:38
  • Nothing says you have to use a tool for this. You could write code to do it at runtime. – Engineer Dec 17 '16 at 15:43
  • @ArcaneEngineer We are currently figuring out ways to do this, since we haven't really tried it before and are inexperienced. Could you elaborate more? – Athax Dec 17 '16 at 15:48
  • @Athax I notice no action on the answer I gave. Is there some aspect of it you don't understand? Let me know if you need clarification. – Engineer Dec 17 '16 at 22:17
  • @ArcaneEngineer Sorry for not returning to you, my friend is going to do most of the programming, because I only have HTML5, CSS3 and PHP skills. I'm basically the concept artist, game layout guy. He's also quite new to this but understands a lot more languages than I do. We might need some more explanation to this, since this is our first time trying to do something like this. It would be really nice of you and we really appricate your help. We could possibly write over some kind of chat, for better communication? – Athax Dec 17 '16 at 22:41
  • 1
    I'd say that before you take up my time in chat, you need to make an attempt with what's been given, and request clarifications thereunder. – Engineer Dec 18 '16 at 14:35

2 Answers2

1

Arcane Engineer mentions using a pixel shader to create this type of spiral effect. That would be how I'd approach it too. You could either run the shader once and output the result to a texture, or simply use the shader to render your black hole quads at runtime.

Here's an example of a pixel shader that performs this kind of spiral effect:

fixed4 spiral (v2f i) : SV_Target
{
    // Convert UV coordinates from range (0...1)
    // to (-1...1) with (0, 0) in the center.
    i.uv = i.uv * 2.0f - 1.0f;

    // Convert to polar coordinates.
    float angle = atan2(i.uv.y, i.uv.x);
    float radius = length(i.uv);

    // Create a value that varies from 1 (normal falloff in the arms)
    // to 2 * _ArmSharpness (accelerated falloff in the gaps between).
    float armBias = (sin(angle * _ArmCount + radius * _Twist) + 1.0f) * _ArmSharpness;

    // Use this to bias our lookup value, which falls off with radius.
    float lookup = saturate(1.0f - radius * (armBias + 1.0f));

    // You could use this lookup to sample a gradient texture...
    // fixed4 col = tex2D(_MainTex, lookup);

    // But here I'll just use it to calculate a purple-ish gradient:
    return float4(lookup * lookup, 3.0f * lookup - 2.0f, lookup, 1.0);
}

This exposes three parameters to control the look: Image showing how the _ArmCount parameter makes more arms, and _Twist controls how many times the arms wrap around. Image showing how the _ArmSharpness parameter controls how cloudy or crisp the spiral looks.

You can perform a second processing step to overlay the dark hole in the center, or build it into the same formula, whichever you prefer. I've left that part out to focus on the spiral aspect here.

If you're not using a 3D graphics API, you can also manually construct a texture by running a function like the one above to compute each pixel's colour value.

DMGregory
  • 134,153
  • 22
  • 242
  • 357
0

Create a circle with say 2 triangular arms pointing straight outward. Say this sits exactly inside a 256x256 texture (i.e. outer radius 128, and inner radius - i.e. radius of the solid disc - of 64). This you can do in code very easily so I will not go into it, here.

Now to create a spiral effect. If you google images of a water vortex, you will note that the area of least transformation is at the outer edge, because the force applied is lowest there. As you get in toward the centre, there is more torsion and thus more deformation.

texDimensions = (256, 256)
centre = texDimensions / 2
rMax = outer radius //128 to start, for a 256x256 image as noted above   
rMin = disc radius //the radius of your galactic disc without arms, say 64


for each pixel
    dist = maxRadius - currentPixelRadius
    apply a 2D [rotation transform][1] dist * k radians.

So, depending on the exact radial distance of current pixel from centre, we rotate by some amount; this is more toward the centre, less toward the outer edge.

You can adapt the arm count, amount of rotation (via k) etc. How much torsion you want may be influenced by the number of arms, from a "looks good" perspective.

P.S. As this is a once-off process and you likely cache the result for all future use, don't worry over cost, just do it in the loading phase. Else use a pixel or compute shader to do it on the fly / in realtime.

Engineer
  • 29,455
  • 4
  • 72
  • 120