three.js - Perlin 噪声函数在顶点着色器中损坏但在片段着色器中没有?
问题描述
我正在使用 Three.js 在 WebGL 2 中渲染由许多三角形组成的平面,并且我想根据 Perlin 噪声函数偏移平面中的顶点。但是,我的噪声函数似乎在片段着色器中起作用,但在顶点着色器中不起作用。
顶点着色器:
#version 300 es
precision highp float;
vec2 rand2d (vec2 uv_0) {
return vec2(
fract(sin(dot(uv_0, vec2(9832., -8933.2))) * 1938.4), fract(cos(dot(uv_0, vec2(-5294.2, 1243.2))) * 9043.)) * 2. - 1.;
}
float perlin_noise (vec2 uv_1) {
vec2 v00 = floor(uv_1);
vec2 v10 = v00 + vec2(1., 0.), v01 = v00 + vec2(0., 1.), v11 = v00 + vec2(1., 1.);
vec2 vxy = fract(uv_1);
float i00 = dot(rand2d(v00), vxy), i01 = dot(rand2d(v01), vxy - vec2(0., 1.)), i10 = dot(rand2d(v10), vxy - vec2(1., 0.)), i11 = dot(rand2d(v11), vxy - vec2(1., 1.));
vec2 s = smoothstep(0.0, 1.0, vxy);
return mix(mix(i00, i10, s.x), mix(i01, i11, s.x), s.y);
}
// supplied by three
in vec3 position;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec3 cameraPosition;
// supplied by me
uniform float spacing;
uniform vec2 offset;
uniform vec2 size;
out vec3 offsetPosition;
void main() {
// vec3 offsetPosition = position;
offsetPosition = position + vec3(offset.x, 0, offset.y);
offsetPosition.z = floor((cameraPosition.z + offsetPosition.z) / spacing) * spacing;
offsetPosition.y = perlin_noise(offsetPosition.xz / 10.) * 10.;
gl_Position = projectionMatrix * modelViewMatrix * vec4(offsetPosition, 1.0);
}
片段着色器:
#version 300 es
precision highp float;
vec2 rand2d (vec2 uv_0) {
return vec2(
fract(sin(dot(uv_0, vec2(9832., -8933.2))) * 1938.4), fract(cos(dot(uv_0, vec2(-5294.2, 1243.2))) * 9043.)) * 2. - 1.;
}
float perlin_noise (vec2 uv_1) {
vec2 v00 = floor(uv_1);
vec2 v10 = v00 + vec2(1., 0.), v01 = v00 + vec2(0., 1.), v11 = v00 + vec2(1., 1.);
vec2 vxy = fract(uv_1);
float i00 = dot(rand2d(v00), vxy), i01 = dot(rand2d(v01), vxy - vec2(0., 1.)), i10 = dot(rand2d(v10), vxy - vec2(1., 0.)), i11 = dot(rand2d(v11), vxy - vec2(1., 1.));
vec2 s = smoothstep(0.0, 1.0, vxy);
return mix(mix(i00, i10, s.x), mix(i01, i11, s.x), s.y);
}
in vec3 offsetPosition;
out highp vec4 fragColor;
void main() {
float value = perlin_noise(offsetPosition.xz / 10.) * .5 + .5;
fragColor = vec4(value, offsetPosition.y, 0., 1.);
}
结果:
这架飞机是完全平坦的(我发誓,该图像中有很多三角形),并且显示为红色而不是黄色/绿色,这表明它offsetPosition.y
被设置为零,这意味着我的 Perlin 噪声函数,在顶点着色器和片段着色器仅在顶点着色器中返回 0。为什么会这样?
解决方案
问题是,你必须减少三角形,分别是顶点。网格的顶点以这种方式分布,其结果offsetPosition.xz / 10.0
是整数坐标(无分数分量)。perlin 噪声是周期长度为 1.0 的周期函数。所以对于所有的积分坐标,结果都是一样的。
改成
offsetPosition.y = perlin_noise(offsetPosition.xz / 100.0) * 10.0;
你会得到不同的顶点高度。
一般来说,该算法工作正常。请参阅我使用 100x100 网格和 100x100 瓷砖的示例。因此offsetPosition.xz / 10.0
以第十步生成坐标:
(function onLoad() {
var camera, scene, renderer, orbitControls;
init();
animate();
function init() {
let canvas = document.createElement( 'canvas' );
let context = canvas.getContext( 'webgl2', { alpha: false } );
renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context, antialias: true, alpha: true } );
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(0, 10, -40);
scene = new THREE.Scene();
scene.background = new THREE.Color(0);
scene.add(camera);
window.onresize = resize;
orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
addGridHelper();
createModel();
}
function createModel() {
var uniforms = {
spacing : {type:'f', value: 0.0001}
};
var material = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
uniforms: uniforms,
vertexShader: document.getElementById('vertex-shader').textContent,
fragmentShader: document.getElementById('fragment-shader').textContent,
});
var geometry = new THREE.PlaneBufferGeometry( 100, 100, 100, 100);
geometry.rotateX(Math.PI/2.0);
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
function addGridHelper() {
var helper = new THREE.GridHelper(100, 100);
helper.material.opacity = 1.0;
helper.material.transparent = true;
scene.add(helper);
var axis = new THREE.AxesHelper(1000);
scene.add(axis);
}
function resize() {
var aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = aspect;
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame(animate);
orbitControls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
})();
<script type='x-shader/x-vertex' id='vertex-shader'>
#version 300 es
precision highp float;
vec2 rand2d (vec2 uv_0) {
return vec2(
fract(sin(dot(uv_0, vec2(9832., -8933.2))) * 1938.4), fract(cos(dot(uv_0, vec2(-5294.2, 1243.2))) * 9043.)) * 2. - 1.;
}
float perlin_noise (vec2 uv_1) {
vec2 v00 = floor(uv_1);
vec2 v10 = v00 + vec2(1., 0.), v01 = v00 + vec2(0., 1.), v11 = v00 + vec2(1., 1.);
vec2 vxy = fract(uv_1);
float i00 = dot(rand2d(v00), vxy), i01 = dot(rand2d(v01), vxy - vec2(0., 1.)), i10 = dot(rand2d(v10), vxy - vec2(1., 0.)), i11 = dot(rand2d(v11), vxy - vec2(1., 1.));
vec2 s = smoothstep(0.0, 1.0, vxy);
return mix(mix(i00, i10, s.x), mix(i01, i11, s.x), s.y);
}
// supplied by me
uniform float spacing;
uniform vec2 offset;
uniform vec2 size;
out vec3 offsetPosition;
void main() {
offsetPosition = position + vec3(offset.x, 0, offset.y);
offsetPosition.y = perlin_noise(offsetPosition.xz / 10.0) * 10.0;
offsetPosition.z = floor(offsetPosition.z / spacing) * spacing;
gl_Position = projectionMatrix * modelViewMatrix * vec4(offsetPosition, 1.0);
}
</script>
<script type='x-shader/x-fragment' id='fragment-shader'>
#version 300 es
precision highp float;
vec2 rand2d (vec2 uv_0) {
return vec2(
fract(sin(dot(uv_0, vec2(9832., -8933.2))) * 1938.4), fract(cos(dot(uv_0, vec2(-5294.2, 1243.2))) * 9043.)) * 2. - 1.;
}
float perlin_noise (vec2 uv_1) {
vec2 v00 = floor(uv_1);
vec2 v10 = v00 + vec2(1., 0.), v01 = v00 + vec2(0., 1.), v11 = v00 + vec2(1., 1.);
vec2 vxy = fract(uv_1);
float i00 = dot(rand2d(v00), vxy), i01 = dot(rand2d(v01), vxy - vec2(0., 1.)), i10 = dot(rand2d(v10), vxy - vec2(1., 0.)), i11 = dot(rand2d(v11), vxy - vec2(1., 1.));
vec2 s = smoothstep(0.0, 1.0, vxy);
return mix(mix(i00, i10, s.x), mix(i01, i11, s.x), s.y);
}
in vec3 offsetPosition;
out highp vec4 fragColor;
void main() {
float value = perlin_noise(offsetPosition.xz / 10.0) * .5 + .5;
fragColor = vec4(value, offsetPosition.y * 0.05 + 0.5, 0., 1.);
}
</script>
<!--script src="https://threejs.org/build/three.min.js"></script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
推荐阅读
- owncloud - “邮件模板编辑器”(ownCloud)的邮件模板不读取创建的模板
- ruby-on-rails - 是什么让 sidekiq 工作人员产生错误甚至不可能的方法响应
- spring-boot - 使用参数在 WebLogic 上运行的 Spring Boot 应用程序
- go - 如何使用 https 和 socks4 代理
- linux - 从远程会话中运行 ssh-copy-id 失败
- go - libswscale bad dst 图像指针 cgo
- vue.js - 在饼图底部显示最大值 - highcharts
- sql - 每天在 SQL 中获取汇总结果
- node.js - 来自 GKE 的 PubSub:PERMISSION_DENIED
- c# - 该代码仅创建最后一个复选框,我应该做些什么不同或添加?