Search the Community

Hi, I just joined this form and am very new to the webgl development, so my apologies in advance if this is a question that does not really make sense. I am currently trying to use PIXI.js with a third party data visualization library. One of the classes in this third party library provides a way to customize the way it renders graphics. In the sample application, they do this by writing a raw webgl but I would love to do this using PIXI.js if possible. This class passes webgl context (this.context) so we can do something like below. const gl = this.context; // webgl context used by the third party library const vs = gl.createShader(gl.VERTEX_SHADER); ... So to use this context in PIXI.js, I tried const renderer = new PIXI.Renderer({ context: this.context, clearBeforeRender: false }) ... However, after I called renderer.render(stage), I see some graphics (what I drew using PIXI.Graphics) for an instance and I lost all of them.. I see a bunch of error logs in the developer console. 2core.js:6180 unsupported index buffer type: uint32 push../node_modules/@pixi/core/dist/esm/core.js.GeometrySystem.draw @ core.js:6180 push../node_modules/@pixi/graphics/dist/esm/graphics.js.Graphics._renderDrawCallDirect @ graphics.js:2962 push../node_modules/@pixi/graphics/dist/esm/graphics.js.Graphics._renderDirect @ graphics.js:2947 push../node_modules/@pixi/graphics/dist/esm/graphics.js.Graphics._render @ graphics.js:2861 push../node_modules/@pixi/display/dist/esm/display.js.Container.render @ display.js:1797 push../node_modules/@pixi/display/dist/esm/display.js.Container.render @ display.js:1800 push../node_modules/@pixi/display/dist/esm/display.js.Container.render @ display.js:1800 push../node_modules/@pixi/core/dist/esm/core.js.Renderer.render @ core.js:10290 tilesChanged @ data.ts:122 a.<computed> @ Accessor.js:5 update @ BaseLayerViewGL2D.js:5 processUpdate @ LayerView2D.js:5 _updateLayerView @ FrameTask.js:5 forEach @ Collection.js:5 update @ FrameTask.js:5 (anonymous) @ scheduling.js:5 forAll @ PooledArray.js:5 x @ scheduling.js:5 j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 requestAnimationFrame (async) j @ scheduling.js:5 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 5 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 6 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 7 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 8 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 9 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 10 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 11 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 12 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 13 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 14 14[.WebGL-0x12fa8f200]RENDER WARNING: there is no texture bound to the unit 15 Unfortunately, even after searching an answer in google for a few hours, I don't still understand what these errors indicate.. If somebody could give me any advise or insight, it would be highly appreciated. Thank you very much.

I'm trying to create a mesh that consists of a few dozen triangles that are going to change every frame (hopefully performs okay....) How do I actually do that though? Create mesh: const shader = Shader.from(vertexSrc, fragSrc) const geometry = new Geometry() .addAttribute('aVertexPosition', [initialVerts]) .addAttribute('aVertexColor', [initialColors]) const mesh = new Mesh(geometry, shader, null, DRAW_MODES.TRIANGLES) Attempt at changing aVertexPosition and aVertexColor each frame: mesh.geometry.addAttribute('aVertexPosition', newVertices) mesh.geometry.addAttribute('aVertexColor', newColors) Error: Cannot read property 'updateID' of undefined; originating from GeometrySystem.updateBuffers.

I have created a BoxGeometry and then added it to a Mesh. The problem is that no matter what size a give it, it always gets rendered as size=1. I also created a box using BABYLON.MeshBuilder.CreateBox(), and there it works fine, size is updated as expected. Here's the PG: http://playground.babylonjs.com/#UUJWXS Problem is at line 14: var box = new BABYLON.BoxGeometry('box', scene, 8, true, mesh, 4); as you can see size is set to 8, but actually it gets rendered smaller the the other box which has size 4.

I've created a BoxGeometry and assigned it to a Mesh, then when I click on the Mesh I would like to trigger an update of the geometry, for example change its "size" parameter. Is there a method I need to call on the Mesh to update it? I can see that the size property of the geometry gets updated, but the Mesh is still using the cached version. This is probably an easy thing to do, but I'm struggling a bit as I'm very new to Babylon. I've created a PG here: http://www.babylonjs-playground.com/#JTA9RH Any help would be much appreciated

