Jump to content

Repeat texture dynamique


Recommended Posts


I am looking to paint a terrain with a dynamic texture, but I do not know why the texture is too large. 

 I try several things without success and if I use uScale and vScale, the image does not repeat it appears in a corner only (Is this a bug?). 

 Can someone help me have a smaller texture when painting the terrain? 

 Thank you for your help.


Link to comment
Share on other sites

Thank you very much Delta. I have a lot of trouble with this again. I see that the texture is divided by 2, but if I do not multiply 0. 25 for example to make it even smaller, the painting area is divided by 4. 

 An idea of why I think after that I would understand Better functioning. 

 Thank you again for your great help.

I did this:


Link to comment
Share on other sites


change 0.25 to 0.125 maybe

brushcontext.drawImage(img, 0, 0, textureResolution*0.125, textureResolution*0.125);        
        brushcontext.drawImage(img, textureResolution*0.125, 0, textureResolution*0.125, textureResolution*0.125);        
        brushcontext.drawImage(img, 0, textureResolution*0.125, textureResolution*0.125, textureResolution*0.125);        
        brushcontext.drawImage(img, textureResolution*0.125, textureResolution*0.125, textureResolution*0.125, textureResolution*0.125);        

Link to comment
Share on other sites


//    brushcontext.drawImage(img, start x , start y , length x, length y );

 for(var i = 0;i<1.;i+=0.25){
        for(var j = 0;j<1.;j+=0.25){
        brushcontext.drawImage(img, textureResolution*i, textureResolution*j, textureResolution*0.25, textureResolution*0.25);

Link to comment
Share on other sites

  • 2 months later...

@Dad72 -

Two reasons for the pixelation:

1. Your brush size is directly bound to your ground size.

2. You are decreasing the resolution of your texture multiplying the resolution by 0.025 as in textureResolution*0.025 on line 88 in your PG scene. 

I created two PG scenes with the camera initially set at a fixed ratio to the ground size. The first PG scene has a ground size of 100 and the second has a ground size of 200. In drawing you'll see that the radius is directly proportional to your ground size in each scene.



I removed the multiplyer of 0.025 from line 88, and the texture draws at the correct resolution, however I didn't have time to integrate the code I use below to set the the draw coordinates on your ground object:

            var size = vid_Texture1.getSize();

            var pickResult = scene.pick(scene.pointerX, scene.pointerY, null, false, camera);
            var texcoords = pickResult.getTextureCoordinates();
            if (texcoords) {
                var centerX = texcoords.x * size.width;
                var centerY = size.height  - texcoords.y * size.height;

Then use the variables set above - centerX, centerY - as the draw point on the object. I hope this helps, as I went through the same pain last year, and learned that it was far simpler to pick an object directly using its own UVs. I'm sure there is a math solution to the existing PG scene, but it has eluded me.





Link to comment
Share on other sites

Hi DBawel,

Thank you for your help. That does not really solve the problem. Finally, in part, yes, but if you try to paint all the ground, you can see more dragging of the textures what I had managed to remove with the help of Nasimi a can higher up in this subject.

It's really hard to have something perfect. :(


Link to comment
Share on other sites

@Dad72 - I thought about this when on the forum last night, but wasn't certain what you were going for. As I'm sure you know, the only way to paint any image file to tile on a mesh, is to follow the same process as in any 3D application. This is to begin with a tileable power of 2 texture, and then after your first pick on the mesh drawing a single map at the desired resolution; to map the object with a "grid" pattern as you would tile textures. You simply need to account for your texture size, texture scale, brush size, and mesh UVs - and calculate a center point for the texture cooresponding to the mesh's UVs. Push these into an array and provide a radius (cooresponding to your brush size) around each center point where an object pick will draw a new texture tile if the brush is within the radius. Then you might use some fancier functions to use your mask in specific situations. Otherwise, you'll always get the "smearing" of the texture as it's drawn using a circle and gradient mask, as there is no "simple" methods to avoid what you're currently viewing. The only methods I've seen in the past is to proceedurally correct the drawn area after drawing; however, you might as well build a shader to begin with instead of using a texture.

Sorry I could be of much help.


Link to comment
Share on other sites

Is there a possibility other than to paint with a textureDynamique? 

I look at the extension terrain, but 3 diffuse textures seems extremely limit,it should at least 6 or 8 textures to make pretty terrains. It could have been a track to add a dynamic texture to a mixMap by painting colors, but 3 colors is not enough. How to add more textures on this extension? 

 worldMonger is also limit, because you can not create a path of ground, sand for example. 

 Creating a shader Is not in my reach, I do not understand anything at all, I do not even know how to learn how to create, how to start step by step. 

 in short, I find no adequate possibility. The textureDynamics pixelise a lot or else I do not know how to do otherwise if it is possible to avoid its big pixels.


Link to comment
Share on other sites

@Dad72 - If want a pre-made shader to use, @Pryme8 built one that uses 15 out of the 16 slot limit in the shader texture array. It doesn't appear too diffucult to impliment, if you play around with the parameters other than the math a bit:


However, he has a full app he built last year which can be downloaded and run on your server:


If you want to simply paint on a ground plave which has uniform UVs, then take a look at the simple red and black checkerboard texture in BJS, and replicate painting with this by picking the UVs on a ground mesh, write the UV pick coordinates to your canvas in real time, and this will provide you with alot more info. However, if you're looking to paint on terrain which has non-uniform UVs - which is what I believe you're looking to do, the shader.html above will do the job. Otherwise, drawing textures onto a ground mesh with unifom UVs is fairly straight forward. But I would advize using @Pryme8's shader, as he has already done the heavy lifting which I'm still reading through to try and fully follow myself. Regardless, you can just apply the shader to a ground or other mesh, and there should be few modifications you need to make - such as defining the textures in your texture array, and a few other obvious non-math attributes easily readable in the shader. Just don't be intimidated by the math, simply look at the structure and the readable elements, and you should be able to follow. 


Link to comment
Share on other sites

The problem is that the shadows will no longer work if this is not integrated in the shader of the terrain. When using a standardMateriel, everything is OK, the terrain receives the shadows and others. I already had a problem of this kind some time ago. 

 oh and I do not know the difference between UVS non uniform and UVS uniform. I start well, is not it. I've never had as much difficulty with his thing there, but thanks DB for trying to help me, but I do not even know where and what to start. Must start all over again? I do not know where the problem is, so how to fix if you do not know where the error lies. 

 I had almost finished my editor and with this problem, it compromises everything.

Link to comment
Share on other sites

i might be mistaken but I think he goes over how to make shadows in this article http://9bitscience.blogspot.com/2013/07/raymarching-distance-fields_14.html?m=1

it may be irrelevant though to what your doing... I'd try to help but I can't look at screens for very long right now cause of medication in taking right now makes me get screen sick. 

Link to comment
Share on other sites



I think you are working on a painting app, that's cool, man.
Look at this video, its old, but still has relevance. Blender is open source. You can easily (don't fool the community, you cant do it)  adapt source from python to 2d Context and than WebGL. And never undunderestimate the power of UV Coords.


@Pryme8 the only raymarched shader so far :)

Link to comment
Share on other sites


 Maybe he can help @JCPalmer


I also have no idea somehow something good always happens :)


@Pryme8 You probably get a notification/mail It is not worth looking after it. Drink some tee, watch a movie, rest yourself. 



Link to comment
Share on other sites

Thanks Nabroski,

I would like to stay with Javascript and not move me away from my probleme to go to another which is just a pixelation problem with drawImage and DynamiqueTexture.

I'm looking for a solution. What seems possible, why send me towards the creation of shader or the use of pyton. Soon we are going to send me to c ++ and I do not know what other language.

The PG I'm trying to improve is here. I just wish that it does not pixelize when one is ready of the ground. I'm not looking for a shader or the unknown use of another language that I do not control. it would add more of probleme still rather than to solve it.



Link to comment
Share on other sites

This seems possible because Josh (who does not come much on the forum) managed to do it on his editor SamacEditor, but he had to use a field with several tiles. Maybe I should move towards this solution terrain creating, but I do not know how to paint on a tile terrain. But I think I will study this solution. If anyone has some track to paint on several tiles.



Link to comment
Share on other sites

EITt Apologies to Dad72, just re-read your first post and you have already said this.

Having been trying to figure out how you could scale correctly  so that the brush images did not pixelate I started playing around with dynamicTextures and comparing how they were mapped onto a mesh as opposed to just using a straight texture. I got some strange behaviour using dynamicTextures and uScale and vScale. The following two images were produced from the same code with one change.

In the first the image was mapped using texture

materialGround.diffuseTexture = new BABYLON.Texture("textures/grass.png", scene)

and in the second using a dynamicTexture

materialGround.diffuseTexture = textureGround;

plaingrass_pg.JPG.bf6a2be720d23357dac422aa9e34d8a5.JPG  dyngrass.jpg.b83c0a13d1272a6e923d735bea4827f3.jpg

You can check this out with this PG  http://www.babylonjs-playground.com/#1OQFOC#48

Swap round whether line 23 or 24 is the comment. Increasing the ground size and the number of tiles for the uScale and vScale shrinks the grass area in the corner.

Will have to do more exploring to try to solve your pixelating issue.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...