• Content Count

  • Joined

  • Last visited

About EvelynEve

  • Rank
  • Birthday December 3

Profile Information

  • Location
  • Interests
    4X Games, books, writing, biking, hiking

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hi, sorry for the delay and not clarifying. We ended up figuring it out on our own! Essentially, we were trying to figure out what the FPS would be while rendering extremely large data sets. We wanted to compare Pixi to native WebGL to see what performance losses we would have while doing doing so. Note, this is using WebGL as a novice, ergo unoptimized and what basic tutorials can do (as we could expect an expert or advanced programmer or software engineer just learning WebGL to be capable of doing). Both are also only using 2D vertex sets. It may be interesting to you to know that we found that Pixi seems to be better optimized and corrected some intentional novice mistakes. Thus, we found that Pixi actually runs either very slightly slower (magnitude of .1 FPS) or actually a few FPS higher.
  2. Hi, I'm working on some performance tests of PIXI vs WebGL. Does anyone know if those tests already exist or the best way to go about comparing the two for my usage cases? Thank you in advance!
  3. I'll have to check it out! I was working on a pretty messy version of it and was just coming over to see if there was advice as I ran into some weird bugs (Keeps telling me the length is wrong but I have some logging proving the length I'm sending it is correct...). I'll update to v4 and attempt there instead of continuing with this monster haha.
  4. After looking into it more, I'm not sure if Mesh is the way to go. It would also require redoing the MeshRenderer.js to achieve full functionality. I was hoping there would be a better solution that isn't this messy. At this rate, I might as well just stick with native WebGL, which is really disappointing.
  5. I'd prefer to do it myself since I need to know how to use this stuff. Are you think of copying Mesh.js or is there another file I should be looking at?
  6. Yes. I know that. I did originally use gl.LINES. If you have any resources you could point me to, I would greatly appreciate it.
  7. Good idea! Unfortunately, I'm dealing with a LOT of data. I'm not using the native lineTo/moveTo methods. I am, instead, using the polygon and passing it an array of x and y coordinates, as I mentioned before. Sadly, that would be a LOT of extra load to process, which is why I was hoping to just do it via GPU shaders that can leave the CPU alone.
  8. I am not using the shader at all. I'm using the normal/default shader. These are all more or less things I have already tried to do unsuccessfully. Also, I missed the result of the last try. It gives me this: There's a teensy triangle of lines at the top. That last bit of math is better, but still has an issue with the scaling of the lines which worries me that it could cause other problems later. Much better than what was happening before though: EDIT: I'd still just prefer using my own shader, however. It's more reliable and faster. I'll be dealing with a lot of data. I'd prefer just trying to figure out why the primitive shader override is simply not working as opposed to using both scaling and setting the pivot. All the things drawn on my canvases will require this type of scaling, so I don't see it being a problem unless there is something I am missing or changes have been made to scaling which I did not read about previously.
  9. It's too large and sensitive to post somewhere, sorry. Still no luck with that.
  10. No luck. Nothing shows up. Just a black box. EDIT: I am using a polygon to draw the array of x and y points.
  11. The problem is the data sets I am using. I can't use screen coordinates, I need to use WebGL coordinates. I can't forget the min/max stuff, it's the whole reason the program even works. I'm not really sure what you mean by result (vague). I have been trying to scale and the scaling has the same problems as the filters. It doesn't fix anything and I'm pretty sure it's slower.
  12. Could you point me to some resources about the projection matrix so I can better understand what value is where for manipulation? I understand you're saying to just throw it in there, but the question is where and how. I can't find anything about it beyond people mentioning it exists and code references within the source. Preferably a tutorial with some examples of projection matrix transformations.
  13. @ivan.popelyshev suggested I try overriding the primitive shader to get the desired effect. I did so with some slight modifications to allow the translations and now don't see anything. Here is the shader I am using: function PrimitiveShader(shaderManager) { Shader.call(this, shaderManager, // vertex shader [ 'attribute vec2 aVertexPosition;', 'attribute vec4 aColor;', 'uniform mat3 translationMatrix;', 'uniform mat3 projectionMatrix;', 'uniform float xMin;', 'uniform float xMax;', 'uniform float yMin;', 'uniform float yMax;', 'uniform float alpha;', 'uniform float flipY;', 'uniform vec3 tint;', 'varying vec4 vColor;', 'void main(void) {', 'float xNorm = (aVertexPosition.x - xMin) / (xMax - xMin);', 'float yNorm = (aVertexPosition.y - yMin) / (yMax - yMin);', 'gl_PointSize = 8.0;', 'gl_Position = vec4(', '(projectionMatrix * translationMatrix * ' + 'vec3(' + 'xNorm * 2.0 - 1.0,' + 'yNorm * 2.0 - 1.0,' + '1.0)).xy,', '0.0,', '1.0);', 'vColor = aColor * vec4(tint * alpha, alpha);', '}' ].join('\n'), // [ // 'attribute vec2 aVertexPosition;', // 'attribute vec4 aColor;', // // 'uniform mat3 translationMatrix;', // 'uniform mat3 projectionMatrix;', // // 'uniform float alpha;', // 'uniform float flipY;', // 'uniform vec3 tint;', // // 'varying vec4 vColor;', // // 'void main(void){', // ' gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);', // ' vColor = aColor * vec4(tint * alpha, alpha);', // '}' // ].join('\n'), // fragment shader [ 'precision mediump float;', 'varying vec4 vColor;', 'void main(void){', ' gl_FragColor = vColor;', '}' ].join('\n'), // custom uniforms { tint: { type: '3f', value: [0, 0, 0] }, alpha: { type: '1f', value: 0 }, translationMatrix: { type: 'mat3', value: new Float32Array(9) }, projectionMatrix: { type: 'mat3', value: new Float32Array(9) }, xMin: { type: 'f', value: 0 }, xMax: { type: 'f', value: 100 }, yMin: { type: 'f', value: 0 }, yMax: { type: 'f', value: 100 } }, // custom attributes { aVertexPosition:0, aColor:0 } ); } This is what I am seeing: This is what I see if I allow the original shader to run: And this is what I am expecting to see (more or less): Does anyone have any advice?
  14. I think I understand. I'm still no closer to understanding where that matrix transformation should be happening. Here is the picture of what it looked like before: And this is what it looks like with pixi (minus some padding that is added to the before picture that I hadn't gotten around to doing in the after picture yet):
  15. Hello. I figured there was some matrix transformation method I was just missing. As I said before, the filter works just fine. It does what I expect it to do in terms of scaling/zooming the data correctly. The issue is that it becomes too blurry/the quality degrades on the graphics object. I'm not sure what you mean by the target framebuffer. Could you please clarify? EDIT: Also the way we're handling the xMin/xMax values are important to the functionality of the overall ... object? Game? Module? Not sure what to call it haha.