amo yeh Posted December 8, 2015 Share Posted December 8, 2015 I am trying to come up the pixelated shader effect as seen on three.js the three.js version http://oos.moxiecode.com/js_webgl/c64_shader/ the three.js version shader codehttps://github.com/chribbe/ThreeJS-GameboyStyleShader/blob/master/js/PixelateShader.js and this is what I came up by using three.js , a pixlated 3d christmas scene. (I would really like to make similar one on babylon.js)http://amoyeh.co/threejs/christmas2015/index.html since I only understand a bit about shader, any help is appreciated this is the version I came up so far.http://www.babylonjs.com/cyos/acpr/#1HRCVZ Thanks a lot~ Quote Link to comment Share on other sites More sharing options...
RaananW Posted December 8, 2015 Share Posted December 8, 2015 Hey, that's a cool little thingy! And I appreciate that you actually gave it a try and not just asked "so, how do I do it?" You were not using the original UVs. Is this a bit better? http://www.babylonjs.com/cyos/acpr/#1HRCVZ#1 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted December 8, 2015 Share Posted December 8, 2015 it is postprocess effect i think wanna set that effect to full screen or just wanna set a mesh? adam 1 Quote Link to comment Share on other sites More sharing options...
amo yeh Posted December 8, 2015 Author Share Posted December 8, 2015 Thanks for the replies~ I think NasimiAsI was right. It should be post process effect,. since pixelation is applied on the whole view , not just individual object. yet I still having trouble to figure this one out, any help is appreciated ~ Quote Link to comment Share on other sites More sharing options...
Temechon Posted December 8, 2015 Share Posted December 8, 2015 I played with it few days ago ! Do you like this ? http://www.babylonjs-playground.com/#EKICU#1 adam and NasimiAsl 2 Quote Link to comment Share on other sites More sharing options...
amo yeh Posted December 8, 2015 Author Share Posted December 8, 2015 Wow ! Temechon thanks for the effect, it looks promising, will sure give it a try later. by the way This is what I came up with http://amoyeh.co/babylonjs/testPixel/2.loadBlender.html applying it on example given from tutorialhttp://amoyeh.co/babylonjs/testPixel/5.postProcess.html the shader codehttp://amoyeh.co/babylonjs/testPixel/pixelate.fragment.fx To achieve perfect pixel art style, I don't know how to remove pixel that is not fully opaque. any enlightenments on this ? adam 1 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted December 8, 2015 Share Posted December 8, 2015 maybe this help http://www.babylonjs.com/cyos/#1PAOXP just you make postprogress with this ( replace uv to this) vN => vec2(sin(gl_FragCoord.x*50.)/20.+vN.x ,sin(gl_FragCoord.y*50.)/20.+vN.y) Quote Link to comment Share on other sites More sharing options...
Vousk-prod. Posted December 8, 2015 Share Posted December 8, 2015 the three.js version http://oos.moxiecode.com/js_webgl/c64_shader/ Woaaa, that's a fracking demo! Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted December 8, 2015 Share Posted December 8, 2015 it just effect for videobut nice Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted December 8, 2015 Share Posted December 8, 2015 Agree we can do better NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted December 9, 2015 Share Posted December 9, 2015 i think i closer http://www.babylonjs.com/cyos/#1PAOXP#1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted December 9, 2015 Share Posted December 9, 2015 Lovely! NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted December 9, 2015 Share Posted December 9, 2015 @amo yeh your source is right and just you need make postprogress and set correct parameters like screen size and pixelSize ( 100) you see that effect Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted December 13, 2015 Share Posted December 13, 2015 http://www.babylonjs-playground.com/#URP3W#3 check it @amo yah amo yeh and jerome 2 Quote Link to comment Share on other sites More sharing options...
jerome Posted December 13, 2015 Share Posted December 13, 2015 CoolI'll be able to redo my old ZX81 games in 3D ! NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
amo yeh Posted December 20, 2015 Author Share Posted December 20, 2015 Thanks @NasimiAsl for the great effect. Although I've been quite busy lately, I will try to apply it to my project and show the result here once I have time ~ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.