荐：使用NSDT 编辑器快速搭建3D应用场景

建 模 和 3D 地形

大多数 3D 对象是 使用建模工具创建，这是有充分理由的。创建复杂对象 （如飞机甚至建筑物）很难在代码中完成。建模工具 几乎总是有意义的，但也有例外！其中之一可能是案例 就像飞行拱廊岛连绵起伏的丘陵一样。我们最终使用了 我们发现更简单，甚至可能更直观的技术：一个 高度图。

高度图是一种 使用常规二维图像来描述 像岛屿或其他地形一样的表面。这是一种非常常见的使用方式 高程数据，不仅在游戏中，而且在地理信息系统中 制图师和地质学家使用的 （GIS）。

帮助您获得想法 有关其工作原理，请查看此交互式演示中的高度图。尝试绘图 ，然后检出生成的地形。

高度图背后的概念 很简单。在上图所示的图像中，纯黑色是 “地板”和纯白色是最高峰。介于两者之间的灰度颜色 表示相应的高程。这为我们提供了 256 个海拔高度，这 是我们游戏的大量细节。实际应用程序可能会使用完整的 色谱可存储更多层次的细节（2564 = 4，294，967，296 级 详细信息（如果包含 Alpha 通道）。

高度图有几个 与传统多边形网格相比的优势：

一、高度图很多 更紧凑。仅存储最重要的数据（高程）。它 需要以编程方式转换为 3D 对象，但这是 经典交易：您现在节省空间，稍后通过计算付款。通过存储 数据即图像，您将获得另一个空间优势：您可以利用标准 图像压缩技术并使数据变小（相比之下）！

其次，高度图是一个 生成、可视化和编辑地形的便捷方式。非常直观 当你看到一个。感觉有点像看地图。这被证明是 对飞行街机特别有用。我们设计和编辑了我们的岛屿 在 Photoshop 中！这使得根据需要进行小调整变得非常简单。 例如，当我们想确保跑道完全平坦时， 我们只是确保以单一颜色在该区域上绘画。

您可以看到高度图 下面的飞行拱廊。看看你是否能发现我们为 跑道和村庄。

飞行街机岛的高度图。它是在Photoshop中创建的，它基于着名的太平洋岛链中的“大岛”。有什么猜测吗？

在解码高度贴图后映射到生成的 3D 网格上的纹理。更多内容见下文。

解码高度图

我们用Babylon.js建造了飞行拱廊，Babylon给了我们一个漂亮的 从高度图到 3D 的简单路径。Babylon提供了一个 API 来生成 来自高度图图像的网格几何体：

ar ground = BABYLON.Mesh.CreateGroundFromHeightMap(

'your-mesh-name',

'/path/to/heightmap.png',

100, // width of the ground mesh (x axis)
100, // depth of the ground mesh (z axis)

40, // number of subdivisions

0, // min height

50, // max height

scene,

false, // updateable?

null // callback when mesh is ready
);`

细节量是 由该细分的财产决定。需要注意的是， 参数是指高度图两侧的细分数量 图像，而不是单元格总数。所以稍微增加这个数字可以 对网格中的顶点总数有很大影响。

• 20 个细分 = 400 细胞
• 50 个细分 = 2，500 细胞
• 100 个细分 = 10，000 细胞
• 500 个细分 = 250，000 细胞
• 1，000 个细分 = 1，000，000 细胞

在下一节中，我们将 了解如何为地面设置纹理，但在尝试使用高度贴图时 创建时，查看线框很有用。这是应用简单代码 线框纹理，因此很容易看到高度图数据是如何转换为的 网格的顶点：

// simple wireframe material

var material = new BABYLON.StandardMaterial('ground-material', scene);

material.wireframe = true;

ground.material = material;`

创建纹理细节

一旦我们有一个模型，映射一个 质地相对简单。对于飞行街机，我们简单地创建了一个 非常大的图像，与我们的高度图中的岛屿相匹配。图像得到 延伸到地形的轮廓上，所以纹理和高度图 保持相关性。这真的很容易想象，再一次，所有 制作工作是在Photoshop中完成的。

原始纹理图像是 创建于 4096x4096。那可是挺大的！（我们最终将尺寸减小了 为了保持下载合理，级别到2048x2048，但所有 使用全尺寸图像进行开发。这是来自 原始纹理。

原始岛屿纹理的全像素示例。整个城镇只有大约300平方像素。