Hi there, I'm new to Babylon.js. I was wondering if it's possible to create quad-based geometry in Babylon, or if there's a workaround. From the docs I don't see this possible, but maybe you have some hints I need to create a simple 3D modeling editor, where the user should be able to select geometry faces, better if they're quads.

Does anyone know how I can get the Matter physics engine to render its geometry when running within Phaser? I.e. when I'm not assigning a sprite to a physics body, but I want the geometry of the objects I've created to be rendered as lines instead. If I set "debug" to true on the Matter config, I can see purple lines being rendered by the debugger. But if I set debug to false, I no longer see anything rendered. I've found there are a bunch of properties on the Matter "Body" object like StrokeStyle, LineWidth and FillStyle (described here) which seem designed for this purpose. However, I can't see equivalents for those in the Phaser documentation, and when I set the properties on the Matter body directly they seem to have no effect. Am I missing some simple piece of config or setup that I need to do, or have I stumbled across a bug or unsupported feature?

Hi everyone, I know it's possible and advised to use InstancedMesh when several meshes share the same geometry and the same material. Is there some recommended optimization to do when two meshes share the same geometry but have different materials ? For example with this case : http://playground.babylonjs.com/#T4Z2V9#1 (here VertexData object is already loaded) Is there something better than two calls to "applyToMesh" ? Like obj1.geometry = obj2.geometry, this kind of thing... (my question is based on the fact that Unity explicitly share the same geometry across objects, even when Materials are different. But perhaps it's only done to optimize data packing / loading and has no impact at runtime...) (I'm fairly sure I have already found this question somewhere, but can't remember the answer nor find where it was...) Thanks a lot for your inputs ! Have a nice day,

Greetings! I had an idea for the organization to move the camera when the cursor to a specific side of the screen, for example - have brought the cursor to the top of the screen, the camera moves up. Brought down - the camera moves down. But I do not know how to organize it. There is another problem with importing models from 3ds Max 2015 models do not rotate absolutely nothing, no one axis. Tried already and simple rotation, and rotation directly in 3ds Max. Even tried to change the angle of the file .babylon. Nothing changes. Blender model of spin, but their appearance does not suit me, the model curve. Also wanted to ask. Is it possible for someone to ask for help (direct support), can somebody help me a little bit in the course of writing my project?

Hi, I'm loading two mesh, one T-shirt and one shorts, some parts of T-shirt goes through the shorts, so I'm trying to update T-shirt vertices where there is intersection point with the shorts, and make a small expansion of these, But when I do this, it's as if my t-shirt mesh is broken. PR:http://www.babylonjs-playground.com/#RQ90T

Hi there! OK, so I just figured out how to draw shapes with the graphics object. But, I wonder why this method exist ?!?! line = new Phaser.Line(100, 100, 200, 200); ... and then it gets positioned on update() But a line, never gets rendered Does this mean that, this method "Phaser.Line()" is useless ?!?!?!

Hi people, As this has been requested from time to time on this forum, here is a simple and fast method for computing any mesh area : var area = function(mesh) { if (!mesh) { return 0.0; } var indices = mesh.getIndices(); var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind); var v1x = 0.0; var v1y = 0.0; var v1z = 0.0; var v2x = 0.0; var v2y = 0.0; var v2z = 0.0; var crossx = 0.0; var crossy = 0.0; var crossz = 0.0; var ar = 0.0; var i1 = 0; var i2 = 0; var i3 = 0; var nbFaces = indices.length / 3; for (var i = 0; i < nbFaces; i++) { i1 = indices[i * 3]; i2 = indices[i * 3 + 1]; i3 = indices[i * 3 + 2]; v1x = positions[i1 * 3] - positions[i2 * 3]; v1y = positions[i1 * 3 + 1] - positions[i2 * 3 + 1]; v1z = positions[i1 * 3 + 2] - positions[i2 * 3 + 2]; v2x = positions[i3 * 3] - positions[i2 * 3]; v2y = positions[i3 * 3 + 1] - positions[i2 * 3 + 1]; v2z = positions[i3 * 3 + 2] - positions[i2 * 3 + 2]; crossx = v1y * v2z - v1z * v2y; crossy = v1z * v2x - v1x * v2z; crossz = v1x * v2y - v1y * v2x; ar = ar + Math.sqrt(crossx * crossx + crossy * crossy + crossz * crossz); } return ar * 0.5; }; As it doesn't allocate any object, nor calls external functions, it should be fast, GC friendly and it might be called within the render loop. Just let me know if you want it to be integrated in BJS as a method of the class Mesh or AbstractMesh. [EDIT] For experts, note that this computation could be shared and done in one line only within the method ComputeNormals() of the class VertexData just after this line : https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.mesh.vertexData.ts#L2007 with something like : area += length * 0.5;

