Sie sind nicht angemeldet.

WebGL createPostProcessingShader returns null

plasmic

Anfänger

  • »plasmic« ist der Autor dieses Themas

Beiträge: 5

  • Nachricht senden

1

Dienstag, 17. Mai 2016, 16:38

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

Quellcode

 
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:

Quellcode

 
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

Beiträge: 13 499

  • Nachricht senden

2

Dienstag, 24. Mai 2016, 19:45

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

Anfänger

  • »plasmic« ist der Autor dieses Themas

Beiträge: 5

  • Nachricht senden

3

Donnerstag, 26. Mai 2016, 14:11

Hi Klaus,

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

Cheers,

Plasmic

nosferatu

Schüler

Beiträge: 80

Wohnort: Ukraine

  • Nachricht senden

4

Mittwoch, 5. April 2017, 16:00

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:

Quellcode

 
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);  \
	}"

Quellcode

 
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);

Quellcode

 
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!

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »nosferatu« (6. April 2017, 09:09)

nosferatu

Schüler

Beiträge: 80

Wohnort: Ukraine

  • Nachricht senden

5

Donnerstag, 6. April 2017, 09:47

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:

Quellcode

 
1

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

Without this variable I get a strange effect:

Quellcode

 
1

gl_FragColor = vec4(sum.rgb, 1.0);

Help me please.

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

6

Freitag, 7. April 2017, 22:53

Hi,

Zitat von »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

nosferatu

Schüler

Beiträge: 80

Wohnort: Ukraine

  • Nachricht senden

8

Sonntag, 9. April 2017, 16:58

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

Anfänger

Beiträge: 2

Wohnort: Canada

  • Nachricht senden

9

Montag, 26. März 2018, 23:31

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

Anfänger

Beiträge: 2

Wohnort: Canada

  • Nachricht senden

10

Montag, 26. März 2018, 23:48

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

Beiträge: 13 499

  • Nachricht senden

11

Mittwoch, 28. März 2018, 23:34

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

Ähnliche Themen