How to make display 'flip' effect, and do some anti-distortion

Questions
,
1

Hi all,

I need do some effects like the following:

1)original scene

and make it to
2) what I want

Any suggestions for me? Thanks a lot in advance.

2 
texture.wrapS = THREE.RepeatWrapping;
texture.repeat.x = - 1;

Note that your texture must be a power of 2 size for this to work (512x512, 1024x1024 etc).

3

Thank you @looeee, but I want the whole scene(not one specific object) while displaying, seems that it needs to be handled in the post processing step using something like EffectComposer.

can you show me more using this way to achieve it? many thanks for your help.

4

Well there is a mirror shader, which might do what you want.

Otherwise you could do something like

  1. render your scene using a renderTarget.
  2. flip the texture (I’m not sure if renderTargets have the repeat property available, but if not there are ways of accessing the texture and using it as a normal texture if not.
  3. Apply the texture as a fullscreen background - either create a fullscreen plane and apply the texture to it, or use the Scene.background
5

@looeee, yes, just like the mirror shader, but still need 1) apply that shader to EffectComposer 2) also need flip top and down.

6

If you want to go the postprocessing route, your best bet is to look through the examples and see how it is implemented there - then customising the mirror shader is probably your next step.

7

Okay, thank you very much @looeee.

8

To flip the image, I think you’d need a fragment shader like this:

<script id="fragmentShader" type="x-shader/x-fragment">
				
	uniform sampler2D tDiffuse;
	varying vec2 vUv;
	
	void main() 
	{																		
		gl_FragColor = texture2D(tDiffuse, vec2(1.0-vUv.x, vUv.y));
	}						
		
</script>
9

hi @Bill, many thanks, I want flip the whole thing. In Unity3D, what I need is just put some shaders on to the main Camera, but I don’t know how to do it for webgl via three.js. After searching, I found maybe what I need is try to do something using EffectComposer in the post processing step, and just like @looeee said maybe I need try that way and deep dive the mirror shader.

So, any suggestions for my situation? thanks a lot!

10

I made a simple example for you: http://bill.clarke-fields.com/examples/flip-image-shader/

1 Like
11

got it, thanks very much!

在 2017-07-19 15:31:12，“Lewy Blue” threejs@discoursemail.com 写道：

| | looeee
July 19 |

If you want to go the postprocessing route, your best bet is to look through the examples and see how it is implemented there - then customising the mirror shader is probably your next step.

Visit Topic or reply to this email to respond.

To unsubscribe from these emails, click here.

12

yes, that is what I want. thanks a lot!

在 2017-07-20 02:58:38，“Bill Clarke-Fields” threejs@discoursemail.com 写道：

| | Bill
July 19 |

To flip the image, I think you’d need a fragment shader like this:

Visit Topic or reply to this email to respond.

To unsubscribe from these emails, click here.

13

in the examples/js/shaders/MirrorShader.js, there is one uniform variable named tDiffuse, but I don’t know how to ignore it, also seems that there is no example to use it.

I my case I need change it to use as flip function, so in fact I do not need some bitmap material just want make the original color it should be.

any one can give me some suggestions? thanks!