Eugenius

Members
  • Content Count

    19
  • Joined

  • Last visited

About Eugenius

  • Rank
    Member

Contact Methods

  • Twitter
    r4jin
  1. So I updated my iPad to iOS8 and ran some WebGL Test. it seems like anti-aliasing option for webgl rendering doesn't work. Both safari and chrome don't support it. Not sure if it'll come soon but I was wondering if anyone knows a workaround? I tried FXAA manually but the outcome is poor.
  2. Wrong index.. Managed to draw "something" on the screen but not exactly what I wanted. Need to replace for (i = 0; i < indexCount; i++) { indices.push(indexStart++); }into indices.push(indexStart);
  3. Back again with another question! The issue was already discussed in GitHub. So as the comments from others say, I tried drawing using gl.LINES || gl.LINE_STRIP. I started off from modifying buildLine method in PIXI.WebGLGraphics class. var i = 0; var points = graphicsData.points; if (points.length === 0) return; //! this causes mismatch between road and border if (graphicsData.lineWidth%2) { for (i = 0; i < points.length; i++) { points[i] += 0.5; } } var firstPoint = new PIXI.Point( points[0], points[1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { points = points.slice(); points.pop(); points.pop(); lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; points.unshift(midPointX, midPointY); points.push(midPointX, midPointY); } var verts = webGLData.points; // links var indices = webGLData.indices; var indexCount = points.length; var indexStart = verts.length/6; // sort color var color = PIXI.hex2rgb(graphicsData.lineColor); var alpha = graphicsData.lineAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; var pointLen = points.length / 2; for (i = 1; i < pointLen; i++) { verts.push(points[(i-1)*2], points[(i-1)*2 + 1]); verts.push(r, g, b, alpha); } for (i = 0; i < indexCount; i++) { indices.push(indexStart++); } return;then draw the points as follow webGLData = webGL.data[i]; renderSession.shaderManager.setShader( shader );//activatePrimitiveShader(); shader = renderSession.shaderManager.primitiveShader; gl.uniformMatrix3fv(shader.translationMatrix, false, graphics.worldTransform.toArray(true)); gl.uniform2f(shader.projectionVector, projection.x, -projection.y); gl.uniform2f(shader.offsetVector, -offset.x, -offset.y); gl.uniform3fv(shader.tintColor, PIXI.hex2rgb(graphics.tint)); gl.uniform1f(shader.alpha, graphics.worldAlpha); gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, Float32Array.BYTES_PER_ELEMENT * 6, 0); gl.vertexAttribPointer(shader.colorAttribute, 4, gl.FLOAT, false, 4 * 6, 4 * 2); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); gl.drawElements(gl.LINE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0); // gl.drawArrays(gl.LINE_STRIP, 0, webGLData.points.length);Then I get the following error message GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0Obviously I am missing something important but I can't seem to find the cause. Many hours I put into this have been meaningless so far. Thanks for reading
  4. Explored a little more and found Graphics.dirty and Graphics.clearDirty flags needs to be set true to update from graphicsData. Here's my code PIXI.Graphics.prototype.updateLineStyle = function(lineWidth, color, alpha){ // console.log('lineUpdate'); var len = this.graphicsData.length; for (var i = 0; i < len; i++) { var data = this.graphicsData[i]; if (data.lineWidth && lineWidth) { data.lineWidth = lineWidth; } if (data.lineColor && color) { data.lineColor = color; } if (data.alpha && alpha) { data.alpha = alpha; } this.dirty = true; this.clearDirty = true; } // return this;};Thanks again Sebastian
  5. Thanks Sebastian, I tried the way you suggested. However the graphicsData object doesn't seem to be associated with rendering but only bounds. Actually, I draw around 20000 vertices and draw (create) them all again and style needs to change, which means I have to do all the unnecessary moveto and lineto again. Would there a be a way to manipulate the graphicsData then draw from the array?
  6. Hi guys It's been a long time since working with Pixi.js. Since the version 1.6 is 'in da house' with the ability to fill up complex polygons, I resumed my project again. As the title says, I draw thousands of lines on WebGL using Pixi.js Graphics class. Then I change the style of the lines. For example, say I drew 1000 lines on the screen, then I want to update their styles (width, color and etc) somehow not by drawing them again. Is there a way to achieve this? (possibly for polygons as well?)
  7. Hello guys! Here is short code example doc = new PIXI.DisplayObjectContainer(); /* draw something on the doc */ spr = new PIXI.Sprite(doc.generateTexture()); stage.addChild(spr); renderer.render(stage); this is how we normally create sprite out of DOC. but what I'd like to do is doc = new PIXI.DisplayObjectContainer(); /* draw something on the doc */ doc.scale.x = 2; doc.scale.y = 2; spr = new PIXI.Sprite(doc.generateTexture()); stage.addChild(spr); renderer.render(stage); that the sprite is drawn out of scaled doc even I did not render it before generating the texture. My application contains a lot of Graphics and DOCs and rendering one frame takes around 200ms to render at some levels. So I'd like to cache some of the levels that have many objects at the start of the application. little example for a better explanation level 1 - 1000 objects (takes a few ms to render) level 2 - 60000 objects (disaster) and I need animation from level 1 to level 2. cacheAsBitmap may not be an option for me because transition from level 1 to 2 will be very slow unless it's already cached but it starts from level 1, so i cannot cache the level 2 before I actually render it on the screen. is there any buffer option I can use? Thanks for reading!
  8. I just did it in a very hacky way. I created a glass layer that is DisplayObjectContainer on the very top of everything. then set the hitArea of the layer as its Stage's size then defined an array to keep all other interactive objects. glass._items = []; glass._items.push(stage); glass._items.push(sprite1); glass._items.push(sprite2); glass.click = function (e) { var im = glass.stage.interactionManager for (i = glass.length - 1; i >= 0; i--) { if (im.hitTest(glass._items, im.mouse) { glass._items.emit('click', e); return; } } } stage.addEventListener('click', do something); sprite1.addEventListener('click', do something); now I can bubble up to the object's top parent and stop propagation as I need. Altho I would love to have a flawless way but think this could do the job. Please advise me if you guys have a better solution!
  9. oh.. wait.. my example doesn't seem right for interaction. I realised Event Target has got nothing to do with InteractionManager yet. well it's getting more confusing
  10. Oh yes, that's right I understand it now. Somehow I thought red is blue's parent since it's under blue layer haha. actually the use case I'm doing here is exactly same as OP's work. now without red, yellow - Stage blue - Sprite and I have these 3 cases 1. blue gets clicked and both blue's and yellow's listeners are called 2. blue gets clicked and both blue's and stop propagation 3. yellow gets clicked and yellow's listener is called to Achieve case 1 and 2 blue.addEventListener('click', function (originalEvent) { blue.dispatchEvent('click', originalEvent); } yellow.addEventListener('click', function (e) {console.log('yellow clicked');}); // for case 1 blue.addEventListener('click', function (e) {console.log('blue clicked');}); // for case 2 blue.addEventListener('click', function (e) {console.log('blue clicked'); e.stopPropagation();}); and it'll do the job. but to achieve case 3, I also need an emitter attached to the yellow but if I click on the blue then the result will be yellow clicked blue clicked yellow clicked I was spending hours and hours to get this through without the need of removing emitter from yellow when required and adding it again but still no luck. Would there be a better way you could suggest? Thank you very much for your time!
  11. Thanks for the quick reply! Can't wait for fully implemented event feature, and it actually meets most of my use cases. Just a quick question about what you meant by 'the scene graph', you mean it's not bubbling up all the layers on stage? What I've tested was this simple thing. yellow - Stage red - Sprite1 blue - Sprite2 PIXI.EventTarget.mixin(PIXI.DisplayObjectContainer.prototype); sprite2.click = function (e) { sprite2.dispatchEvent('click', e); } stage.addEventListener('click', function(e){console.log('stage clicked');}); sprite1.addEventListener('click', function(e){console.log('sprite1 clicked');}); sprite2.addEventListener('click', function(e){console.log('sprite2 clicked');}); then when i click on the blue it drops (or not implemented) the sprite1 (red) but Stage listens the event. was it what you meant? And also if that is done, would the way to use your bubble event be to attach its mouse events to glass layer on the top of everything and emit as they get called? Question got a bit long. I really appreciate PIXI.js as I use it together with Ejecta and Leaflet. I look forward to becoming a real contributor!
  12. Thank you for the link and the event bubbling is working quite nice, couldn't find any issue yet. Are you also planning to implement event capturing (bottom to top) with Event Target as well? Because with the current InteractionManager, I cannot stop its propagation as OP's issue without workaround nor I can find related code that does the job.
  13. yes you can if you are only using canvas renderer. However if you wish to use WebGL you need some other libraries like Ejecta and phonegap plugin..