Welcome Guest ( Log In | Register )

[ Big| Medium| Small] -



Post new topic Reply to topic  [ 1 post ] 
    Xilef
  Fri Jan 22, 2016 9:14 pm
User avatar
Staff

Big Dumb Guy

Location: UK
Important!
This Tutorial is for my Filters Plugin, it can be applied to PIXI.js in general but some concepts will be specific to my Filters Plugin.
You can find my Filters Plugin here; hbgames.org/forums/viewtopic.php?p=930983

IDE Recommendation
As a JS development IDE I highly recommend the multi-platform IDE "Visual Studio Code" (Available for Windows, OS X and Linux). code.visualstudio.com

Below are framework Filters. They are bare-bones with what they do.
First filter is a single-pass "multiplier" which will multiply the RGB components of the input by a fixed number.
Second filter is an example multi-pass filter, which will perform the multiply operation of the first filter twice in separate passes.

Included are an example of a custom Filter with animation and a custom texture (Refract.js) and an example of a custom multi-pass Filter (Retro.js).

Basic Custom Filter
BasicCustomFilter.js
basic_custom { "multiplier" : 1.0 }
Expand to see the code.


Multi Pass Custom Filter
MultiPassCustomFilter.js
multi_pass_custom { "multiplier" : [1.0, 1.0] }
Expand to see the code.


Uniform Values
name      | GLSL type | JS type | example 
----------|-----------|---------|---------
sampler2D | sampler2D | Bitmap | ImageManager.loadPicture( "my_picture" )
1f | float | Number | 1.0
2f | vec2 | Object | { x : 1.0, y : 2.0 }
3f | vec3 | Object | { x : 1.0, y : 2.0, z : 3.0 }
4f | vec4 | Object | { x : 1.0, y : 2.0, z : 3.0, w : 4.0 }
2fv | vec2 | Array | [ 1.0, 2.0 ]
3fv | vec3 | Array | [ 1.0, 2.0, 3.0 ]
4fv | vec4 | Array | [ 1.0, 2.0, 3.0, 4.0 ]
mat2 | mat2 | Array | [ 1.0, 2.0, 3.0, 4.0 ]
mat3 | mat3 | Array | [ 1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0 ]
mat4 | mat4 | Array | [ 1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0 ]


Custom Texture Uploads
Things get more advanced when you need custom textures (one example would be a refraction shader).
The Filters plugin can accept strings as uniforms. The string will switch from source state to destination state at the mid-point of the Filter interpolation animation.
An example getter/setter for a customer texture would be;
Expand to see the code.


Animation
The Filters Plugin will attempt to set a uTime property if it exists. To make uTime visible a getter/setter needs to be created;
Expand to see the code.


Notes
fragmentSrc is where the GLSL lives. This is the most important part as this is the shader code itself. You must know GLSL to be able to write this (it is rather different to Javascript!). You can do an awful lot with this.

Refraction Filter
This is an example custom filter which features animation (set the speed) and the use of a custom texture (set the refractMap to the name of a .png image in the Pictures folder).
Version 2.0 of this Filter will be part of Filter Pack 1.

Refract.js
refract { "refractMap" : null, "strength" : 0.1, "speed" : { "x" : 0, "y" : 0 }, "uTime" : 0 }
Expand to see the code.


Retro Filter
This is an example custom multi-pass filter which both pixelates and reduces the colour of the screen.

Retro.js
retro { "step" : 3.779, "size" : 2 }
Expand to see the code.


Top Top
Profile      
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 


Who is online

Users browsing this forum: No users and 11 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

We are an independent, not-for-profit game making community.
Homepage
Board Index
About Us
Downloadable Games
Free Browser Games
Games in Development
RPG Maker Support
Game Maker Support
Construct 2 Support
HBGames the eZine
Advanced RPG Maker
Site Announcements
Powered by phpBB © phpBB Group