You are not logged in.

WebGL createPostProcessingShader returns null

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

plasmic

Beginner

  • "plasmic" started this thread

Posts: 5

  • Send private message

1

Tuesday, May 17th 2016, 4:38pm

WebGL createPostProcessingShader returns null

Hey All,

I'm new to KRPano so bear with me, i have looked on the forum to find a similar question or maybe even an example but haven't found anything so here we go :)

My goals is to use a blur Filter for the content in the KRPano viewer.

What i've done so far:

1. Created fragment shader in a script tag (https://github.com/mattdesl/lwjgl-basics…fragment-shader ). And retrieved it using a simple

Source code

 
1

this._shader = document.getElementById('shader').text;

The `vTexCoord` and `u_texture` are renamed to `tx` and `sm` as described here http://krpano.com/docu/plugininterface/#…rocessingShader

2. Got the WebGLContext by loading a custom plugin.

3. I'm able to call the function to add the Post Processing Shader:

Source code

 
1

this._panoWebGLLayer.webGL.createPostProcessingShader(this._shader, 'sm, resolution, radius, dir');


But it still returns null, but without any errors. Has anyone else experienced anything similar and if so, how can i solve this?

Thanks in Advance,

Plasmic

klaus.krpano

Administrator

Posts: 13,479

  • Send private message

2

Tuesday, May 24th 2016, 7:45pm

Hi,

making a blur filter is possible this way and I'm already working on providing examples and more information for that.

Attached here a preliminary plugin example of a simple sharpen filter:
postprocessing-sharpen-filter.zip

Best regards,
Klaus

plasmic

Beginner

  • "plasmic" started this thread

Posts: 5

  • Send private message

3

Thursday, May 26th 2016, 2:11pm

Hi Klaus,

Thanks for your reply. With the example you've provided i was able to make it work, Thanks!

Cheers,

Plasmic

nosferatu

Trainee

Posts: 80

Location: Ukraine

  • Send private message

4

Wednesday, April 5th 2017, 4:00pm

Hi Klaus!

I tried to realize the effect of blurring based on the above link - https://github.com/mattdesl/lwjgl-basics…fragment-shader
but I get strange stripes.



Here is my code:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

return "\
	precision mediump float; \
	varying vec4 vColor; \
	varying vec2 tx; \
	uniform sampler2D sm; \
	uniform float resolution; \
	uniform float radius; \
	uniform vec2 dir; \
	\
	void main() {  \
		vec4 sum = vec4(0.0); \
		vec2 tc = tx; \
		float blur = radius/resolution;  \
		\
		float hstep = dir.x; \
		float vstep = dir.y; \
		\
		sum += texture2D(sm, vec2(tc.x - 4.0*blur*hstep, tc.y - 4.0*blur*vstep)) * 0.0162162162; \
		sum += texture2D(sm, vec2(tc.x - 3.0*blur*hstep, tc.y - 3.0*blur*vstep)) * 0.0540540541; \
		sum += texture2D(sm, vec2(tc.x - 2.0*blur*hstep, tc.y - 2.0*blur*vstep)) * 0.1216216216; \
		sum += texture2D(sm, vec2(tc.x - 1.0*blur*hstep, tc.y - 1.0*blur*vstep)) * 0.1945945946; \
		\
		sum += texture2D(sm, vec2(tc.x, tc.y)) * 0.2270270270; \
		\
		sum += texture2D(sm, vec2(tc.x + 1.0*blur*hstep, tc.y + 1.0*blur*vstep)) * 0.1945945946; \
		sum += texture2D(sm, vec2(tc.x + 2.0*blur*hstep, tc.y + 2.0*blur*vstep)) * 0.1216216216; \
		sum += texture2D(sm, vec2(tc.x + 3.0*blur*hstep, tc.y + 3.0*blur*vstep)) * 0.0540540541; \
		sum += texture2D(sm, vec2(tc.x + 4.0*blur*hstep, tc.y + 4.0*blur*vstep)) * 0.0162162162; \
		\
		gl_FragColor = vec4(sum.rgb, 1.0);  \
	}"

Source code

 
1
2
3

krpano.webGL.context.uniform2f(shader.dir, 1, 0);
krpano.webGL.context.uniform1f(shader.resolution, 1024);
krpano.webGL.context.uniform1f(shader.radius, 20);

Source code

 
1

shader = krpano.webGL.createPostProcessingShader( get_shader_src(), "sharpen_factor,sz,dir,resolution,radius");


Could you tell me what I'm doing wrong?
Thank you!

This post has been edited 2 times, last edit by "nosferatu" (Apr 6th 2017, 9:09am)

nosferatu

Trainee

Posts: 80

Location: Ukraine

  • Send private message

5

Thursday, April 6th 2017, 9:47am

I fixed some bugs in the code and edited my post above.
Yet I do not get the desired result.

Once I write the variable "vColor", I get a black screen:

Source code

 
1

gl_FragColor = vColor * vec4(sum.rgb, 1.0);

Without this variable I get a strange effect:

Source code

 
1

gl_FragColor = vec4(sum.rgb, 1.0);

Help me please.

klaus.krpano

Administrator

Posts: 13,479

  • Send private message

6

Friday, April 7th 2017, 10:53pm

Hi,

Quoted from "nosferatu"

Could you tell me what I'm doing wrong?
A lot of things are wrong there: ;-)
  • your shader code is from a two-pass shader example, so one pass can't be enough
  • the 'resolution' of the framebuffer is not 1024x1024, it's the current krpano rendering buffer size - krpano provides that size via the 'sz' uniform
  • not sure what you want todo with your 'vColor' variable...
I will quickly made a plugin based on your core shader code and then post it here.

Best regards,
Klaus

klaus.krpano

Administrator

Posts: 13,479

  • Send private message

7

Friday, April 7th 2017, 11:05pm

Here the example plugin / demo now:
Postprocessing Plugin Example - Multi-Pass-Blur

nosferatu

Trainee

Posts: 80

Location: Ukraine

  • Send private message

8

Sunday, April 9th 2017, 4:58pm

Klaus, thank you so much for your work!
This is a great plugin!
Now we will do it better of virtual tours.
Wonderful effect for intro.

roladdon

Beginner

Posts: 2

Location: Canada

  • Send private message

9

Monday, March 26th 2018, 11:31pm

post processing sharpening filter

I am brand new to krpano and made my first 360 video pano with it - works well.
Now I want to try to add a sharpening filter to the running video.
I used the sharpening filter from this forum.

I added to the xml file

<plugin name="sharpen"
devices="html5"
url="%SWFPATH%/plugins/postprocessing.js"
xml_sharpen = "10.0"


/>

But now what? - how can I sharpen the pano video that's running.
I am curious to see if there is enough processing power, and what the effect the sharpening has on a running video.
Thanks for your help.

roladdon

Beginner

Posts: 2

Location: Canada

  • Send private message

10

Monday, March 26th 2018, 11:48pm

post processing sharpening filter

I just realized my mistake.

I changed to sharpen = "10.0"
I also tried sharpen = "2.0"

I can see the effect on the video.

BUT - this does not seem to sharpen the video

Thanks for your help

klaus.krpano

Administrator

Posts: 13,479

  • Send private message

11

Wednesday, March 28th 2018, 11:34pm

Hi,

that sharpen filter example is a very simple one - it has only 1px sharpening radius at screen level - and with that a blurred video will not much get much sharped.

Best regards,
Klaus

Similar threads