• Content Count

  • Joined

  • Last visited

  • Days Won


Exca last won the day on March 14

Exca had the most liked content!


About Exca

  • Rank
    Advanced Member

Recent Profile Visitors

3485 profile views
  1. It depends a lot on what kind of rendering you have. Some cases ie 11 can handle better when doing software rendering.
  2. Masks use a stencil to mask things out, so basic mask wont work with that solution as the whole shader area is a single texture. You could do the masking in the shader itself by rendering the area below to a rendertexture and passing it to shader as uniform and then using the color from that texture when masking is ok. Or you could create a filter for that (or one might exist already?) that takes bitmap as input and then calculates what areas should show from default sampler.
  3. Create a document listener outside of the interaction manager to handle the preventdefault. It doesn't need to be part of the interactionmanager.
  4. You can get the touchmove from document and call preventdefault on that to block most of ios problems. Only thing I havent found a cure for is the swipe from left side of the screen to go to previous page. Other than overriding history with current page. Remember to set your touchlistener with passive:false, like this: document.addEventListener("touchmove", {passive:false}). As apple changed their devices to use passive true as a default option for smoother scrolling.
  5. That is possible also. Basically just have something in renderloop like this: sprite.alpha += some small number; if(sprite.alpha > 1) sprite.alpha = 1; You could also take the start time and calculate end time from that. Then just calculate how much time has passed and calculate: var timepassed = currentTime-startTime; sprite.alpha = startAlpha + (endAlpha-startAlpha)* Math.min(1,timepassed/totalTime); Which is basically what tweens do, they just give a much nicer api for handling that.
  6. You could use a tweening library like tweenJs or tweenlite. Then you could say something like this (example with TweenJS): Tween.get(sprite).to({alpha:0}, 500, Ease.QuadInOut).to({alpha:1}, 500, Ease.QuadOut);
  7. Ah, it was just a version using filter of the same thingie. Basically for situations where you would want to do stuff to your scene instead of a custom shader. Should maybe change the shader to reflect that more. I'll check it tomorrow.
  8. Made a pr of an example that uses multiple shaders and combines output from all of those into one. Kept it really simple, for production use you would most likely want to use a texturepool with just enough of textures to keep everything memory efficient.
  9. You can either do multiple rendertextures or you can create two and recycle them. (or 3 if you need 2 input + 1 output) Also creating new uniforms is just as simple as writing them. The iChannel0-n is just how shadertoy gives access to them. So writing something like `uniforma sampler2D noise;` for example would be perfectly ok and then you could just pass an texture to that uniform on js side. I had two examples made about shadertoy & pixi (one with mesh and other with filter). Looks like that's still in pr. Might update it to include multiple buffering during this week if I manage to find extra time.
  10. Splitting the image into smaller textures and displaying those side by side would be one option. The problem you are experiencing is that the maximum dimension a gpu can address is reached. For modern pc gpus this is something in the range of 16kx16k, but many mobiles still have 4k and when going to older devices even 2k is a possible limit. With splitting you have basically these methods (at least in my knowledge): - Add client side logic that splits the image on cpu to smaller chunks. - Store the images in split versions. - Create a serverside solution that splits an image into pieces and load whatever resolution matches the gl.MAX_TEXTURE_SIZE. You could also maybe try canvas rendering, but I'm not sure how that works with very large textures and it would be slower than webgl.
  11. Hi, I'm the one who made that example. Here's a short description on how it works. The text uses only one reel as an example as all the others function in the same way: Let's say we have a position where the reel is (reel.position). This position is increased on each frame. Then each sprite is positioned based on that position. When the symbol is detected to be back to start, a new symboltexture is randomized to it.
  12. Exca

    360 panorama

    You could also create a custom shader that takes a cubemap or equirectangular image and do the math required inside the shader and then render it as a custom mesh or as a filter depending on the use case.
  13. You would have to be able to render the web page into a canvas and then render that canvas to screen instead of the web page. That would block much of user interaction though and would be really hard to do in realtime if website has scrolling or user interaction. Also if there's stuff loaded from other domains / without permissions then you would run into crossdomain errors. You could maybe use svg filters to achieve the effect, dont know how though.
  14. ozgun

    Hello Exca,


    It seems this link is not working anymore. Can you please send me that code?

  15. I have been using font.js to handle font loading https://github.com/Pomax/Font.js?files=1 Though the loading method is not exactly perfect, it usually works in most cases.