So, circles are confounding me today... About twenty years ago I did GCSE maths and remember wondering when or why I would ever need to know any of this stuff about circles and angles and the like. Now. Now is when I need to know all that stuff. So I've been all over the interwebz and have learned lots about circles, but while there are myriad explainations of how to work out the length of an arc, the angle and area of a sector... and use both radians and degrees to calculate same; I can find nothing that will tell me which sector a given value (theta, radian, degree, whatever) is in. If I've divided my circle into 12 segments, can I pass a value and know that it belongs in sector 3, for instance?

I was wondering since I have a chunked (tiled) based terrain system, I have a height tool made now, but at the edge of each tile I have gaps forming, I have seen somewhere a way that this can be fixed but hours of searching I haven't been able to find it and I seem to forgotten to bookmark it.. so hoping for some pointers here on possible ways this can be achieved. I attached a image to show what is happening between chunks (meshes). Thanks! Edit: Found the article and it has to deal with Three.js so not at all useful for me..

BABYLON.SceneSerializer.SerializeMesh isn't including the most important bit for meshes, the geometry! I make a cube and then use BABYLON.SceneSerializer.SerializeMesh(cube) and output to console, sure enough no geometry, thus when I use the importer it spits out no geometry found warning.. var thebox = BABYLON.Mesh.CreateBox("thebox", 10, scene); thebox.position.x=thebox.position.z=112; thebox.position.y=5; thebox.id='thebox'; thebox.receiveShadows = true; var box = BABYLON.SceneSerializer.SerializeMesh(thebox); That is all I use, shouldn't the geometry be included in the output of SerializeMesh? I am using Babylon 2.4.0 Here is the JSON stringified output of the serialized mesh that I stored into a file that I'm trying to load from. {"geometries":{"boxes":[],"spheres":[],"cylinders":[],"toruses":[],"grounds":[],"planes":[],"torusKnots":[],"vertexData":[]},"meshes":[{"name":"thebox","id":"thebox","position":[112,5,112],"rotationQuaternion":[0,0,0,1],"scaling":[1,1,1],"localMatrix":{"0":1,"1":0,"2":0,"3":0,"4":0,"5":1,"6":0,"7":0,"8":0,"9":0,"10":1,"11":0,"12":0,"13":0,"14":0,"15":1},"isEnabled":true,"isVisible":true,"infiniteDistance":false,"pickable":true,"receiveShadows":true,"billboardMode":0,"visibility":1,"checkCollisions":true,"geometryId":"98a28707-f3ba-4062-bfc4-47ca8830cf79","subMeshes":[{"materialIndex":0,"verticesStart":0,"verticesCount":24,"indexStart":0,"indexCount":36}],"physicsMass":0,"physicsFriction":0.2,"physicsImpostor":2,"instances":[],"animations":[],"ranges":[],"layerMask":268435455}]} No vertexData or geometry matching the geometryId..

Hi guys how can I get geometry vertices , in three.js i can get positions with box.geometry.vertices and returns coordinate for 8 points ( of a box ) ; now via Bjs i tried to use box.getVerticesData(BABYLON.VertexBuffer.PositionKind); , but seems returns 24 points ! am I wrong or Babylon js use duplicate/separate vertices for each face ! if so , how can I avoid to return duplicated coordinate ? thanks in advance .

