TEXTURE SPLATTING? about threejs-sandbox HOT 32 CLOSED

@arpu : Will test this out now! :)

from threejs-sandbox.

@arpu

Looks great! That looks like it's got a lot of what we talked about (and more)! It seems a bit under documented, though. It looks like the license is MIT -- maybe it's worth adopting the project or working with that dev and making a nicer more modular package out of it with a nice editable demo? It seems like the kind of thing a lot of projects would benefit from if packaged right. Might be a good fit for the three.js examples folder, too.

from threejs-sandbox.

Also just FYI it looks like it requires WebGL2.

from threejs-sandbox.

Sorry about the lack of documentation, I'll add some more once I get a few minutes. Kinda just made up things as I went, so the code is a bit stream of consciousness :(

Let me know if you all need any help adapting it, it'd be great to see other projects using it.

from threejs-sandbox.

there is a example in the threejs forum at https://discourse.threejs.org/t/how-to-create-a-multiple-textured-terrain/5069/6 ( i use this shader on https://vrland.io/worldg )

babylon has some ideas for texture splatting on 64 images at
https://forum.babylonjs.com/t/pbr-texture-splatting-up-to-64-textures/1994

from threejs-sandbox.

Hello and thank you!

As much as I enjoy working on these experiments my free time is limited and I have to be selective about what I put my time into especially for free. And unfortunately texture splatting isn't something I have a need for or am interested in. I recommend studying the forum link that @arpu posted or asking another question there with what you have tried if the solutions posted aren't sufficient.

Again I'm always happy to hear people enjoy what I'm working on and if you get any use out of it I'd be excited to see what you use it for!

from threejs-sandbox.

@arpu

@gkjohnson if you have ideas or shader how to implement i could try to make a example with 64 different textures ( this needs splat Atlas or tiles? )

So I'm not too familiar with this topic but here are the things that seem important:

• High resolution splat index texture with the ability to index into multiple splat tiles and alpha blend them.

• Avoiding the mipmap bleeding associated with texture atlases.

• Avoiding the look of repetitious textures.

I've looked around briefly to see what other peoples results look like in other engines and here's what I might try:

• Create a high resolution splat index texture with 8 bits per channel where each channel represents the index of a tile. That should give you 256 varieties of splat tiles to use. A second sibling texture with the same splat pattern can be used to hold the alpha blending or weights of splat tiles to use.

• Slightly offset the uv scales and position for each splat tile layer so they can be overlaid to combat the look of repetition in the scene.

• Associate a heightmap with each splat tile to further combat the look of repetition and blend them more interestingly and realistically.

The mipmap bleeding issue is the hardest on in webgl, I think. Here's what I would look into to solve that:

• See how the mipmapping behavior of 3d textures works and set each splat tile to be a different layer in the 3d texture to sample from.

• Build a custom mipmap pyramid and implement custom mipmap filtering for the terrain shader, which would likely be a performance hit but still workable.

I haven't read through the whole forum post you sent so I don't know what everyone else has tried but that's where I would start in order to do this.

Let me know if you wind up putting something together for this!

from threejs-sandbox.

@arpu

thx a lot @gkjohnson for your informative post!

for now this looks to complicated for me :/

Of course! It's definitely not all-or-nothing, either. I think just focusing on using a texture atlas with splat index map and alpha weight map would be a pretty big improvement. WebGL2 might be your best bet though because it supports Sampler2DArrays (ctrl +f "texture arrays"), which is different than an array of textures, and should address the mip map bleeding issue. But unfortunately they're not supported in three.js yet.

If you wind up giving it a try let met know if you need a little more guidance!

from threejs-sandbox.

will study some shader code from microsplat https://github.com/MathieuUnity/UnityProject/blob/f82c5a9a6493624e1ce4b019f5f99cea85bbe845/SemaineSpe/Assets/Imports/Map2/Core/Examples/Scene/MicroSplatData/MicroSplat.shader

looks this can blend 32 texture that would be fine

from threejs-sandbox.

ok cool looks doable with https://jsfiddle.net/zywmxLd6/

I didn't realize DataTexture2DArray was a part of THREE! Heh looks like it's undocumented at the moment. It would be more convenient to have a non Data- version such as Texture2DArray so you don't have to access the raw texture data. It might be worth adding a feature request for.

I'm excited to see what comes out of this!

from threejs-sandbox.

this looks like a good start https://github.com/Zylann/godot_heightmap_plugin/blob/multisplat/addons/zylann.hterrain/shaders/multisplat16.shader