这些矩形表示 岛上城镇的建筑。我们很快注意到 我们可以在地形和 其他 3D 模型。即使使用我们巨大的岛屿纹理，区别在于 令人分心的明显！

为了解决这个问题，我们“混合” 以随机噪声的形式进入地形纹理的附加细节。您可以 请参阅下面的之前和之后。注意额外的噪点如何增强外观 地形细节。

我们创建了一个自定义着色器 添加噪音。着色器为您提供了对 WebGL 3D 场景的渲染，这是着色器如何 有用。

WebGL着色器由两个组成 主要部分：顶点和片段着色器。顶点的主要目标 着色器是将顶点映射到渲染帧中的某个位置。片段（或 像素）着色器控制像素的结果颜色。

着色器是用 称为GLSL（图形库着色器语言）的高级语言，它 类似于C。此代码在 GPU 上执行。深入了解如何 着色器工作，请参阅此处 有关如何为 Babylon.js 创建自己的自定义着色器的教程，或参阅此图形着色器编码初学者指南。

顶点着色器

我们不会改变我们的 纹理映射到地面网格体，因此我们的顶点着色器非常简单。 它只是计算标准映射并分配目标位置。

precision mediump float;
// Attributes
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
// Uniforms
uniform mat4 worldViewProjection;
// Varying
varying vec4 vPosition;
varying vec3 vNormal;
varying vec2 vUV;
void main() {
vec4 p = vec4( position, 1.0 );
vPosition = p;
vNormal = normal;
vUV = uv;
gl_Position = worldViewProjection * p;
}

碎片着色器

我们的片段着色器有点 更复杂。它结合了两个不同的图像：基础图像和混合图像。 基础图像映射到整个地面网格。在飞行街机中，这个 是岛屿的彩色图像。混合图像是使用的小噪点图像 在近距离为地面提供一些纹理和细节。着色器 组合每个图像中的值以创建跨 岛。

飞行的最后一课 街机发生在有雾的日子，所以我们的像素着色器的另一个任务是 调整颜色以模拟雾。调整基于顶点的距离 来自相机，远处像素被“遮挡”得更厉害 在雾中。您将在函数中看到此距离计算 在主着色器代码上方。calcFogFactor

// #ifdef GL_ES
precision highp float;
// #endif
uniform mat4 worldView;
varying vec4 vPosition;
varying vec3 vNormal;
varying vec2 vUV;
// Refs
uniform sampler2D baseSampler;
uniform sampler2D blendSampler;
uniform float blendScaleU;
uniform float blendScaleV;
// #define FOGMODE_NONE 0.
// #define FOGMODE_EXP 1.
// #define FOGMODE_EXP2 2.
// #define FOGMODE_LINEAR 3.
// #define E 2.71828
uniform vec4 vFogInfos;
uniform vec3 vFogColor;
float calcFogFactor() {
// gets distance from camera to vertex
float fogDistance = gl_FragCoord.z / gl_FragCoord.w;
float fogCoeff = 1.0;
float fogStart = vFogInfos.y;
float fogEnd = vFogInfos.z;
float fogDensity = vFogInfos.w;
if (FOGMODE_LINEAR == vFogInfos.x) {
fogCoeff = (fogEnd - fogDistance) / (fogEnd - fogStart);
}
else if (FOGMODE_EXP == vFogInfos.x) {
fogCoeff = 1.0 / pow(E, fogDistance * fogDensity);
}
else if (FOGMODE_EXP2 == vFogInfos.x) {
fogCoeff = 1.0 / pow(E, fogDistance * fogDistance * fogDensity * fogDensity);
}
return clamp(fogCoeff, 0.0, 1.0);
}
void main(void) {
vec4 baseColor = texture2D(baseSampler, vUV);
vec2 blendUV = vec2(vUV.x * blendScaleU, vUV.y * blendScaleV);
vec4 blendColor = texture2D(blendSampler, blendUV);
// multiply type blending mode
vec4 color = baseColor * blendColor;
// factor in fog color
float fog = calcFogFactor();
color.rgb = fog * color.rgb + (1.0 - fog) * vFogColor;
gl_FragColor = color;
}

我们定制的最后一件作品 Blend shader 是 Babylon 使用的 JavaScript 代码。主要目的 此代码用于准备传递给顶点和像素着色器的参数。