I've read the code written by the awesome @Temechon, which addresses modifying the vertices in a mesh. However, I don't understand exactly how to create one such mesh from scratch, especially in such a way that it can be updated frequently with new vertex data. Could someone explain that more clearly? (Also, does BabylonJS have a way to use a VBO for such a task?) I'd post example code, but I don't really have anything that even begins to work yet. EDIT: Clarification. I know the logic and steps needed to create a mesh using vertices and the like. What I don't know is how one applies the arrays to the mesh itself, or how to create the mesh so the vertices can be updated.

Hello In some cases, its more efficient to compute models in real time, rather then download the provided geometry in a babylon file. I want to create markers in my room, terrain ...and replace this specific spots with something like a trees currently i have to create a separate mesh as marker, it would save some space, if i could simply define a marker as a different material Thank you all very much, whoever wants to contribute The playground http://babylonjs-playground.com/#22TZPO#1

hi do you know any tools to generate 2d mesh from geometry or Points like following image? i wanna create navmesh data from tiled tool. but i can't find good tool to generate from tiled data yet.. please tell me any good news .. thx.. best regards..

Hi guys. I have a little task that I can't complet it Let me explain. I have a sphere with 3 bones. Using bones and a slider I modify the sphere geometry, I can scale, translate or rotate the bones, It works like a morph. After deform the mesh I want to save it as new babylon file, without bones, but keep deform geometry, not original. In this scope I update positions, normals, compute normals, but all time the new babylon file is saved like original, and not deform. I have to update anything else? Or I have to save the skeleton too? ....If yes, than I have a problem, because I want to add an animation to the new mesh, that I think will overwrite the skeleton. Here are 2 picture that show my problem http://prntscr.com/8pd0co http://prntscr.com/8pd0qd first sphere is the original, and second is sphere saved. And I make a playground. http://www.babylonjs-playground.com/#1WKAQI#2 Any opinion is welcome. Thanks

Hello everyone, Based on this comment, I realized that Phaser removed support for GeomSprites. However, I'm thinking about making a game in which I just need simple shapes rather than image/spritesheet assets. I thought about using the Graphics object, but realized that I cannot apply physics to the shapes I create using that (as far as I know). Then, I found information about game.debug.render to create circles and rectangles, but ran into the same problem. My question: Is there a way to create a sprite that is just a simple circle, rectangle, or any other basic shape AND has physics properties (like being able to collide with other sprites, drag, etc.). I confirmed this lack of physics properties by checking out the classes for the Rectangle and Circle. Thanks in advance for any help!

Hi, I need to generate a terrain mesh procedurally. I am currently doing it with lots of sprites stuck together in a line to generate the contour of the terrain. It works fairly well, but has a few quirks and seems to affect performance badly. What I was thinking of doing is generating the points in the preload function, then from that, draw a line to rendering the terrain, and then use the same points to generate the collision polygon. The issue I found is that the game.load.physics() function works with a url to a json object. Is there a way to pass it a json object that I created in the game itself instead of a url? By the way, I am using P2 physics for this.

First off, thanks very much for the amazing tool, it must be a lot of work to maintain and it's amazing to be able to use it for free. As for the main issue, I'm getting an error when I try to add a geometric object to a group: phaser.js:14115 Uncaught TypeError: a.setStageReference is not a function Perhaps this is because groups are implemented in Pixi and geometry in Phaser? I'm doing this because I have a custom bitmapText, and text in general seems very unresponsive when I tap it. In particular, I think tapping in between adjacent characters won't fire an event. So I want to place a rectangle over each bitmapText with corresponding width and height, to capture and fire the appropriate event, but my text is part of a group for positioning, and so I would need to add the geometry to group as well. Any solution or alternatives would be greatly appreciated.

Hello all, I have two simple questions. First of all, is it possible to collide a Phaser.Sprite with a Phaser.Rectangle? If not, is it possible to collide two Phaser.Rectangles? Thanks in advance...

how can smooth modify geometry in Babylonjs .

Hello! For my project I want to re-arrange an interesting feature: the rotation of the object by clicking in the right direction (and of its movement) on the principle of moving the spacecraft to point and rotation to the desired degree. How can I make such a function? Example attached.