我如何渲染Three.js中渲染地球的“氛围”？ [英] How can I render an 'atmosphere' over a rendering of the Earth in Three.js?
问题描述
如果您在这些技术的某些方面遇到问题，特别适用于三.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屋！
