These are chat archives for pixijs/pixi.js

4th
Jan 2018
Brendon
@brendonco
Jan 04 2018 05:23
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
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
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
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
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
texture -> texture2D
gl_fragCoord -> gl_FragCoord
mcpll
@mcpll
Jan 04 2018 11:01
?
is the same? gl_fragCoord -> gl_FragCoord
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:01
gl_fragCOlor -> gl_FragColor
mcpll
@mcpll
Jan 04 2018 11:01
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
you have no respect to capital letters.
mcpll
@mcpll
Jan 04 2018 11:08
sorry
another question how can i pass another image
thorw uniforms?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:09
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
i need to implements a shader
like this
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:11
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
sorry don't undestand
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:11
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
which difference?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:12
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
sorry there's a guide or something doc?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:13
i just gave you source code
that works.
mcpll
@mcpll
Jan 04 2018 11:14
// 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
oh there is helper function
its easier :)
mcpll
@mcpll
Jan 04 2018 11:15
it's include into pixi?
this helper function?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:15
no, but he posted it
look closer
mcpll
@mcpll
Jan 04 2018 11:18
mm i need to use with es6
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:19
no you dont
just remove es6 stuff
mcpll
@mcpll
Jan 04 2018 11:19
ok
import like script
into html page
mcpll
@mcpll
Jan 04 2018 11:22
so but i use with nuxr and i prefer an es6 version
where is?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:23
its 176 lines of code.
mcpll
@mcpll
Jan 04 2018 11:23
ok
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:23
dont overcomplicate things ;)
mcpll
@mcpll
Jan 04 2018 11:23
but the sintax to import image as uniforms?
need to create sprite?
or texture?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:25
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
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
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
when v5 relesed?
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:35
2017 december, but we blew it :)
this month.
mcpll
@mcpll
Jan 04 2018 11:35
good
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 11:35
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
:)
thx for now
mcpll
@mcpll
Jan 04 2018 17:52
i don't think is a render problem
becouse sometime works
sometimes not work
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 17:52
???
mcpll
@mcpll
Jan 04 2018 17:52
i think is ssr problem again
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 17:52
wrong window?
mcpll
@mcpll
Jan 04 2018 17:53
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
i dont know what are you talking about exactly
mcpll
@mcpll
Jan 04 2018 17:58
i don't think is render
Ivan Popelyshev
@ivanpopelyshev
Jan 04 2018 17:58
i know that code but whats the problem? pluginName='glitch' means it will use renderrer 'glitch'
mcpll
@mcpll
Jan 04 2018 17:58
yes that i create
Plugin.createShaderPlugin('glitch', null, shaderCode)
but i have the same error Cannot read property 'start' of undefined