Wang tile(王浩瓷砖)算法解决贴图平铺重复问题

这篇具有很好参考价值的文章主要介绍了Wang tile(王浩瓷砖)算法解决贴图平铺重复问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Wang tile(王浩瓷砖)

大家好,我是阿赵。这次来解决一个贴图重复的问题。

一、问题

Wang tile(王浩瓷砖)算法解决贴图平铺重复问题

做一篇很大面积的草地,一般思路是建立一个地面的面片,然后在材质球里面给他做一个Tiling平铺,增大重复次数。这样整个地面都可以被草地的贴图铺满。
Wang tile(王浩瓷砖)算法解决贴图平铺重复问题

从地面上近距离看,效果还不错的
Wang tile(王浩瓷砖)算法解决贴图平铺重复问题

但把镜头拉远了之后,会发现刚才那个平铺的做法,虽然贴图都是无缝的,并不会看到边缘。但在远处看,会看到贴图的重复感比较明显,一条一条的重复纹理很整齐的排列在地面上。
有没有什么办法能解决这个重复的问题,能让贴图在远处看的时候,也是比较自然呢?
当然是有的,有很多种解决重复平铺的算法,比如Wang tile(王浩瓷砖)就是其中的一种,他的实际效果是这样的:
Wang tile(王浩瓷砖)算法解决贴图平铺重复问题

具体效果可以看最上面的视频

二、Wang tile(王浩瓷砖)算法介绍

接下来具体介绍一下WangTile算法。

1、资源准备

Wang tile(王浩瓷砖)算法解决贴图平铺重复问题

这里是一张贴图,分成了16个小格子,每个格子的边有2种颜色:红色和绿色。
我们假设,相同颜色的边互相之间是可以无缝接上的,这个无缝接上,不一定是镜像对称,举个例子,如果第一个格子的右边的边和第二个格子的左边的边都是绿色,那么第一个格子的右边和第二个格子的左边可以组成一张无缝的图就行了。上下也是同理。
这里要注意的是,我们分成2种颜色16张图,是为了一定的复杂性。如果觉得这个复杂性太高,你也可以把贴图的数量从16降低到8。如果觉得复杂性不够,也可以增加颜色。比如把2种颜色增加到4种或者更多。

2、生成随机图片

还是以2色16格为例子。
如果我们可以做到,在渲染大地图的时候,自由的使用1-16格里面的图片来拼接整张大地图,唯一的条件就是相邻格子的边是相同颜色的。这样子,可以得到的排列组合方式会有非常多种。
然后需要思考的问题是,假如我们生成了这么一个使用格子拼接的大地图,我们怎样去记录它的数据呢?
其实很简单,因为格子的序号只有1-16,那么我们也可以用一张贴图来记录整张大地图,比如我们使用512512的地图,记录一个512米乘以512米的大地图,然后每一个格子用一个像素的颜色值1-16来记录,使占用1平方米的面积。这里这个具体的面积不需要很较真,因为是很随意的,只是表达这么一个意思。如果发现一片512512还不够,我们还可以对这个范围做平铺,由于单一的单位已经有500多米了,所以要看出重复来,就非常的难了。
经过生成之后
Wang tile(王浩瓷砖)算法解决贴图平铺重复问题

一张512*512的贴图,由于我这里只用了r通道,并且值只有1-16,所以基本上看起来就是纯黑的。
Wang tile(王浩瓷砖)算法解决贴图平铺重复问题

但配合着shader读取颜色值,就可以做到这样的随机平铺效果了。
值得注意的是,图片如果放到Unity引擎里面,他会自动压缩,要把压缩去掉。然后如果是线性空间下,记得要取消sRGB的选项,因为我们不是想这种贴图作为颜色显示,而是需要读取它准确的值。

3、写shader实现

主要的思路是分为以下几步:
1.先做出显示单一格子,需要可以指定某个色值,就对应显示某个格子,比如色值是14,就显示数字14的格子
Wang tile(王浩瓷砖)算法解决贴图平铺重复问题

2.在显示单一格子的基础上,可以根据像素点所在的坐标,同时显示多个格子
Wang tile(王浩瓷砖)算法解决贴图平铺重复问题

3.整个大贴图,需要可以平铺。
Wang tile(王浩瓷砖)算法解决贴图平铺重复问题
由于随机色值图示预先生成好的,这里的shader只是通过色值去控制UV坐标采样的范围,所以实际的Shader并没有太大的性能消耗的。文章来源地址https://www.toymoban.com/news/detail-501091.html

三、完整Shader