function BlendMaterial(name, scene, options) {
this.name = name;
this.id = name;
this.options = options;
this.blendScaleU = options.blendScaleU || 1;
this.blendScaleV = options.blendScaleV || 1;
this._scene = scene;
scene.materials.push(this);
var assets = options.assetManager;
var textureTask = assets.addTextureTask('blend-material-base-task', options.baseImage);
textureTask.onSuccess = _.bind(function(task) {

    this.baseTexture = task.texture;
    this.baseTexture.uScale = 1;
    this.baseTexture.vScale = 1;
    if (options.baseHasAlpha) {
        this.baseTexture.hasAlpha = true;
    }
}, this);
textureTask = assets.addTextureTask('blend-material-blend-task', options.blendImage);
textureTask.onSuccess = _.bind(function(task) {
    this.blendTexture = task.texture;
    this.blendTexture.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
    this.blendTexture.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
}, this);

}
BlendMaterial.prototype = Object.create(BABYLON.Material.prototype);
BlendMaterial.prototype.needAlphaBlending = function () {
return (this.options.baseHasAlpha === true);
};
BlendMaterial.prototype.needAlphaTesting = function () {
return false;
};
BlendMaterial.prototype.isReady = function (mesh) {
var engine = this._scene.getEngine();
// make sure textures are ready
if (!this.baseTexture || !this.blendTexture) {
return false;
}
if (!this._effect) {
this._effect = engine.createEffect(
// shader name
"blend",
// attributes describing topology of vertices
[ "position", "normal", "uv" ],
// uniforms (external variables) defined by the shaders
[ "worldViewProjection", "world", "blendScaleU", "blendScaleV", "vFogInfos", "vFogColor" ],
// samplers (objects used to read textures)
[ "baseSampler", "blendSampler" ],
// optional define string
"");
}
if (!this._effect.isReady()) {
return false;
}
return true;
};
BlendMaterial.prototype.bind = function (world, mesh) {
var scene = this._scene;
this._effect.setFloat4("vFogInfos", scene.fogMode, scene.fogStart, scene.fogEnd, scene.fogDensity);
this._effect.setColor3("vFogColor", scene.fogColor);
this._effect.setMatrix("world", world);
this._effect.setMatrix("worldViewProjection", world.multiply(scene.getTransformMatrix()));
// Textures
this._effect.setTexture("baseSampler", this.baseTexture);
this._effect.setTexture("blendSampler", this.blendTexture);
this._effect.setFloat("blendScaleU", this.blendScaleU);
this._effect.setFloat("blendScaleV", this.blendScaleV);
};
BlendMaterial.prototype.dispose = function () {
if (this.baseTexture) {
this.baseTexture.dispose();
}
if (this.blendTexture) {
this.blendTexture.dispose();
}
this.baseDispose();
};

Babylon.js使它变得容易 创建基于着色器的自定义材质。我们的混合材料相对简单， 但它确实对岛屿的外观产生了很大的影响，当 飞机低空飞到地面。着色器将 GPU 的强大功能带到 浏览器，扩展可应用于 3D 的创意效果类型 场景。在我们的案例中，这是画龙点名！

原文链接：使用 WebGL 为 HTML5 游戏创建逼真的地形

/xia仔のke：chaoxingit.com/196/

入门WebGL与Three.js：从理论到实战

引言

在当今互联网的时代，3D 技术的应用已经越来越普遍，无论是在游戏开发、虚拟现实、还是在线可视化等领域，都有着广泛的应用。在Web开发领域，通过 WebGL 和 Three.js 技术，我们可以轻松地在网页上展现出引人入胜的 3D 图形和交互效果。本文将介绍如何入门 WebGL 与 Three.js，并通过实战示例带你系统学习 Web3D 技术。

第一部分：理论基础

1. 什么是WebGL？

WebGL（Web Graphics Library）是一种用于在浏览器中呈现交互式 3D 和 2D 图形的技术，它基于 OpenGL ES 标准，并与 HTML5 兼容。通过 WebGL，开发者可以利用浏览器的图形处理能力来创建各种各样的视觉效果。

2. 什么是Three.js？

Three.js 是一个开源的 JavaScript 库，它封装了 WebGL，简化了在浏览器中创建 3D 图形的过程。Three.js 提供了一系列易于使用的API，使开发者可以轻松地创建和控制各种 3D 场景、模型、动画等。

第二部分：实践操作

1. 设置环境

首先，我们需要设置开发环境。创建一个 HTML 文件，并引入 Three.js 库：

