These are chat archives for pixijs/pixi.js

4th
Jan 2018
Brendon
@brendonco
Jan 04 2018 05:23 UTC
any suggestion on physics engine that is easy to use beside p2js
that works well with pixijs
Chad Engler
@englercj
Jan 04 2018 05:45 UTC
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
Brendon
@brendonco
Jan 04 2018 05:52 UTC
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
Chad Engler
@englercj
Jan 04 2018 06:15 UTC
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"
mcpll
@mcpll
Jan 04 2018 07:30 UTC
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?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:00 UTC
texture -> texture2D
gl_fragCoord -> gl_FragCoord
mcpll
@mcpll
Jan 04 2018 11:01 UTC
?
is the same? gl_fragCoord -> gl_FragCoord
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:01 UTC
gl_fragCOlor -> gl_FragColor
mcpll
@mcpll
Jan 04 2018 11:01 UTC
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:
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:06 UTC
you have no respect to capital letters.
mcpll
@mcpll
Jan 04 2018 11:08 UTC
sorry
another question how can i pass another image
thorw uniforms?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:09 UTC
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
mcpll
@mcpll
Jan 04 2018 11:10 UTC
i need to implements a shader
like this
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:11 UTC
you can put it all in same file, no need of multiple files and import/export
and then put your shader there
mcpll
@mcpll
Jan 04 2018 11:11 UTC
sorry don't undestand
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:11 UTC
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
mcpll
@mcpll
Jan 04 2018 11:12 UTC
which difference?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:12 UTC
you have to maintain extra sprite like DisplacementFilter does
and it'll use extra framebuffer which is heavy for performance on mobiles
mcpll
@mcpll
Jan 04 2018 11:13 UTC
sorry there's a guide or something doc?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:13 UTC
i just gave you source code
that works.
mcpll
@mcpll
Jan 04 2018 11:14 UTC
// create a sprite
var sprite = new PIXI.Sprite();
// set the renderer plugin
sprite.pluginName = 'picture';
but how can create a plugin?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:14 UTC
oh there is helper function
its easier :)
mcpll
@mcpll
Jan 04 2018 11:15 UTC
it's include into pixi?
this helper function?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:15 UTC
no, but he posted it
look closer
mcpll
@mcpll
Jan 04 2018 11:18 UTC
mm i need to use with es6
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:19 UTC
no you dont
just remove es6 stuff
mcpll
@mcpll
Jan 04 2018 11:19 UTC
ok
import like script
into html page
mcpll
@mcpll
Jan 04 2018 11:22 UTC
so but i use with nuxr and i prefer an es6 version
where is?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:23 UTC
its 176 lines of code.
mcpll
@mcpll
Jan 04 2018 11:23 UTC
ok
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:23 UTC
dont overcomplicate things ;)
mcpll
@mcpll
Jan 04 2018 11:23 UTC
but the sintax to import image as uniforms?
need to create sprite?
or texture?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:25 UTC
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 :)
mcpll
@mcpll
Jan 04 2018 11:31 UTC
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' ) },
};
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:33 UTC
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
mcpll
@mcpll
Jan 04 2018 11:34 UTC
when v5 relesed?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:35 UTC
2017 december, but we blew it :)
this month.
mcpll
@mcpll
Jan 04 2018 11:35 UTC
good
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:35 UTC
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
mcpll
@mcpll
Jan 04 2018 11:38 UTC
:)
thx for now
mcpll
@mcpll
Jan 04 2018 17:52 UTC
i don't think is a render problem
becouse sometime works
sometimes not work
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 17:52 UTC
???
mcpll
@mcpll
Jan 04 2018 17:52 UTC
i think is ssr problem again
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 17:52 UTC
wrong window?
mcpll
@mcpll
Jan 04 2018 17:53 UTC
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
}
copy and paste from codepen
what do you think?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 17:58 UTC
i dont know what are you talking about exactly
mcpll
@mcpll
Jan 04 2018 17:58 UTC
i don't think is render
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 17:58 UTC
i know that code but whats the problem? pluginName='glitch' means it will use renderrer 'glitch'
mcpll
@mcpll
Jan 04 2018 17:58 UTC
yes that i create
Plugin.createShaderPlugin('glitch', null, shaderCode)
but i have the same error Cannot read property 'start' of undefined