Bloom and decay without a custom shader...

SinisterSoft · December 2019

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 · December 2019

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 · December 2019

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

SinisterSoft · December 2019

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

rrraptor · December 2019

I used same technique to create shadows

antix · December 2019

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

SinisterSoft · December 2019

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 · December 2019

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

keszegh · March 2020

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 · March 2020

@keszegh there is one in gideros examples

keszegh · March 2020

thanks, i completely forgot.

keszegh · March 2020

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 · March 2020

@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 · March 2020

@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 · March 2020

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

keszegh · March 2020

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 · March 2020

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.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Bloom and decay without a custom shader...

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Bloom and decay without a custom shader...

Comments