html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebGL + Three.js</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 在这里编写 Three.js 代码
    </script>
</body>
</html>

2. 创建一个简单的场景

接下来，我们将创建一个简单的 3D 场景，并在其中添加一个立方体：

html<script>
    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建立方体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 渲染场景
    function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    }
    animate();
</script>

第三部分：进阶应用

1. 加载模型

Three.js 还支持加载外部的 3D 模型文件，如 OBJ、FBX、GLTF 等格式。通过加载模型，我们可以在场景中展示更加复杂的物体。

html<script>
    const loader = new THREE.GLTFLoader();
    loader.load('model.glb', function (gltf) {
        scene.add(gltf.scene);
    });
</script>

2. 添加光照

为了使场景中的物体更加逼真，我们可以添加光源。Three.js 支持多种光源类型，包括环境光、点光源、平行光等。

html<script>
    // 添加环境光
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);

    // 添加点光源
    const pointLight = new THREE.PointLight(0xffffff, 1);
    pointLight.position.set(5, 5, 5);
    scene.add(pointLight);
</script>

结论

通过本文的介绍，你应该已经对 WebGL 与 Three.js 有了基本的了解，并且能够通过实践操作来创建简单的 3D 场景和模型。Web3D 技术的应用范围非常广泛，未来你可以利用这些知识来开发各种有趣的 Web3D 应用，如游戏、虚拟现实体验、产品展示等。

/xia仔のke：itzcw.com/8968/

WebGL与Three.js入门

WebGL（Web Graphics Library）是一种JavaScript API，它基于OpenGL ES标准，允许开发者在浏览器中创建和渲染3D图形。WebGL与HTML5 Canvas元素紧密结合，使得开发者可以使用JavaScript代码直接与GPU通信，从而实现高性能的3D渲染。

Three.js是一个流行的JavaScript库，它建立在WebGL之上，提供了一个简洁的API，使得开发者更容易地创建和管理3D场景、模型、动画等。Three.js简化了WebGL的使用，使得即使是没有WebGL经验的开发者也能快速上手开发3D应用。

实战项目

在学习WebGL和Three.js的过程中，实战项目是非常重要的一部分。通过实际的项目，你可以将所学的理论知识付诸实践，解决真实世界的问题。实战项目通常包括以下几个方面：

创建3D场景：设置相机、添加几何体、设置材质和光源等。

实现物体的旋转和移动：通过修改物体的位置和旋转角度来实现。

实现交互操作：例如通过鼠标或触摸屏控制物体的旋转和移动。

优化性能：包括减少重绘区域、使用缓冲区等手段优化性能。

发布应用：将应用打包发布到Web服务器上，供用户访问。

学习资源

目前网络上有很多关于WebGL和Three.js的学习资源。例如，有些课程会涵盖WebGL基础、Three.js入门、图形学基础、模型加载与处理、纹理与材质、光照与阴影、交互与动画、优化与性能调优等内容。这些课程可能还会提供一些实战项目，让学员应用所学知识，开发并部署具有实际应用场景的Web3D应用。

此外，还有一些书籍、在线教程、视频课程和社区论坛，如Bilibili、掘金等平台，也提供了大量的WebGL和Three.js学习资源，可以帮助你更快地上手和深入学习。

通过这些资源，你可以逐步提升自己的Web3D技术水平，并为开发各种类型的交互式3D应用奠定坚实的基础。

WebGL和Three.js在现代Web开发中的地位

WebGL和Three.js在现代Web开发中扮演着重要的角色，它们极大地推动了3D技术在网页上的应用和发展。WebGL作为底层的图形渲染API，为开发者提供了在浏览器中渲染三维图形的可能性。而Three.js作为一个建立在WebGL之上的JavaScript库，它简化了使用WebGL创建和展示三维图形的过程，使得开发者无需深入了解WebGL的复杂性，也能够轻松地在网页中集成3D内容。

对推动3D技术普及的作用

WebGL和Three.js的出现降低了3D技术在Web开发中的门槛，使得更多的开发者和设计师能够参与到3D内容的创作中来。Three.js提供的丰富功能，如加载并显示模型、应用各种材质和纹理、创建灯光和相机、执行动画等，都大大简化了3D开发的流程。这不仅促进了3D技术在商业领域的应用，如在线购物、在线教育、游戏等，而且还激发了创新，因为开发者可以用3D技术来解决更多样化的问题。

未来趋势

