Jump to content

Saltallica

Members
  • Content Count

    21
  • Joined

  • Last visited

Reputation Activity

  1. Like
    Saltallica got a reaction from ivan.popelyshev in Pixi.js Showcase   
    I have a lengthy post in the showcase forum for those interested - we are in beta for our game GORILLA TOWN which uses PIXI, and pixi-spine. Props to Ivan P from PIXI.js for helping us on this forum multiple times!
    If you want to learn more about the game, we have a fancy marketing site:
    http://gorilla.town
    and, if you want to download and play the beta for windows (runs in electron), you can check it out here:
    http://gorilla.town/beta.html
    We love to hear any feedback you have.
     
    Thanks!
    Sean
  2. Haha
    Saltallica reacted to ivan.popelyshev in Animating texture along PIXI.Mesh.rope   
    That just means you'll encounter things that require deep diving in webgl later 😈 BWAHAHAHAHAHA
    I'm glad its resolved.
  3. Like
    Saltallica got a reaction from ivan.popelyshev in Animating texture along PIXI.Mesh.rope   
    Ivan, here's the approach that ended up working. I discovered the frame shifting technique as you were writing your post about it 🙂 
    The nice thing is, this doesn't require any deep deep diving in to PIXI internal or webgl, and works with PIXI v4. 
     
    step 1 - adjust the base texture to wrap
    this.pathTexture = new PIXI.Texture.fromImage('path-texture.png'); this.pathTexture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; step 2 - in my game loop update method
    update(delta) { this.throwPath.texture.frame.x -= 200 * delta; this.throwPath.texture._updateUvs(); }  
    And here it is in action: https://ibb.co/FDtS3w8

    Thanks again for your help!
     
  4. Like
    Saltallica got a reaction from ivan.popelyshev in Animating texture along PIXI.Mesh.rope   
    Hey guys,
    I'm wondering if there is a way to animate the offset position of a texture when applied to a PIXI.Mesh.rope. My goal is to have the texture "flow" in one direction. The texture in question is designed to repeat in one direction. I'm hoping if I can set the base texture to wrap along the U coordinate (using PIXI.WRAP_MODES.REPEAT), that if I can adjust the offset of the U over time, that I can effectively get the texture to wrap along the rope mesh.
    Where I'm running in to trouble is, based off of research so far, I don't see a way to adjust the offset "out of the box" in PIXI. Is this even possible, or should I be taking a different approach?
     
    Here's an screenshot of what I'm aiming for:
     

    Note the arcing path leading from the gorilla, going over the skyscraper, and ending at a building. This is built using a mesh rope. I think it would be cool if I could
    get the texture to move in one direction, similar to a tiling sprite, but along the rope.
     
    Any insight is much appreciated!
     
    Thanks,
    Sean
  5. Like
    Saltallica got a reaction from jonforum in Water shader approach?   
    Awesome - thanks again for the help - here's what I came up with:
     

     
    This is using the displacement shader trick on the root container, along with two other animated displacement shaders on the actual water sprite itself - it give a great rough seas effect.
     
    Just a few days ago I didn't think any of this would be possible - thanks for pointing me in the right direction! 
  6. Like
    Saltallica got a reaction from ivan.popelyshev in Need help with Color grading / Color LUT shader with Pixi   
    Hi there - I'm going down a rabbit hole trying to implement a color grading / LUT shader for PIXI.  Color grading is where you can you use a sprite as a lookup table to quickly transform one set of colors to another - this is handy for applying realtime contrast and color adjustments. I'm using this as a reference:
    https://www.defold.com/tutorials/grading/ 
    I've created a filter/shader using the code in the link above:
     
    var ColorGradingShader = function(LUTSprite) { var my = this; var code = ` precision lowp float; uniform vec4 filterArea; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform sampler2D lut; #define MAXCOLOR 15.0 #define COLORS 16.0 #define WIDTH 256.0 #define HEIGHT 16.0 void main() { vec4 px = texture2D(uSampler, vTextureCoord.xy); float cell = px.b * MAXCOLOR; float cell_l = floor(cell); float cell_h = ceil(cell); float half_px_x = 0.5 / WIDTH; float half_px_y = 0.5 / HEIGHT; float r_offset = half_px_x + px.r / COLORS * (MAXCOLOR / COLORS); float g_offset = half_px_y + px.g * (MAXCOLOR / COLORS); vec2 lut_pos_l = vec2(cell_l / COLORS + r_offset, g_offset); vec2 lut_pos_h = vec2(cell_h / COLORS + r_offset, g_offset); vec4 graded_color_l = texture2D(lut, lut_pos_l); vec4 graded_color_h = texture2D(lut, lut_pos_h); vec4 graded_color = mix(graded_color_l, graded_color_h, fract(cell)); gl_FragColor = graded_color; } `; PIXI.Filter.call(my, null, code); my.uniforms.lut = LUTSprite.texture; } ColorGradingShader.prototype = Object.create(PIXI.Filter.prototype); ColorGradingShader.prototype.constructor = ColorGradingShader; export default ColorGradingShader;  
    I then add this to my top level container:
    //relevant code from a wrapping class this.colorGradingSprite = new PIXI.Sprite.fromImage('/img/lut16.png'); this.pixiContainer.filters = [ this.colorGradingFilter ];  
    When using any LUT image, including the default without any color adjustments:

     
     I go from this:

     
    to this:
     

     
    I'm assuming there are some adjustments necessary to either the shader code, or how the lut sprite itself is being loaded - I have no clue..
    Any help would be greatly appreciated!
     
    And for those curious, here's my end goal:

     
    Thanks,
    Sean
  7. Like
    Saltallica got a reaction from OSUblake in Water shader approach?   
    Awesome - thanks again for the help - here's what I came up with:
     

     
    This is using the displacement shader trick on the root container, along with two other animated displacement shaders on the actual water sprite itself - it give a great rough seas effect.
     
    Just a few days ago I didn't think any of this would be possible - thanks for pointing me in the right direction! 
  8. Like
    Saltallica got a reaction from ivan.popelyshev in Water shader approach?   
    Awesome - thanks again for the help - here's what I came up with:
     

     
    This is using the displacement shader trick on the root container, along with two other animated displacement shaders on the actual water sprite itself - it give a great rough seas effect.
     
    Just a few days ago I didn't think any of this would be possible - thanks for pointing me in the right direction! 
  9. Like
    Saltallica got a reaction from ivan.popelyshev in Water shader approach?   
    Ivan,
    Thanks so much - that's pretty clever!   
    The clamp on the top border works exactly as specified, the trouble I'm running in to at this point is animating the displacement by moving the displacement sprite over time. Because of using CLAMP instead of REPEAT, you can't easily offset X and have it warp over time repeatedly. Ideally, I could CLAMP in one direction (Y) and REPEAT in another (X), giving the best of both worlds.
     
    It appears in WebGL you can do this via TEXTURE_WRAP_S and TEXTURE_WRAP_T:
    https://webglfundamentals.org/webgl/webgl-3d-textures-repeat-clamp.html
    PIXI docs don't mention anything about being able to change the wrap per axis, not sure if it's a hidden feature or not.. any thoughts?
×
×
  • Create New...