How to stitch multiple images together

[Noscow]

Good day!

I want to create a texture from few different images. And I need to create this from code. Can I do this on the CGE level? Or I need to look to the OpenGL functions?
So in steps:

1. Create array with few images
2. Stich this images together
3. Use result as texture on the some primitive

(My goal is to make a modular horizon for a skybox. Different game scenes will use same images with different order and filters to feel more differently and recognizable)

Thanks!

[michalis]

We have functions in CGE to draw “image on image”, so you can create images completely in CGE

1. Advised solution, using GPU acceleration: Use TDrawableImage, with TDrawableImage.DrawFrom method that allows to draw one TDrawableImage into another TDrawableImage. See example examples/images_videos/draw_images_on_gpu/draw_images_on_gpu.dpr .

   This is advised, because:

   • it is fast, as it is GPU-accelerated, it is using underneath OpenGL(ES) things for drawing,
   • it is easily maintainable in CGE, because we can render anything into an image using this approach (even 3D stuff), so we advise this way of image editing.
   • I have a TODO to add more examples to CGE showing usage of this.

   Underneath, the initial image contents are loaded from classes in CastleImages unit, like TRGBAlphaImage. But then, the image content “lives” and is modified only on GPU.

2. There is another approach (not advised): do not use TDrawableImage, instead use CPU-only code for image manipulation in CastleImages unit. Create 2 instances of TRGBAlphaImage and draw one on another using TCastleImage.DrawFrom method.

   • The main advantage of this may be that right now, it may be simpler. It doesn’t need OpenGL context. Maybe there are more examples about using it.

   • But we do want to eventually deprecate TCastleImage.DrawFrom method, and then (but this will not happen anytime soon, so no worries) remove them. Reason: TDrawableImage.DrawFrom method is better in long-run (this way of drawing images is more flexible, faster, easier to maintainer). And there are other libraries that offer image-on-image drawing (FpImage, Vampyre, BGRABitmap) so for cases when TDrawableImage.DrawFrom method is not enough – we can recommend users to use other libraries.

3. I should mention another solution: do not do this

   That is, do you really need to combine images? It can be sometimes avoided, with some benefits (flexibility to do things at run-time) but also drawbacks (preprocessing stuff is, in the end, often a simple optimization – if you can preprocess something, then you don’t do it at runtime). This is just a suggestion, all I’m saying is that I always consider this approach (“just modify my rendering”) before introducing a step to build the textures (using AD 1 or AD 2 above).

   • Maybe instead you can render a few primitives?
   • Maybe instead you can combine the few images in a shader? See e.g. castle-engine/examples/viewport_and_scenes/shader_effects_on_texture at master · castle-engine/castle-engine · GitHub

[Noscow]

Thanks, will experiment.

@michalis

I should mention another solution: do not do this

Maybe I really make this overly difficult.
More detailed, game locations have different types. And, when location is drawing, various sprites of the neighbor locations adds into the 3D Viewport, from all 8 sides (North-NorthEeast-East e.t.c).
This sprites are wide and sometimes they ugly crossing. And I thought make this sprites as a part of the skybox. Cylinder without top and bot is a good surface for this. Just need texture it correctly.

[michalis]

@Noscow

More detailed, game locations have different types. And, when location is drawing, various sprites of the neighbor locations adds into the 3D Viewport, from all 8 sides (North-NorthEeast-East e.t.c).
This sprites are wide and sometimes they ugly crossing. And I thought make this sprites as a part of the skybox. Cylinder without top and bot is a good surface for this. Just need texture it correctly.

Why not just add 8 quads? Like TCastleImageTransform. And see how they look in CGE editor. But I understand that the solution to “ugly crossing” depends on the exact images, so I cannot advise best here. But maybe there’s a solution without complex image composition? Using alpha at the image edges?

Note that placing things on cylinder will “bend” them, so your sprites must either be already bend, or you will need to remap texture coordinates to account for it.

[Noscow]

@michalis

Why not just add 8 quads? Like TCastleImageTransform. And see how they look in CGE editor. But I understand that the solution to “ugly crossing” depends on the exact images, so I cannot advise best here. But maybe there’s a solution without complex image composition? Using alpha at the image edges?

I made few variants with square sprites, but wasn’t satisfied enough yet
But alpha is a good idea… I can make sprite with gradient alpha and blue-grey background. Maybe this will create a fog or mist effect and hide sprites overlaps. And will save much time