• Content Count

  • Joined

  • Last visited

  • Days Won


Exca last won the day on September 6 2019

Exca had the most liked content!

1 Follower

About Exca

  • Rank
    Advanced Member

Recent Profile Visitors

3132 profile views
  1. 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.
  2. 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.
  3. ozgun

    Hello Exca,


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

  4. 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.
  5. I'd assume it has something to do with the canvas being larger than what the drawing target is. When you start the texturefill it uses the 0,0 point of canvas as starting point and your graphic is starting only at 240,100. Draw the canvas with the size that you want to use the final graphics.
  6. You could maybe do something like this: let parser = function(res, next){ if(detect if it's a zipped asset) { deflat } next(); } loader.use(parser) Not 100% sure it will work as I havent encountered exactly like that scenario.
  7. Do you have mipmaps on? Changing that could have some affect. Also does your sprite align to subpixel coordinates? That can cause some blurrines. You could also try changing the minFilter of the gl texture, though I'm not sure if pixi overrides it with setting from scalemode. In webgl possible options are LINEAR, NEAREST, NEAREST_MIPMAP_NEAREST, LINEAR_MIPMAP_NEAREST, NEAREST_MIPMAP_LINEAR, LINEAR_MIPMAP_LINEAR. I'm not sure what minification algorithm browser uses with img tags, but I'm pretty sure it's something more expensive and with better quality than the ones used in realtime rendering.
  8. I made pr to examples on using shadertoy stuff with pixijs using the custom texture approach.
  9. If the heightmap is rendered completely in shader (with raymarching from the looks of example url) then it's doable in pixi without having 3d meshes. You can use one of the following methods at least (I have used these only in v4, but they should work in v5 as well): - Apply a custom filter to empty container and set its filterArea to match the wanted area (or have a blank sprite that's the correct size) and then just use a filter on it: minimap.filters = [raymarchingFilter] - Render the minimap separately onto a rendertexture with custom filter / custom shader. Then use that texture as the minimap. This way you could only render it when something updates and it acts as a regular sprite. - Use a custom shader. In v4 this requires building a plugin for renderer, in v5 I'm not 100% sure how things go as I havent had time to actually use it in any projects yet. And if you really need actual 3d-rendering (instead of doing all of it in shader) then going for threejs/babylonjs/other 3d engine in combination with pixi would be easier.
  10. I'd say that is a perfect use case for 2d canvas as with that you can scroll the whole content and draw only one line. Would make the thing pretty efficient. Something like this: //Code might contain errors. Writing without checking. //Setup ctx.imageSmoothingEnable=false; //Dont use image smoothing to allow copy to go pixel perfect. //Draw function drawPoints( lineImageData ) { //Copy old canvas with offset. ctx.globalCompositeOperation = "copy"; ctx.drawImage( ctx.canvas, -1, 0); //Reset composite ctx.globalCompositeOperation = "source-over"; ctx.putImageData(lineImageData, ctx.canvas.width-1, 0); } As you dont have need for continous animation I'd say use 2d canvas for creating the audio waterfall image and if you need something more dynamic around the image or you need to move that, then you can wrap everything around pixi and use the waterfall as just a texture.
  11. Will the dots be moving or is it just static? If it's static content then you could do that really easily with a 2d canvas using putImageData and use that canvas as a texture. Or if those need to be moving then you could do them each be a 1x1 pixel sprite. 30k sprites should be ok. Or you could render them as dots with a custom shader which would allow you to have millions of them.
  12. Yes it is possible. You can do a custom plugin for the renderer. There's one example for V4 here https://github.com/pixijs/pixi-plugin-example For V5 I'm not sure if there's examples done for that yet.
  13. Check out the displacement map example: https://pixijs.io/examples/?v=v5.0.3#/filters-basic/displacement-map-flag.js
  14. How large is the texture? If the width is large enough then some devices might have problems with shader precision. You can test if this is the case by changing from webgl rendering to canvas rendering temporarily. If it works properly on canvas then having a smaller texture or splitting the current one into smalle chunks might help.
  15. Exca

    physics library

    Using physics libraries is ok in my opinion. People just need to know that there's no pre-existing integration, so you have to basically do one of these: - Integrate physics library to pixi directly (I wouldn't recommend, that would break updates etc.) - Run the physics and rendering separately and have some kind of synchronization between the two. This is the method I have used succesfully with matterjs. - Build a plugin for physics syncing to pixi. The second method I basically had all physically interacting game objects paired with a physics body and on each renderloop the transforms for those objects would be synced with physics bodies.