Search the Community

Hi, I'm new to BabylonJS and 3D. I created a scene in Blender with a character. It has a single material, UV Map and texture. It works fine in BabylonJS but when I replace the texture with new BABYLON.Texture or new BABYLON.DynamicTexture (in my case), the new texture does not take into account the UV Map. I think I forgot something, but I don't know where to watch. (Sorry for my English ^^')

I have a canvas and want to use it's content as a texture. I assume there is a way to use dynamicTexture for that, but couldn't find out a way to do that. I've created a demo here: https://codepen.io/anon/pen/mQVLaJ I'd like to use the content of the canvas ("Hello World") as the texture for the plane. (I know that I could write the text directly to the dynamicTexture. The text in the example is only for demo purposes. In my project it won't be text.)

Hi guys, After some previous attempts to solve some problems in our project, we saw that we were not getting anywhere so we decided that we needed a professional help. This is the offer we published on the Upwork platform, so if anyone is seriously interested in completing the job, please contact us. This is the text of the offer: _______________________________________________________________________________________________________________________________ Representation of a snow-covered mountain scene in Babylon.js Engine The task consists of representing a snow-covered mountain landscape with forest and water bodies in Babylon.js. The focus has to be made on the visual attractiveness while still offering high performance. An example of a scene like that would be this one (Scene1), made in Three.js. We are providing a basic scene (Scene2) made in Babylon.js, and the following improvements have to be made to this scene: 1) Implementing a GLSL Shader / Babylon.js Custom Material which accepts the following criteria: Terrain Texture: - Rocks: should be a procedural texture with a nice natural transition between the snow and the rock texture like in the Scene1. - Water: should be the WaterMaterial provided by Babylon.js Material library. - Snow: it is already acceptable in the Scene2, but any visual improvement is welcome. If needed, the mask image for the texture mapping can be also provided as three separated alpha mask images, one for each type of texture. Furthermore, it has to support a Dynamic Texture on top of the Terrain Texture, so that it should be possible to draw directly on the ground. An example of this would be this scene (Scene3), implemented with ShaderBuilder : The problem with this scene is that it lacks bump maps, fog and shadow effects. There should be visual consistency across the most popular browsers: Chrome, Firefox, Edge and Safari. _______________________________________________________________________________________________________________________________ If you have any questions, we're ready to answer them. Thanks!

Hi. I created small example with rectangle drawn on canvas and than used as texture for plane. PG Works fine but on zoom out , artefacts on texture appeared: Doing something wrong?

I can write texts on "billboard style" mashes in any combination of text and background colors. However, I cannot figure out how to do it when wrapping text. For text wrapping I've used a code I've seen on this forum and on Stackoverflow and it works fine. However, it uses direct functions of WebGL and that apparently collides with the usage of BABYLON.JS objects (not surprising as it goes underneath the Babylon layer). So, I can draw text In white, but not in black. I'm sure it can be done, but I'm fighting it the whole morning without succes, Please have a look into this playground example (I've isolated it from the rest of my application). To see the meshes, double click on the canvas. https://www.babylonjs-playground.com/index.html#MBENKS Thanks very much in advance.

Im trying to add text labels to my project by using dynamictexture and drawtext, but first of all it doesnt render at all from a distance, and it sometimes renders twice at the same time but different sizes. What am i doing wrong? ex http://www.babylonjs-playground.com/#DSD7JR Youll have to move around and then scroll out until the text starts acting wonky and you'll see what i mean. Suggestions?

Hello everyone, I'm currently doing some tests with the DynamicTexture system that could be used to add a new tutorial. The final goal is to have one picture on a plane. When I click on some button I will activate an animation managed by Babylon (if it's possible) so I can fade in and fade out the pictures. I had a first method where I wanted to add a canvas inside the canvas but that didn't work out : http://www.babylonjs-playground.com/#B9HGX0#3 Now I have one texture fading in and fading out automatically : http://www.babylonjs-playground.com/#B9HGX0#5 To be continued...

Hello, I have noticed that there is a problem with UV mapping, if I use a dynamicTexture on my mesh, imported from .babylon file. I am sure that my mesh has proper UV mapping, I have checked it by using standard texture. If I use normal texture on this mesh, everything is ok. If I use dynamic texture on BABYLON.Mesh, everything is ok. If I use dynamic texture on my mesh, I have seen something like that: I can't find an example on the playground with a mesh with proper UV mapping, so I have chosen the skull Playground: http://www.babylonjs-playground.com/#1NQC5D#3

Hi, Is it possible to draw video onto the canvas element of the dynamic texture? Thanks - Raghavender Mylagary

Hello, I am new to this forum and first want to thank for a lot of helpfull posts! Maybe someone can help me with this one: I've started with http://www.babylonjs-playground.com/#9U086#4 (I believe created by iiceman, thanks!) and tried to use fabricjs to paint on the canvas. To allow user interaction I've send the events from the Bayblonjs canvas to the fabricjs canvas translated like this: var pickResult = scene.pick(scene.pointerX, scene.pointerY);var texcoords = pickResult.getTextureCoordinates(); if (texcoords) { var clicked_x = texcoords.x; var clicked_y = texcoords.y; var posX = (clicked_x * textureWidth) | 0; var posY = (textureWidth - clicked_y * textureHeight) | 0; var rect1 = canvas.upperCanvasEl.getBoundingClientRect(); var clientX = posX + rect1.left | 0; var clientY = posY + rect1.top | 0; var evt = document.createEvent("MouseEvents"); evt.initMouseEvent(name, true, true, window, 1, screenX, screenY, clientX, clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, event.button, canvas.upperCanvasEl); return evt;}I was surprised that this works. Sorry i didn't figured it out how to make a playground example with fabricjs, instead I have an example here: http://www.steidle.net/playground/webgl/shirt/test.html But my problem is that it is smooth in chrome, slow in firefox and IE, unusable in Mac Safari. Does someone have a idea how i could get better performance? The Part where the texture get updated is only called when the underlying fabricjs canvas changes: canvas.on('after:render', function () { UpdateTexture();});best regards, Lothar

Hi everyone I'm wondering why font size and font rendering is so different when comparing `DynamicTexture` and `Canvas2D` side by side. http://www.babylonjs-playground.com/#TFFCW Note: The huge but blurred text is `8px` while the small and crisp text is `32px` Dynamic texture returns the expected result while text rendered in canvas 2d seems to be way too big and blurry. Of course I could use a bigger font size (ie. 8 times the size needed) and then scale it down (`scale: 0.125`). But I'd like to understand what's going on… Any hint much appreciated! Anyone?

Please send me in the right direction, this is what I am looking to do: My GUI is a sphere Clicking on the sphere activates the keyboard While typing, letters are produced on the sphere Pressing Enter will if "#" begins string, js file with that name will run, example typing "#login" will run login.js if no "#" begining string, then createsphere.js will run, creating a sphere with the text added to the sphere's texture My real question at the moment, How do I display, WHILE TYPING, letters on a sphere? my first naive thought was to have a text box on a plane, with the camera facing the back of the plane, camera would see no text or plane only a sphere on the other side of the plane and the sphere would be reflective so you could see the text reflected from the plane through the reflection on the sphere, LOL LOL!!!!! I quickly realised that the reflective quality is not actually reflecting, hahahaha, oh boy was that a good one

I would like to solve two things. - How do I center the text on the front face of this mesh? - How do I only assign the text to the front face only? - How do I on click change the text? http://www.babylonjs-playground.com/#1KN7ZA Thanks

IMO it is really confused. Options cannot make up its mind what it wants to be; being kind to the designers: A _canvas An object descriptor: i.e. { width: x, height: y } A size: i.e. { width: options, height: options } Why do I say this? I suggest making up its mind: be a descriptor: if (options.canvas !== undefined) { //... } Or: if (!(options.width === undefined || options.height === undefined)) { // ... } else if (options.size !== undefined) { // ... } This will cause some breaking changes, but I think it is acceptable to correct the course onto a path of sanity. Next, I want to add text alignment if (options.textAlign !== undefined && typeof options.textAlign === "string") { // ... } I'm glad to submit the PR. I just don't want for it to sit on the shelf when I do. I would submit a Github issue, but it seems that has been disabled, or is unavailable to BabylonJS. Is that agreeable?

Hi Everyone, I'm looking into this mesh = BABYLON.MeshBuilder.CreatePlane("mesh", { width: 10, height: 10, sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene); mesh.material = new BABYLON.StandardMaterial(null, scene); texture = new BABYLON.DynamicTexture("texture", { width: 10, height: 10 }, scene, false, BABYLON.Texture.NEAREST_SAMPLINGMODE); mesh.material.diffuseTexture = texture; context = texture.getContext(); context.fillStyle = '#F00'; context.fillRect(0, 0, 100, 100); context.fillStyle = '#00F'; context.fillRect(0, 0, 15, 5); texture.update(); // Trying to fix it like ( WIP ) mesh.material.diffuseTexture.uScale = 10 / mesh.material.diffuseTexture._canvas.width; mesh.material.diffuseTexture.vScale = 10 / mesh.material.diffuseTexture._canvas.height; On the internal the framework is forcing the texture to be power of 2 which is ok, but my problem is that the new canvas size is 16x16 instead of 10x10 but the way UV are mapped makes that the 10x10 size will only cover a portion of the plane instead of the full width/height. Some references on the code. DynamicTexture constructor https://github.com/BabylonJS/Babylon.js/blob/8220f1520a9faf4779ba7c0280514fb8f724b524/src/Materials/Textures/babylon.dynamicTexture.ts#L19 Engine.createDynamicTexture https://github.com/BabylonJS/Babylon.js/blob/eefc1faaf1261143658c3c07e7f86b8f22f65b6e/src/babylon.engine.ts#L1815 Example: http://www.babylonjs-playground.com/#1MCWZJ#0

Hi guys, I have this type of menu split into section (buttons). I want insert (line 111) a text in each button using a DynamicTexture but, as you can see, the text have a irregularity in the corner (i guess it's due by the ribbon's triangulation).There are other ways to enter text in a Mesh, perhaps with the possibility of indicating the inclination? Here my code (it's just a draft )http://www.babylonjs-playground.com/#TLXTN#21Thanks to all.

Hello, could someone help me fix this bug. I have managed to reproduce with just a few lines in the playground. Flickering occurs when using a video as a reflection texture over an image diffuse texture. However no problems using a video diffuse texture and video reflection texture. The flicker rate can be altered by changing the value at line now - this._lastUpdate < 15 in the function VideoTexture.prototype.update. See http://playground.babylonjs.com/#19EHYV

Hi, I'm looking at the excellent example at http://playground.babylonjs.com/#HSVQL (lines 118-130) and was wanting to know if there was a way to attach an action to a Dynamic Texture (line 118), or it's related 'context' (line 126) ? I was wanting to use this idea in an in-game 'menu', and be able to display a set of options, you know, like a menu... and the user to be able to select one. I'm using a ArcRotateCamera and love how the text is always facing the user. I believe that an ActionManager is only attachable to a Mesh (and not a DynamicTexture), and the canvas CanvasRenderingContext2D object that the myDynamicTexture.getContext() returns doesn't appear to have any funtionality I'm after (like readMousePosition() or something similar). I initially thought of producing 2D Plane meshes for the menu, but I'm not entirely sure how to go about forcing them to be always facing the user ? Any ideas or guidance is very appreciated. Thanks, bws.