- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在尝试使用单纯形噪声按程序生成球体表面,并且我发现为了获得平滑、不失真的噪声,我需要将每个 uv 像素映射到 xyz 坐标。我尝试了几种不同的算法,以下是我最喜欢的:
function convert2d3d(r1, r2, x, y) {
let z = -1 + 2 * x / r1;
let phi = 2 * Math.PI * y / r1;
let theta = Math.asin(z);
return {
x: r2 * Math.cos(theta) * Math.cos(phi),
y: r2 * Math.cos(theta) * Math.sin(phi),
z: r2 * z,
}
}
虽然生成的点看起来是连续的,但纹理接缝周围以及纹理拉伸(stretch)最大的地方存在严重变形:
我知道我正在尝试做的事情称为 UV 映射,但我正在努力正确地实现它。要么出现严重变形,要么出现丑陋的接缝。为了渲染球体,我使用 Three.JS MeshPhongMaterial,对于噪音,我使用 noisejs .
最佳答案
你想要像 THIS 这样的东西吗? ?
在右上角的 GUI 中,在场景 -> 几何体下选择球体。
无需搞乱 UV :)
上面链接的演示中的顶点着色器:
varying vec3 vPosition;
void main() {
vPosition = normalize(position);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
上面链接的演示中的片段着色器:
varying vec3 vPosition;
uniform float scale;
//
// Description : Array and textureless GLSL 2D/3D/4D simplex
// noise functions.
// Author : Ian McEwan, Ashima Arts.
// Maintainer : ijm
// Lastmod : 20110822 (ijm)
// License : Copyright (C) 2011 Ashima Arts. All rights reserved.
// Distributed under the MIT License. See LICENSE file.
// https://github.com/ashima/webgl-noise
//
vec3 mod289(vec3 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x) {
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
float snoise(vec3 v)
{
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
// First corner
vec3 i = floor(v + dot(v, C.yyy) );
vec3 x0 = v - i + dot(i, C.xxx) ;
// Other corners
vec3 g = step(x0.yzx, x0.xyz);
vec3 l = 1.0 - g;
vec3 i1 = min( g.xyz, l.zxy );
vec3 i2 = max( g.xyz, l.zxy );
// x0 = x0 - 0.0 + 0.0 * C.xxx;
// x1 = x0 - i1 + 1.0 * C.xxx;
// x2 = x0 - i2 + 2.0 * C.xxx;
// x3 = x0 - 1.0 + 3.0 * C.xxx;
vec3 x1 = x0 - i1 + C.xxx;
vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
// Permutations
i = mod289(i);
vec4 p = permute( permute( permute(
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
// Gradients: 7x7 points over a square, mapped onto an octahedron.
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
float n_ = 0.142857142857; // 1.0/7.0
vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
vec4 x_ = floor(j * ns.z);
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)
vec4 x = x_ *ns.x + ns.yyyy;
vec4 y = y_ *ns.x + ns.yyyy;
vec4 h = 1.0 - abs(x) - abs(y);
vec4 b0 = vec4( x.xy, y.xy );
vec4 b1 = vec4( x.zw, y.zw );
//vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
//vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
vec4 s0 = floor(b0)*2.0 + 1.0;
vec4 s1 = floor(b1)*2.0 + 1.0;
vec4 sh = -step(h, vec4(0.0));
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
vec3 p0 = vec3(a0.xy,h.x);
vec3 p1 = vec3(a0.zw,h.y);
vec3 p2 = vec3(a1.xy,h.z);
vec3 p3 = vec3(a1.zw,h.w);
//Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
// Mix final noise value
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
m = m * m;
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
dot(p2,x2), dot(p3,x3) ) );
}
void main() {
float n = snoise(vPosition * scale);
gl_FragColor = vec4(1.0 * n, 1.0 * n, 1.0 * n, 1.0);
}
以上采用 float 类型的 scale
统一。
var uniforms = {
scale: { type: "f", value: 10.0 }
};
关于javascript - 将 2D uv 点平滑地映射到 3D xyz 球体上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41661369/
我正在尝试实现凸多边形的正确纹理。我有一个带有 n 个三角形的多边形,对于每个三角形,我正在计算重心坐标,它们是每个三角形的 uv,但在每个三角形的 [0..1] 中,而不是整个多边形。如何插入每个
我目前正在开发一款 map 工具,可以为我的游戏生成自定义 map 。我的网格生成工作得很好,但我看不出如何正确地对我的脸进行 UV 贴图以使纹理保持一致。我已经通过使用相应的坐标对使 UV 贴图在地
我打算编写一个纹理图集管理器,但我遇到了问题。当我修改原始 UV 坐标时,我的程序不再渲染任何内容?这是我的抽奖代码: - (void)drawFrame { [(EAGLView *)self.vi
我有一个 3D 地形(体素网格,我的“任意网格”)。我知道如何从网格上方“拍打”纹理,但在垂直或陡峭的斜坡上它会弄脏。 我可以访问每个顶点的法线和位置。我将如何生成 UV(不使用着色器,因此没有真正的
我有几个 (3-4) 带(基本上是长三角形带),它们共享相同的纹理并且基本上从相同的位置开始。我通过将每一帧的偏移量添加到 V 坐标来垂直滚动该纹理。该偏移量只是我添加到每一帧的一个成员变量(是的,它
在 Android 上为 OpenGL 创建缓冲区时,有什么方法可以为 UV 使用与顶点不同的索引吗? 例如,如果您有 5000 个顶点和 12000 个 UV,并且不希望只为每个唯一的 UV 顶点对
Nginx: PV、UV、独立IP 做网站的都知道,平常经常要查询下网站PV、UV等网站的访问数据,当然如果网站做了CDN的话,nginx本地的日志就没什么意义了,下面就对nginx网站的日志访问
我有从二维形状生成三角形网格的代码。因为在大多数情况下这些形状在表面上的顶点分布不均匀,所以我在生成 UV 时遇到了问题,因此它不会导致纹理失真。任何人都可以推荐一些讨论平面网格上 UV 计算技术的文
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 4 年前。 Improve th
我有一张 UV 贴图: 我想像这样在连接的网格边周围获取纹理像素(以红色选中): 如何使用 Python Blender API 做这样的事情? 最佳答案 制作“UV”bmesh 给定上面带有 UV
摘要 我正在尝试将位移贴图(高度贴图)应用于一个相当简单的对象(六角形平面),并且得到了一些意想不到的结果。我使用的是灰度,因此,我的印象是我的高度图应该只影响网格的 Z 值。然而,我创建的置换贴图在
我有一张 UV 贴图: 我想像这样在连接的网格边周围获取纹理像素(以红色选中): 如何使用 Python Blender API 做这样的事情? 最佳答案 制作“UV”bmesh 给定上面带有 UV
在对多重采样纹理进行采样时,我们必须使用整数坐标,即 ivec2 Texcoord = ivec2(textureSize(texsampler) * In.Texcoord); vec4 color
我正在尝试将纹理应用于我的 .md2 模型。我使用 Gouraud 着色给它上色(底部/顶部平面三角形的标准算法),我必须使用类似的代码来处理纹理坐标 U 和 V。但我真的不明白如何对它们进行插值。从
这个问题在这里已经有了答案: When is @uncheckedVariance needed in Scala, and why is it used in GenericTraversableT
我不知道“膨胀”是否是正确的术语,但这是我现在能想到的全部。我正在尝试沿着三角形 strip 映射一个 1 像素宽(尽管从技术上讲每个纹理都会有这个问题)的图像来模拟激光。当它完全均匀且正方形时,它看
我正在尝试为我在代码中生成的网格计算 uv。这是一个非常简单的圆圈 (2d) 我想像下面这样构造它 并将此代码用于 uvs uvs[i] = new Vector2((verts[i].x+radiu
我正在使用三个 v.73我有来自 raycaster 交叉点的 UV 坐标。我也有这个物体的纹理。我怎样才能在 UV 坐标处获得所用纹理的颜色(RGB 或 RGBA)? 我曾尝试使用从纹理中获取图像的
假设我们有一个 3D 网格,每个顶点都有纹理坐标,所以如果我渲染它展开,我会得到这样的东西(忽略红色方 block ): 现在我正在尝试找到合适的算法来使用顶点 UV 唯一标识这些区域并存储具有此唯一
我正在尝试在 Unity 中更改和调整放置在 bilt-in 立方体面上的纹理。没有任何问题,我设法用这段代码在每张脸上放置不同的图像: void Start() { Mesh mesh =
我是一名优秀的程序员,十分优秀!