Repeat texture dynamique

[Dad72]

Hello,

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.

http://www.babylonjs-playground.com/#1OQFOC#30

[GameMonetize]

It is not a bug as you are scaling the texture

You also need to scale the rendering: 

http://www.babylonjs-playground.com/#1OQFOC#31

[Dad72]

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:

http://www.babylonjs-playground.com/#1OQFOC#33

[Dad72]

I may have expressed myself badly. Your DK solution works by dividing the texture by 2. But if I divide by 4, this does not work properly. (See the pG above)
I need help to understand why? What should I do for divide by 4?

Thanks again

[NasimiAsl]

http://www.babylonjs-playground.com/#1OQFOC#34

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);        
    

[Dad72]

Thanks Nasimi. This does not work either. Try to paint all the ground and only a small part can be painted top left. 

 This is what I do not understand.

[NasimiAsl]

http://www.babylonjs-playground.com/#1OQFOC#35

//    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);
        } 
        }

[Dad72]

That's great. Works well. Thank you very much Nasimi

[Dad72]

HI,

I would like to come back to this subject. I have a problem of big pixels very important.

How to avoid this big pixels ?

http://www.babylonjs-playground.com/#1OQFOC#36

Click once on the ground and you can see that when you are close to the terrain, the pixels are huge. 

Thanks for your help

[dbawel]

@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.

http://www.babylonjs-playground.com/#1OQFOC#40

http://www.babylonjs-playground.com/#1OQFOC#41

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();

            scene._updatePointerPosition(evt);
            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.

DB

 

 

 

[Dad72]

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. 

http://www.babylonjs-playground.com/#1OQFOC#43

[dbawel]

@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.

DB

[Dad72]

I understand nothing about the theoris on this subject. And at the simplest, how do we do?

[Dad72]

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.

 

[dbawel]

@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:

https://github.com/Pryme8/TERIABLE/blob/gh-pages/shader.html

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

https://github.com/Pryme8/TERIABLE

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. 

DB

[Dad72]

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.

[dbawel]

@Dad72 - I will ask @Pryme8 to contact you directly, and you or he can post the solution - as I believe he can reasonably explain how to solve your issues. He just had a physical accident last night, so it might be a day or two before he responds.

DB

[JohnK]

14 hours ago, Dad72 said:

 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. 

This might help you understand shader basics.

[Pryme8]

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. 

[Nabroski]

@Dad72 

Hello 

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.

https://www.youtube.com/watch?v=7FobUOuISak
 

@Pryme8 the only raymarched shader so far
https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/ssao.fragment.fx

[Dad72]

I never use Blender, I use 3ds max, and I do not know anything about the language pyton.

[Nabroski]

https://wiki.blender.org/index.php/Dev:Py/Scripts/Cookbook/Code_snippets/Materials_and_textures#Textures
https://svn.blender.org/svnroot/bf-extensions/trunk/py/scripts/addons/texture_paint_layer_manager.py
https://docs.blender.org/api/blender_python_api_2_75_release/bpy.ops.paint.html

 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. 

 

 

[Dad72]

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.

http://www.babylonjs-playground.com/#1OQFOC#47

 

[Dad72]

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.

Thanks

[JohnK]

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;

 

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.