Bloom and decay without a custom shader...

SinisterSoft

Was tinkering and had some advice from some friends about alternative ways to do bloom and I realised that it could be done without using a custom shader at all - just standard Gideros commands, the problem was that it over-bloomed and needed fading, so I used the setColorTransform to fade and keep the bloom under control. The result is kinda pretty...



First you need to setup the screen

oddEven=0 local width=application:getContentWidth() local height=application:getContentHeight() local screenSizeX,screenSizeY=application:getDeviceHeight(),application:getDeviceWidth()   bloomScale=2 screenTexture={} screenDraw={} bloomCapture={} oldScreen={} for loop=1,2 do screenTexture[loop]=RenderTarget.new(screenSizeX,screenSizeY,true) screenTexture[loop]:clear(0,1) screenDraw[loop]=Bitmap.new(screenTexture[loop]) screenDraw[loop]:setScale(width/screenSizeX,height/screenSizeY) screenDraw[loop]:setVisible(false) stage:addChild(screenDraw[loop]) end bloomCapture[1]=Bitmap.new(screenTexture[2]) bloomCapture[2]=Bitmap.new(screenTexture[1]) bloomCapture[1]:setScale(1/bloomScale) bloomCapture[2]:setScale(1/bloomScale) print(screenSizeX,screenSizeY) bloomScreen=RenderTarget.new(screenSizeX/bloomScale,screenSizeY/bloomScale,true) bloomSprite=Bitmap.new(bloomScreen) bloomSprite:setScale(bloomScale,bloomScale) bloomSprite:setColorTransform(0.96,0.96,0.96) -- this is the decay, smaller for faster decay   screenRender=Sprite.new() screenRender:setScale(screenSizeX/width,screenSizeY/height) screenRender:setBlendMode("add")

Then in your main game enter_frame loop (I have one running constantly) add this just before the end:

local oo=(oddEven%2)+1 oddEven+=1 local oe=(oddEven%2)+1 bloomScreen:draw(bloomCapture[oe]) screenTexture[oe]:draw(bloomSprite) screenTexture[oe]:draw(screenRender) screenDraw[oe]:setVisible(true) screenDraw[oo]:setVisible(false)

Then just add all your game sprites to screenRender rather than stage. If you use sceneManager then add it like this rather than to stage...

screenRender:addChild(sceneManager)

This is the result:
https://deluxepixel.com/players/bacteria/

SinisterSoft

If you add these two lines at the bottom of the bloom setup:

bloomSprite:setAnchorPosition(screenSizeX/bloomScale/2,screenSizeY/bloomScale/2) bloomSprite:setPosition(screenSizeX/2,screenSizeY/2)

That will centre the zoom to the screen, then you can add crazy scaling and rotation effects in the frame loop...

e.g

bloomSprite:setRotation(1) bloomSprite:setScale(2.1)

Resulting in this:

MoKaLux

that's very nice! Thank you for sharing. That's a mini tutorial

SinisterSoft

I'm amazed i could do these effects without a custom shader.

rrraptor

I used same technique to create shadows

antix

@SinisterSoft very cool man! Have you looked at how it performs versus a shader?

SinisterSoft

It's hard to do as we don't have any gpu benchmarking (I don't think) - but it should be faster in theory as there are less reads over the previous method I used.

Instead of the scale down from the last drawn and then scale up and draw over the next draw, maybe a shader could be added to do that in one go - it would also save the bloom copy buffer.

The big advantage is though that it will work on all the platforms without having to make specific shaders - eg opengl shader language vs metal, etc...

antix

@SinisterSoft true. I remember when I played with shaders I needed corner case stuff to accommodate older devices.

keszegh

resurrecting this topic, even though i like this approach, there are some reasons why i want a shader doing that. did any of you write a bloom shader?

rrraptor

@keszegh there is one in gideros examples

keszegh

thanks, i completely forgot.

keszegh

i've checked the gideros example of a bloom shader and it achieves multiple passes (extract+blur+combine) by using multiple rendertargets. isn't there any other cleaner (and less resource heavy) solution?

MoKaLux

@keszegh thank you for your question because you make me want to look into shaders and I have While trying to help you I came across shadertoy from @n1cke
I played around with it but couldn't go very far. Let me post the code example and a shadertoy neon example: https://www.shadertoy.com/view/MsyGRm

I just wonder how he managed to get the shaders from shadertoy and put them into the shaders folder!?! Please somebody tell me

rrraptor

@MoKaLux its easy to parse

As an example, thats how you can get shader code:

require "json"   local APP_KEY = YOUR_KEY_HERE   local STATUS = "" local Loader = UrlLoader.new()   function queryShaderToy(search) local str = "https" .. "://www.shadertoy.com/api/v1/shaders/query/%s?key=%s" STATUS = "Query" Loader:load(str:format(search, APP_KEY)) end   function loadShaderText(shaderID) local str = "https" .. "://www.shadertoy.com/api/v1/shaders/%s?key=%s" STATUS = "LoadShader" Loader:load(str:format(shaderID, APP_KEY)) end   function onComplete(e) local _json = e.data if _json ~= "" then local t = json.decode(_json) print("Finished",STATUS) if STATUS == "Query" then local n = #t.Results -- amount of shader ID's if n > 0 then   loadShaderText(t.Results[math.random(n)]) -- load random shader from query list   end elseif STATUS == "LoadShader" then local shaderCode = t.Shader.renderpass[1].code local tf = TextField.new(nil, shaderCode, "|") stage:addChild(tf) end end end   function onError() print("error") end   function onProgress(e) print("progress: " .. e.bytesLoaded .. " of " .. e.bytesTotal) end   Loader:addEventListener(Event.COMPLETE, onComplete) Loader:addEventListener(Event.ERROR, onError) Loader:addEventListener(Event.PROGRESS, onProgress)   queryShaderToy("bloom")

APP_KEY you can get at https://www.shadertoy.com/myapps



For the API look here: https://www.shadertoy.com/howto

SinisterSoft

If you can code that NeonBalls example coded in Gideros that would be a great shader example.

keszegh

SinisterSoft said:

If you can code that NeonBalls example coded in Gideros that would be a great shader example.

that was pretty easy to convert to gideros, just changing a few variable names for me. but then i realized that it's not a bloom image example. so i still need a bloom shader that works 'out of the box' (meaning that there is no need to use multiple rendertargets etc lua additional work).

rrraptor

keszegh said:

so i still need a bloom shader that works 'out of the box' (meaning that there is no need to use multiple rendertargets etc lua additional work).

I dont think its possible
Steps you need to reproduce:

One RT for thresholded brightness texture, second is for blur, and the third one for a final result.