像獾示例中的 SceneKit 水 [英] SceneKit water like in Badger example

问题描述

大家是否知道如何像 Apple 的獾例子中那样制造水材料?

在scene.scn"中有一个geotherm_01"对象，这个对象有材质_1_terrasses_orange_water"和_1_terrasses_eau"，它们创建了看起来逼真的慢动画水.

我尝试在我的测试项目中重复相同的材料，但无法获得相同的结果.

解决方案

这种水的效果是使用

更具体地说，.surface 入口点是

float waterSpeed = u_time * -0.1;vec2 uvs = _surface.normalTexcoord;uvs.x *= 2;vec3 tn = texture2D(u_normalTexture, vec2(uvs.x, uvs.y + waterSpeed)).xyz;tn = tn * 2 - 1;vec3 tn2 = texture2D(u_normalTexture, vec2(uvs.x + 0.35, uvs.y + 0.35 + (waterSpeed * 1.3))).xyz;tn2 = tn2 * 2 - 1;vec3 rn= (tn + tn2) * 0.5;mat3 ts = mat3(_surface.tangent, _surface.bitangent, _surface.geometryNormal);_surface.normal = normalize(ts * rn);

这是代码的注释版本:

//经过的时间(以秒为单位)浮动水速 = u_time * -0.1;//将用于采样法线贴图的纹理坐标vec2 uvs = _surface.normalTexcoord;uvs.x *= 2;//采样法线贴图vec3 tn = texture2D(u_normalTexture, vec2(uvs.x, uvs.y + waterSpeed)).xyz;//纹理存储 [0, 1] 范围内的值//表示法向量在[-1,+1]范围内的坐标tn = tn * 2 - 1;//再次采样法线贴图，这次使用 `waterSpeed` 偏移量//为了产生动画效果vec3 tn2 = texture2D(u_normalTexture, vec2(uvs.x + 0.35 , uvs.y + 0.35 + (waterSpeed * 1.3))).xyz;tn2 = tn2 * 2 - 1;//组合两个法线(静态和动画)以产生更丰富(更复杂且更不均匀)的效果vec3 rn = (tn + tn2) * 0.5;//法线贴图中的法线以切线空间表示//将它们转换为对象空间并覆盖表面法线以模拟小波mat3 ts = mat3(_surface.tangent, _surface.bitangent, _surface.geometryNormal);_surface.normal = normalize(ts * rn);

Does enybody know how to create water material like in badger example from Apple?

There is a "geotherm_01" object in "scene.scn" and this object got materials "_1_terrasses_orange_water" and "_1_terrasses_eau" which creates water with slow animation that looks realistic.

I've tried to repeat same materials in my testing project but can't get the same result.

解决方案

This water effect was achieved using shader modifiers as shown in the SceneKit Scene Editor within Xcode. The most important material property is the normal map that will be used to affect lighting in order to simulate wavelets on a perfectly flat geometry.

More specifically the modifier for the .surface entry point is

float waterSpeed = u_time * -0.1;vec2 uvs = _surface.normalTexcoord;uvs.x *= 2;vec3 tn = texture2D(u_normalTexture, vec2(uvs.x, uvs.y + waterSpeed)).xyz;tn = tn * 2 - 1;vec3 tn2 = texture2D(u_normalTexture, vec2(uvs.x + 0.35 , uvs.y + 0.35 + (waterSpeed * 1.3))).xyz;tn2 = tn2 * 2 - 1;vec3 rn = (tn + tn2) * 0.5;mat3 ts = mat3(_surface.tangent, _surface.bitangent, _surface.geometryNormal);_surface.normal = normalize(ts * rn);

Here's a commented version of the code:

// Elapsed time in seconds
float waterSpeed = u_time * -0.1;

// Texture coordinates that will be used to sample the normal map
vec2 uvs = _surface.normalTexcoord;
uvs.x *= 2;

// Sample the normal map
vec3 tn = texture2D(u_normalTexture, vec2(uvs.x, uvs.y + waterSpeed)).xyz;

// The texture stores values in the [0, 1] range
// Express the coordinates of the normal vector in the [-1, +1] range
tn = tn * 2 - 1;

// Sample the normal map again, using the `waterSpeed` offset this time
// in order to produce the animation effect
vec3 tn2 = texture2D(u_normalTexture, vec2(uvs.x + 0.35 , uvs.y + 0.35 + (waterSpeed * 1.3))).xyz;
tn2 = tn2 * 2 - 1;

// Combine the two normals (static and animated) to produce a richer (more complex and less uniform) effect
vec3 rn = (tn + tn2) * 0.5;

// Normals in the normal map are expressed in tangent space
// Convert them to object space and override the surface normal to simulate wavelets
mat3 ts = mat3(_surface.tangent, _surface.bitangent, _surface.geometryNormal);
_surface.normal = normalize(ts * rn);

这篇关于像獾示例中的 SceneKit 水的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！