CW-wgl2

Members
  • Content Count

    4
  • Joined

  • Last visited

  1. CW-wgl2

    Curves

    It would be nice to draw SVG paths with WebGL. example M16,1.667C8.084,1.667,1.667,8.084,1.667,16S8.084,30.333,16,30.333S30.333,23.916,30.333,16S23.916,1.667,16,1.667zM25.534,8.232c1.7,2.084,2.731,4.732,2.767,7.618c-3.232-0.656-6.14-0.783-8.777-0.38c-0.362-0.825-0.738-1.631-1.125-2.412C22.43,11.542,24.497,9.781,25.534,8.232zM23.955,6.624c-0.877,1.658-3.191,3.232-6.564,4.476c-1.533-2.86-3.115-5.299-4.388-7.033c0.96-0.241,1.964-0.37,2.997-0.37C19.031,3.696,21.809,4.8,23.955,6.624zM10.846,4.831c1.09,1.441,2.751,3.91,4.415,6.967c-3.687,1.073-8.032,1.677-11.282,1.585C4.806,9.581,7.395,6.431,10.846,4.831zM3.696,16c0-0.147,0.006-0.293,0.011-0.439c0.312,0.013,0.632,0.019,0.96,0.019c3.464,0,7.754-0.646,11.484-1.765c0.048-0.015,0.093-0.029,0.14-0.044c0.354,0.704,0.697,1.431,1.033,2.175c-0.516,0.146-1.022,0.314-1.518,0.507c-3.547,1.375-6.512,3.895-9.031,7.678C4.861,21.96,3.696,19.114,3.696,16zM8.388,25.656c2.31-3.574,5.002-5.924,8.209-7.167c0.516-0.2,1.049-0.369,1.594-0.513c1.205,2.996,2.166,6.205,2.559,9.373c-1.462,0.613-3.066,0.953-4.749,0.953C13.128,28.305,10.484,27.312,8.388,25.656zM22.802,26.246c-0.446-2.939-1.321-5.895-2.413-8.686c2.316-0.279,4.881-0.117,7.742,0.485C27.557,21.46,25.574,24.398,22.802,26.246zSome of the commands are present in Pixi (like Graphics.moveTo, Graphics.lineTo), but no curves (curveto, smooth curveto, quadratic Bézier curve etc...) Are they gonna be implemented in the near future? What would be the best way to extend Pixi? Could you give me a very simple example? Could it this work: "absolute cubic Bézier curveto" © function cubicBezier(x, y, x1, y1, x2, y2) {// i solve this ef like this http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api/ ...// returns the array with the points}I pass the points to the Graphics class and now i can transform the Bezier Object, render (both way), interact etc, just as the other objects. Is there any Interface of Graphics class?
  2. It still doesnt feel right. If i want to zoom in the canvas, i have to loop through all text objects, get the font string, make a little string magic to get the size and the unit and scale. It would be better DisplayObjectContainer.scale.x = 2DisplayObjectContainer.scale.y = 2and all text's font-size property inside the container get updated.
  3. Thanks rolnaaba! I put togeather a quick demonstration in Raphael what im trying to achive: http://jsbin.com/oGoyApo/3 I guess bitmap wont work becouse it gets blurry on to much zoom and if i set to high px value in BM Font's fonr settings then at zoom out it look really ugly. Could it be a solution to take the path of my custom fonts and build the text from shapes? Like Raphael takes the cufon font's paths and makes its on shapes from it. (Its damn slow but maybe it could work on WebGL...)Shapes wont get blurry on scaling, do they? About the future release with possibility to set the scaling algorithm: Is someone already working on this? When will it be done? Can i help something?
  4. I want to make a puzzle game, where the user can zoom and pan on a grid. Some square has text which should be zoomable. First i have tried svg. It looked very nice, the zoomed text was very crisp, but the performance wasnt the best on mobile. I took a look on some benchmark test, and WebGL was so much faster then canvas (or SVG of course), so i want to take a shot. There is eaven a project http://iewebgl.com/ which makes IE capable for WebGL. I read some good review on pixie.js (performancewise too), so i hope its the right framework for my needs. - Is this the official Pixi.js forum? I saw Mat Groves is a moderator... - How do i know if PIXI.autoDetectRenderer uses WebGL or Canvas? - I tried to scale a text but it looks very blurry: // create an new instance of a pixi stagevar stage = new PIXI.Stage(0x66FF99);// create a renderer instancevar renderer = PIXI.autoDetectRenderer(620, 380, null, false, true);// add the renderer view element to the DOMdocument.body.appendChild(renderer.view);// create a text object with a nice strokevar text = new PIXI.Text("I'm fun!", {font: "36px Arial", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6});text.position.x = 0;text.position.y = 0;text.scale.x = 10;text.scale.y = 10;stage.addChild(text);// render the stage renderer.render(stage);thanks