Shader "azhao/WangTile"
{
    Properties
    {
		_tileTex("tileTex", 2D) = "white" {}
		_tillingX("tillingX", Float) = 1
		_tillingY("tillingY", Float) = 1
		_tileX("tileX", Float) = 4
		_tileY("tileY", Float) = 4
		_maskTex("maskTex", 2D) = "white" {}
		_pixelX("pixelX", Float) = 4
		_pixelY("pixelY", Float) = 4
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

			uniform sampler2D _tileTex;
			uniform float _tillingX;
			uniform float _pixelX;
			uniform float _tileX;
			uniform sampler2D _maskTex;
			SamplerState sampler_maskTex;
			uniform float _tillingY;
			uniform float _pixelY;
			uniform float _tileY;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = v.uv;
                return o;
            }

            half4 frag (v2f i) : SV_Target
            {

				half4 finalColor;

				float2 maskUV = float2((i.uv.x * _tillingX) , (i.uv.y * _tillingY));
				float maskVal = ((tex2D(_maskTex, maskUV).r * 255.0) - 1.0);
				float addX = floor(fmod(maskVal, _tileX));
				float addY = floor((maskVal / _tileY));
				float2 finalUV = (float2(((frac(((i.uv.x * _tillingX) * _pixelX)) / _tileX) + ((1.0 / _tileX) * addX)) , ((frac(((i.uv.y * _tillingY) * _pixelY)) / _tileY) + ((1.0 / _tileY) * addY))));


				finalColor = tex2D(_tileTex, finalUV);
				return finalColor;
            }
            ENDCG
        }
    }
}

到了这里,关于Wang tile(王浩瓷砖)算法解决贴图平铺重复问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【LeetCode】每日一题 -- 1240. 铺瓷砖 -- Java Version

    题目链接 :https://leetcode.cn/problems/tiling-a-rectangle-with-the-fewest-squares/ 23.05.31 华为机试第二题 NP-Complete 问题 题解参考:Java DFS暴力递归(详细注释) … 题解思路 : 检查当前答案是否大于等于当前最佳答案,若是,则进行剪枝,回溯 检查正方形中是否有空位,若无空位,更新

    2024年02月08日
    浏览(33)
  • 使用binary-wang开发微信小程序的登录和微信支付

    贴个官网,建议down下来他的源码,对照着开发更方便,因为备注很详尽。 其它不多废话了,我直接写步骤了。 1. Maven引入 时间2023年5月,目前最新版本是4.5.0 2. 微信小程序参数配置 考虑到多微信小程序和微信支付多商户的问题,我们的配置将会是以集合的形式存在 2.1 prop

    2024年02月04日
    浏览(54)
  • 【解决】FBX模型导入Unity3D贴图丢失问题

    1、选择“Materials” 2、Location选择“Use External Materials(Legacy)” 3、最后点击“Apply”  

    2024年02月15日
    浏览(58)
  • Unity平铺地板砖【无需代码】

    主要用于循环拼接需要的地板,首先先要有一个贴图 Unity中设置一些图片的格式,红框内为重点: 选择重复后,材质才能自动重复平铺,

    2024年02月07日
    浏览(30)
  • CSS中如何实现背景图片的平铺和定位?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月10日
    浏览(50)
  • Power BI矩阵行数据平铺及列数据排序

           众所周知,Power BI中矩阵通常由三部分属性组成,分别是行、列以及值。各属性添加不同数据组合后,矩阵会呈现出不同的样式,有时我们需要对样式进行灵活调整,比如将行属性的多级数据平铺展示以及列属性数据排序。 一、矩阵行属性的多级数据展示 1、利用+/

    2023年04月16日
    浏览(35)
  • 线上使用雪花算法生成id重复问题

    项目中使用的是hutool工具类库提供的雪花算法生成id方式,版本使用的是5.3.1 雪花算法生成id方式提供了getSnowflake(workerId,datacenterId)获取单例的Snowflake对象,并对生成id的方法nextId()进行了synchronized加锁处理。 IdUtil Snowflake 项目中使用雪花算法 IdUtils 举例controller UserController 线上

    2023年04月23日
    浏览(49)
  • 力扣(LeetCode)算法_C++—— 存在重复元素

    给你一个整数数组 nums 。如果任一值在数组中出现 至少两次 ,返回 true ;如果数组中每个元素互不相同,返回 false 。 示例 1: 输入:nums = [1,2,3,1] 输出:true 示例 2: 输入:nums = [1,2,3,4] 输出:false 示例 3: 输入:nums = [1,1,1,3,3,4,3,2,4,2] 输出:true 提示: 1 = nums.length = 105 -1

    2024年02月09日
    浏览(45)
  • 【动态规划】【二分查找】C++算法 466 统计重复个数

    视频算法专题 动态规划汇总 二分查找 定义 str = [s, n] 表示 str 由 n 个字符串 s 连接构成。 例如,str == [“abc”, 3] ==“abcabcabc” 。 如果可以从 s2 中删除某些字符使其变为 s1,则称字符串 s1 可以从字符串 s2 获得。 例如,根据定义,s1 = “abc” 可以从 s2 = “abdbec” 获得,仅需

    2024年01月23日
    浏览(50)
  • 算法:删除字符串中的所有相邻重复项

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 一、问题描述 二、栈解法 三、双指针解法 总结 提示:以下是本篇文章正文内容,下面案例可供参考 给出由小写字母组成的字符串str,重复项删除操作会选择两个相邻且相同的字母,并删除它们。

    2024年01月22日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包