any suggestion on physics engine that is easy to use beside p2js
that works well with pixijs
pretty much any physics engine will work with pixi
all you do is sync whatever the physics world is to the pixi sprite
"integration" with pixi is pretty much the same for all of them
I've used box2d, chipmunkjs, and p2js before
I liked p2js the best, but is missing some features the larger libs have
I see, let me check on those lib, i might not need all of what p2js has to offer. only limited physics such as collision, maybe free fall
IIRC both box2d and chipmunkjs are going to be heavier than p2js
but you can implement simple collision physics stuff pretty quickly if that is all you need
something like Phaser's "Arcade physics"
hi i have this shader
#define AMPLITUDE 0.1
#define SPEED 5.0
uniform sampler2D uSampler;
uniform float iTime;
uniform vec2 resolution;
vec4 rgbShift( in vec2 p, in vec4 shift ) {
shift *= 2.0*shift.w - 1.0;
vec2 rs = vec2(shift.x,-shift.y);
vec2 gs = vec2(shift.y,-shift.z);
vec2 bs = vec2(shift.z,-shift.x);
float r = texture(uSampler, p+rs, 0.0).x;
float g = texture(uSampler, p+gs, 0.0).y;
float b = texture(uSampler, p+bs, 0.0).z;
return vec4(r,g,b,1.0);
}
vec4 noise(in vec2 p ) {
return texture(uSampler, p, 0.0);
}
vec4 vec4pow( in vec4 v, in float p ) {
// Don't touch alpha (w), we use it to choose the direction of the shift
// and we don't want it to go in one direction more often than the other
return vec4(pow(v.x,p),pow(v.y,p),pow(v.z,p),v.w);
}
void main()
{
vec2 p = gl_fragCoord.xy / resolution.xy;
vec4 c = vec4(0.0,0.0,0.0,1.0);
// Elevating shift values to some high power (between 8 and 16 looks good)
// helps make the stuttering look more sudden
vec4 shift = vec4pow(noise(vec2(SPEED*iTime,2.0*SPEED*iTime/25.0 )),8.0)
*vec4(AMPLITUDE,AMPLITUDE,AMPLITUDE,1.0);
c += rgbShift(p, shift);
gl_fragColor = c;
}
that return me this error
ERROR: 0:15: 'texture' : no matching overloaded function found
ERROR: 0:15: 'x' : field selection requires structure or vector on left hand side
ERROR: 0:16: 'texture' : no matching overloaded function found
ERROR: 0:16: 'y' : field selection requires structure or vector on left hand side
ERROR: 0:17: 'texture' : no matching overloaded function found
ERROR: 0:17: 'z' : field selection requires structure or vector on left hand side
ERROR: 0:23: 'texture' : no matching overloaded function found
ERROR: 0:23: 'return' : function return is not matching type:
ERROR: 0:34: 'gl_fragCoord' : undeclared identifier
ERROR: 0:34: 'xy' : field selection requires structure or vector on left hand side
ERROR: 0:44: 'gl_fragColor' : undeclared identifier
ERROR: 0:44: 'assign' : l-value required (can't modify a const)
ERROR: 0:44: '=' : dimension mismatch
ERROR: 0:44: 'assign' : cannot convert from 'mediump 4-component vector of float'
someone can help me for understand which is the problem?
texture -> texture2D
gl_fragCoord -> gl_FragCoord
?
is the same? gl_fragCoord -> gl_FragCoord
gl_fragCOlor -> gl_FragColor
ah ok
the capitol letter
now have this
ERROR: 0:15: 'texture2d' : no matching overloaded function found
ERROR: 0:15: 'x' : field selection requires structure or vector on left hand side
ERROR: 0:16: 'texture2d' : no matching overloaded function found
ERROR: 0:16: 'y' : field selection requires structure or vector on left hand side
ERROR: 0:17: 'texture2d' : no matching overloaded function found
ERROR: 0:17: 'z' : field selection requires structure or vector on left hand side
ERROR: 0:23: 'texture' : no matching overloaded function found
ERROR: 0:23: 'return' : function return is not matching type:
ERROR: 0:15: 'x' : field selection requires structure or vector on left hand side
ERROR: 0:16: 'texture2d' : no matching overloaded function found
ERROR: 0:16: 'y' : field selection requires structure or vector on left hand side
ERROR: 0:17: 'texture2d' : no matching overloaded function found
ERROR: 0:17: 'z' : field selection requires structure or vector on left hand side
ERROR: 0:23: 'texture' : no matching overloaded function found
ERROR: 0:23: 'return' : function return is not matching type:
you have no respect to capital letters.
sorry
another question how can i pass another image
thorw uniforms?
in a filter? that's difficult question
you sure you need it as a filter and not as renderer plugin? :)
because renderer plugin takes images much easier
and for image in filter you have to use same approach as in DisplacementFilter - extra sprite
i need to implements a shader
like this
you can put it all in same file, no need of multiple files and import/export
and then put your shader there
sorry don't undestand
you need renderer plugin, not a filter
if you go through filter route, you'll have problems with coords size and extra texture through sprite
which difference?
you have to maintain extra sprite like DisplacementFilter does
and it'll use extra framebuffer which is heavy for performance on mobiles
sorry there's a guide or something doc?
i just gave you source code
that works.
// create a sprite
var sprite = new PIXI.Sprite();
// set the renderer plugin
sprite.pluginName = 'picture';
var sprite = new PIXI.Sprite();
// set the renderer plugin
sprite.pluginName = 'picture';
but how can create a plugin?
oh there is helper function
its easier :)
it's include into pixi?
this helper function?
no, but he posted it
look closer
ok, i've added section to https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters#renderer-plugin
mm i need to use with es6
no you dont
just remove es6 stuff
ok
import like script
into html page
so but i use with nuxr and i prefer an es6 version
where is?
its 176 lines of code.
ok
dont overcomplicate things ;)
but the sintax to import image as uniforms?
need to create sprite?
or texture?
https://github.com/TazOen/createShaderPlugin/blob/master/createShaderPlugin.js#L81 - this method lacks "bindTexture"
you have to modify it according to https://github.com/pixijs/pixi-plugin-example/blob/master/src/PictureRenderer.js#L80 , use bindTexture on textures you need and pass their numbers into uniforms
if you do
renderer.bindTexture(base1, 0, true); and renderer.bindTexture(base2, 1, true); , you'll have to pass [0,1] to shader uniform of the sampler
sorry, no materials about that, its just when people do that they already know how to make it in pure webgl, that simplifies things :)
textures are bound, and their locations are passed as uniforms
unfortunately, no one produced good examples for that, but i know of projects that use those tricks
also debugging shader is PAIN
it will take more of your time than pixi shenanigans :)
not possible to do something like this:
var tuniform = {
iGlobalTime: { type: 'f', value: 0.1 },
iChannel0: { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/tex07.jpg') },
iChannel1: { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/infi.jpg' ) },
};
var tuniform = {
iGlobalTime: { type: 'f', value: 0.1 },
iChannel0: { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/tex07.jpg') },
iChannel1: { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/infi.jpg' ) },
};
its possible, but then in "render" method you have to map those uniforms to actual uniforms :)))
and bind those two textures
its possible in pixi-v5 though
oh, at least you know threejs method
that is making things easier
when v5 relesed?
2017 december, but we blew it :)
this month.
good
use v4 for now, and I'm sure you can get through those problems
you need to raise your webgl and pixi knowledge anyway, you asked so many questions already that i dont know if i would be able to give easy solutions for you in future
:)
thx for now
i don't think is a render problem
becouse sometime works
sometimes not work
???
i think is ssr problem again
wrong window?
addShader: function (shaderCode, uniforms) {
// this.shader = new PIXI.Filter('', shaderCode, uniforms)
Plugin.createShaderPlugin('glitch', null, shaderCode)
this.sprite.pluginUniforms = {
uTime: 0.0
}
this.sprite.pluginSize = new PIXI.Point(800, 600)
this.sprite.pluginName = 'glitch'
return this
}
// this.shader = new PIXI.Filter('', shaderCode, uniforms)
Plugin.createShaderPlugin('glitch', null, shaderCode)
this.sprite.pluginUniforms = {
uTime: 0.0
}
this.sprite.pluginSize = new PIXI.Point(800, 600)
this.sprite.pluginName = 'glitch'
return this
}
copy and paste from codepen
what do you think?
i dont know what are you talking about exactly
i don't think is render
i know that code but whats the problem? pluginName='glitch' means it will use renderrer 'glitch'
yes that i create
Plugin.createShaderPlugin('glitch', null, shaderCode)
but i have the same error Cannot read property 'start' of undefined