-1

I am currently working on a animated background wallpaper for my mobile iOS app (XCode6, iOS 7.1-8.4, OpenGL ES 2.0). The goal is to display in each view controller a gradient background (from light blue to dark blue) and some bubbles (*.png) that move from the bottom of the screen to the top of the screen.

Bubble-Sprites (Image 1)

For the bubbles, I took parts of the Ray Wenderlich tutorial on making a 2D-game with OpenGL ES (ie. Sprite-Class). This also works fine for its own.

Gradient-Background (Image 2)

I solved the gradient by using a fragment shader (took some code snippets from this tutorial). This works fine for its own.

Problem

So, currently the gradient is achieved by a fragment shader and the bubble sprites by using GLKBaseEffect. But when calling these two drawing functions subsequently, it display only the one or the other. There's something mixed up within the shaders.

  • How can I combine a custom fragment shader with GLKBaseEffect ?
  • Or how can I substitute the GLKBaseEffect with a custom shader (in order to display a 2D-texture as a sprite ?

Here's an illustration of the issue and the goal:

enter image description here

Please have a look at my sample application (I boiled it down to the essential parts):

Download-Link Sample App: AnimatedBackground.zip

Here's a short explanation of the involved classes:

  • Sprite.m: This is a wrapper for loading and drawing a texture from a *.png file (plus SRT, alpha blending, etc.)

  • BaseShader.m: This is the wrapper for loading and applying the shader files (Base.vsh & Gradient.fsh)

  • WallpaperController.m: This is a subclass of GLKViewController that I will use as base class for all of my UIViewController's. I defined the Sprite and Shader instances static, since I want to have a sole instance for all of my view controllers (the animation of the bubbles should move on constantly while transitioning between view controllers).

  • Toolkit.h: Some helper functions (random integers, etc.)

salocinx
  • 3,715
  • 8
  • 61
  • 110
  • Please let me know why you did down-vote my question. I will improve it when I know what's wrong with it... – salocinx Aug 11 '15 at 13:42
  • So you'd like to get rid of those bubles' intersection areas? – tonso Aug 11 '15 at 19:38
  • @id256: No that's an unwanted artefact of combining the first two images to the third. I want to paint the bubbles over the gradient background. Currently the gradient is achieved by a fragment shader and the bubble sprites by using GLKBaseEffect. How can I combine a custom fragment shader with GLKBaseEffect? Or how can I substitute the GLKBaseEffect with a custom shader? – salocinx Aug 11 '15 at 20:27

1 Answers1

1

Actually all you need to do is to add the statement

[self configureOpenGLES];

at the beginning of - (void)renderInRect:(CGRect)rect atTime:(NSTimeInterval)time; in BaseShader. Otherwise instead of using the program object, compiled from your custom shaders, you'll use the setup, implicitly provided by GLKBaseEffect, once sprite rendering has been called.

tonso
  • 1,760
  • 1
  • 11
  • 19
  • 1
    No problem. BTW there is no profit in enabling/disabling blend every rendering cycle. Instead, you should enable it somewhere during initialization only once. – tonso Aug 12 '15 at 08:09
  • Okay I moved the blend enable/disable function to the init code and removed it from the other places and it still works. Would it also be possible to load the bubble texture only once and display it 50 times? Currently the GLKLoadTexture function is called for every bubble instance... – salocinx Aug 12 '15 at 08:15
  • 1
    I think that's possible. You may try to declare `GLKTextureInfo* textureInfo` as static method and initialize it only once using the approach described [here](http://stackoverflow.com/questions/695980/how-do-i-declare-class-level-properties-in-objective-c) – tonso Aug 12 '15 at 08:28