from threejs-sandbox.

hmm my initial plan was using compressedTextures with Basisu but looks like this is not supported by threejs

I would definitely suggest making a feature request for it -- it seems webgl2 is becoming more nominally supported in threee.js

from threejs-sandbox.

@arpu : Thank you brother, but that doesn't really answer my question.

from threejs-sandbox.

@gkjohnson if you have ideas or shader how to implement i could try to make a example with 64 different textures ( this needs splat Atlas or tiles? )

from threejs-sandbox.

thx a lot @gkjohnson for your informative post!

for now this looks to complicated for me :/

from threejs-sandbox.

ok cool looks doable with https://jsfiddle.net/zywmxLd6/

from threejs-sandbox.

@arpu : Would be great if you could make example for this.

from threejs-sandbox.

Would be BEAUTIFUL if someone could create a splatmap / terrain texture quality example. <3 MUCH thanks!

from threejs-sandbox.

will bring it online what i have now with rgb blend map for 4 Textures

from threejs-sandbox.

@arpu : wonderfully awesome! Please do share link! <3

from threejs-sandbox.

@Thundros there is this older example http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html ( not from me)

from threejs-sandbox.

@arpu : that's not the type of splatmap I was thinking of. I'm thinking of RGBA.

from threejs-sandbox.

looks like this is what we want https://github.com/simondevyoutube/ProceduralTerrain_Part5

https://www.reddit.com/r/threejs/comments/gmnkn8/3d_world_generation_5_texturing_triplanar

@gkjohnson with this sample this bug here could be closed?

from threejs-sandbox.

@simondevyoutube

Kinda just made up things as I went, so the code is a bit stream of consciousness :(

I didn't mean to knock it! I think that's how some of the best work gets done. I just figured that if someone was going to update it to work in their project it might be nice to help the documentation along the way.

Thanks for your awesome work!

from threejs-sandbox.

@simondevyoutube : Yes. thank you for your AWESOME work! It would DEFINITELY help ALOT of people if you could make this regular javascript not using modules! MUCH appreciated for your work! PLEASE give yourself a pat on the back, PLEASE keep up the GREAT WORK! <3

from threejs-sandbox.

This needs to work with a splatmap.

Like this :

The transparency is blends between different textures. The transparent white is a gravel-textured road with the transparency mixing inbetween textures, the transparent blue is a river, the green is grass, the light red is rock / gravel. the dark red is mountain-texture / rock-texture.

Here's better images than mine :

from threejs-sandbox.

@simondevyoutube

Kinda just made up things as I went, so the code is a bit stream of consciousness :(

I didn't mean to knock it! I think that's how some of the best work gets done. I just figured that if someone was going to update it to work in their project it might be nice to help the documentation along the way.

Thanks for your awesome work!

Oh no worries, wasn't offended.

from threejs-sandbox.

Re: Thundros

Just FYI, my technique painted the splat values into vertices, since I can guarantee both ordering and texture indices per face. It's an important point for allowing the unlimited different textures.

If your use case absolutely requires a texture splat map, you'll have to modify this technique. I haven't given thought on how to make a splat texture work with this technique, so you'll have to start from scratch or go with the standard RGBA 4 texture setup.

from threejs-sandbox.

:(

from threejs-sandbox.

@Thundros

:(

You're asking people to do a lot of non trivial work for you for free to fit your specific use cases (and it looks like in a lot of different repos). We have given you a lot of resources and places to start as well as offers of further guidance and @simondevyoutube has provided an incredibly generous start. Please put some effort into this yourself if you would like to see it happen.

You should be able to update @simondevyoutube's example to use index and weight textures to support what you're looking to do. Keep in mind creating a terrain with a blended system with > 4 terrain types like this is likely not as simple as just making textures in photoshop. A terrain editing system will probably be needed in order to keep the two textures in sync. Perhaps someone is generous to do this but I suggest putting some time in yourself to contribute back -- it's the only way to guarantee it happens the way you want. Everyone in this thread has done quite a bit.

from threejs-sandbox.

No, I'm asking some people to be nice enough to help alot of people. Not just me. Anywho, I guess no one gives a fuck so closing this.

from threejs-sandbox.

hmm my initial plan was using compressedTextures with Basisu but looks like this is not supported by threejs https://discourse.threejs.org/t/is-it-possible-to-have-a-texture-array-of-compressed-textures/16213/3

from threejs-sandbox.