随着技术的发展，WebGL和Three.js将继续在Web开发中发挥重要作用。随着5G和物联网时代的到来，WebGL和Three.js的技术前景将进一步得到发展，预计会有更多的创新和应用出现。同时，随着WebGL支持的增强和浏览器功能的日益强大，WebGL和Three.js也将继续成为复杂应用和图形的主要平台。因此，WebGL和Three.js不仅是当前Web开发的重要组成部分，也是未来发展的关键技术之一。

在进行Web3D应用开发时，以下几个因素会对应用的性能和用户体验产生显著影响：

性能优化

性能优化是提高Web3D应用流畅度的关键。这包括但不限于以下几点：

JavaScript压缩和模块打包：减小文件大小，提高加载速度。

渲染性能优化：使用高效的渲染技术，快速加载和渲染大规模的3D模型数据。

数据压缩与传输：采用有效的数据压缩算法和传输优化技术，减少加载时间和网络带宽消耗。

浏览器兼容性

不同的浏览器对WebGL的支持程度可能会有所不同，确保应用在主流浏览器上都能正常运行，并进行充分的兼容性测试。

移动设备适配

移动设备上的WebGL性能可能有限，而且屏幕尺寸较小。确保应用在移动设备上能够正常运行，并提供良好的用户体验。

用户体验设计

为用户提供友好的界面和控制方式，确保用户能够轻松地与3D场景交互。考虑到不同用户的设备和技能水平，使界面易于理解和使用。

网络加载和优化

3D模型和纹理文件可能较大，因此需要考虑加载时间和带宽。使用适当的压缩技术、资源懒加载和CDN等手段来优化加载性能。

安全性考虑

处理用户上传的3D模型时需要谨慎，防止潜在的安全风险。确保应用在处理用户输入和上传时具有适当的安全性措施。

综上所述，性能优化、浏览器兼容性、移动设备适配、用户体验设计和网络加载优化是影响Web3D应用性能和用户体验的关键因素。在开发过程中，应特别注意这些方面的优化和适应性调整。

WebGL和Three.js在新兴技术领域的应用前景

WebGL和Three.js作为Web开发中的3D技术，已经在多个新兴技术领域展现出了巨大的潜力和应用前景。以下是几个关键点，展示了它们在未来可能扮演的角色：

增强现实（AR）和混合现实（MR）: WebGL和Three.js可以用来创建在现实世界中叠加虚拟元素的体验，这在增强现实游戏中尤其常见。通过在Web浏览器中渲染3D内容，用户可以直接在他们的物理环境中与数字对象互动，这种无缝集成的体验对于教育和娱乐领域尤为有价值。

虚拟现实（VR）: WebGL和Three.js也可以用于创建虚拟现实体验，让用户沉浸在一个完全由数字构成的环境中。这种技术可以用于游戏、电影、甚至是远程工作，提供了一个全新的维度来体验内容。

Web3技术融合: Web3技术，特别是区块链，正逐渐与虚拟现实技术融合。这种融合可能会导致去中心化的虚拟世界的诞生，其中用户可以拥有和交易虚拟资产，并在没有中介的情况下参与虚拟活动。WebGL和Three.js将是实现这些虚拟世界的重要技术基础。

教育和培训: 在教育领域，WebGL和Three.js可以提供一个更加直观和互动的学习环境。无论是医学解剖、地理信息系统还是复杂的科学概念，都可以通过3D模型和模拟来教授，提高学习效率和兴趣。

娱乐和社交: 在娱乐行业，WebGL和Three.js可以用来创建互动式的音乐视频、在线游戏和社交平台，让用户在虚拟空间中与他人互动，享受沉浸式的娱乐体验。

商业和零售: 商家可以使用WebGL和Three.js来创建虚拟的商店或产品展示厅，让顾客在不受地域限制的情况下探索和体验产品。这种新型的购物体验有望改变消费者的购买习惯。

文化和旅游: 文化机构可以使用WebGL和Three.js来创建虚拟博物馆或历史遗迹的复原，让公众在家中就能享受到实地参观的体验。旅游业也可能利用这些技术来提供虚拟旅游服务。

总的来说，WebGL和Three.js在新兴技术领域的前景看起来非常广阔，它们不仅能够推动3D技术的发展，还能够为用户提供更加丰富和沉浸式的体验。随着技术的进步和市场的需求，我们可以预见这些工具将在未来几年内继续发展和演变，以满足不断变化的市场需求