如何在 Three.js 中渲染地球时渲染“气氛"? [英] How can I render an 'atmosphere' over a rendering of the Earth in Three.js?
问题描述
过去几天，我一直在努力让 Three.js 纹理工作.我一直遇到的问题是我的浏览器阻止加载纹理，这是按照说明解决的 看起来还不错，作者还跟了稍后会提供更详细的变体.如果您对更多技术分解感兴趣此技术详细说明很多理论背景.我敢肯定还有更多，你只需要四处看看.(说实话，我不知道这是一个如此受欢迎的渲染主题！)
如果您在这些技术的某些方面遇到问题，特别是适用于 Three.js，请不要犹豫，提出来！
[更新]
啊，对不起.是的，如果没有事先的着色器知识，这会让您陷入困境.
第二个链接上的代码实际上是一个 DirectX FX 文件，核心代码是 HLSL，所以它不是简单地插入 WebGL 的东西，但两种着色器格式非常相似，通常在它们之间转换不是问题.如果你真的了解着色器，那就是.在尝试深入研究这样的复杂效果之前，我建议先阅读着色器的工作原理.
我会从一些简单的东西开始，比如本教程，它只是简单地说关于如何使用 Three.js 运行基本着色器.一旦您知道如何使用 Three.js 和 GLSL 教程(如这个)让着色器工作，您将获得着色器如何工作的基础知识以及你可以用它做什么.
我知道这似乎需要很多前期工作，但是如果您想在 WebGL 中实现高级视觉效果(这当然符合高级效果清单)，您绝对必须了解着色器！
再说一次，如果您正在寻找快速解决方案，那么我一直在谈论透明球体选项.:)
For the past few days, I've been trying to get Three.js texturing to work. The problem I've been having is that my browser was blocking textures from loading, which was solved by following the instructions here.
Anyways, I'm making a space-navigator game for one of my classes that demonstrates navigating spacecraft through space. So, I'm rendering a bunch of planets, the Earth being one of them. I've included a picture of my Earth rendering below. It looks okay, but what I'm trying to do is make it look more realistic by adding an 'atmosphere' around the planet.
I've looked around, and I've found some really neat looking creations that deal with glow, but I don't think they apply to my situation, unfortunately.
And here's the code that adds the earth to my scene (it's a modified version of code I got from a Three.js tutorial):
function addEarth(x,y){
var sphereMaterial =
new THREE.MeshLambertMaterial({
//color: 0x0000ff,
map: earthTexture
});
// set up the sphere vars
var radius = 75;
segments = 16;
rings = 16;
// create a new mesh with
// sphere geometry - we will cover
// the sphereMaterial next!
earth = new THREE.Mesh(
new THREE.SphereGeometry(
radius,
segments,
rings),
sphereMaterial);
earth.position.x = x;
earth.position.y = y;
// add the sphere to the scene
scene.add(earth);
}
What exactly are you looking for in your atmosphere? It could be as simple as rendering another slightly larger transparent sphere over the top of your globe, or it could be very very complex, actually refracting light that enters it. (Almost like subsurface scattering used in skin rendering).
I've never tried such an effect myself, but some quick Googling shows some promising results. For example, I think this effect looks fairly nice, and the author even followed it up with a more detailed variant later on. If you're interested in a more technical breakdown this technique details a lot of the theoretical background. I'm sure there's more, you've just got to poke around a bit. (Truth be told I wasn't aware this was such a popular rendering topic!)
If you're having trouble with some aspect of those techniques specifically as applies to Three.js don't hesitate to ask!
[UPDATE]
Ah, sorry. Yeah, that's a bit much to throw you into without prior shader knowledge.
The code on the second link is actually a DirectX FX file, the core code being HLSL, so it's not something that would simply plug into WebGL but the two shader formats are similar enough that it's typically not an issue to translate between them. If you actually know shaders, that is. I would recommend reading up on how shaders work before trying to dive into a complicated effect like this.
I'd start with something simple like this tutorial, which simply talks about how to get a basic shader running with Three.js. Once you know how to get a shader working with Three.js and GLSL tutorials (like this one) will give you the basics of how a shader works and what you can do with it.
I know that seems like a lot of work up front, but if you want to do advanced visual effects in WebGL (and this certainly fits the bill of advanced effects) you absolutely must understand shaders!
Then again, if you're looking for a quick fix there's always that transparent sphere option I was talking about. :)
这篇关于如何在 Three.js 中渲染地球时渲染“气氛"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
