相关疑难解决方法(0)

如何在Three.js中呈现地球渲染的"氛围"?

在过去的几天里,我一直试图让Three.js纹理化.我遇到的问题是我的浏览器阻止纹理加载,这是通过遵循这里的说明解决的.

无论如何,我正在为我的一个班级制作一个太空导航游戏,演示如何在太空中航行太空船.所以,我渲染了一堆行星,地球就是其中之一.我在下面列出了我的地球渲染图片.它看起来没问题,但我想做的是通过在地球周围添加"氛围"使其看起来更逼真.

我环顾四周,并且发现了一些看起来非常整洁的创意来处理发光,但我不认为它们适用于我的情况.

这里的代码将地球添加到我的场景中(这是我从Three.js教程获得的代码的修改版本):

    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);
    }
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

javascript html5 three.js

19
推荐指数
2
解决办法
1万
查看次数

计算平滑度为 100% 的平滑顶点法线的一般方法

我在网上看了很长时间,找不到这个问题的答案。为简单起见,让我们假设我需要完全平滑一组连接面的法线。我想找到一组向量之间的实际几何平分线,忽略重复的法线并保持三角形汤的准确性。基本上,它需要:

  • 使用三角形汤 - 无论是三个、4 个还是 4000 个三角形,法线仍然需要以几何正确的方式协同工作,而不会偏向于任意区域
  • 忽略重叠(平行)法线 - 如果我有一个立方体的边,它聚集在 3 个三角形中,或者一个三角形的两个边中的每一边都聚集在一个三角形中,最后一侧有 2 个(或更多)个三角形,或者一个有 100 万个三角形只有一侧的三角形,平分线不能改变

我似乎找到的最常见的法线平滑公式是,通过将法线向量相加并除以三来简单地平均它们;例子:

normalize((A + B + C) / 3);
Run Code Online (Sandbox Code Playgroud)

当然除以三是没有用的,这已经代表了人们提出的天真、自以为是的蛮力平均法的氛围;与此有关的问题还在于,即使是三角形汤和平行法线,它也会把时间弄得一团糟。

我似乎发现的另一个评论是保留初始“面”法线,因为它们来自生成它们的常见交叉乘法运算,因为这样它们(有点)相对于三角形的面积加权。在某些情况下,这可能是您想要做的事情,但是我需要纯平分线,因此面积不能影响公式,即使考虑到它,它仍然会被三角汤弄乱。

我看到了一个提到的方法,它说对相邻面之间的角度进行加权,但我似乎无法正确实施该公式 - 要么是那样,要么不是我想要的。然而,这对我来说很难说,因为我找不到一个简洁的解释,而且我的头脑因所有这些浪费的头脑风暴而变得麻木。

有人知道通用公式吗?如果有任何帮助,我正在使用 C++ 和 DirectX11。


编辑:这里有一些类似的问题,描述了一些方法;

还有这篇文章:http : //www.bytehazard.com/articles/vertnorm.html

不幸的是,我尝试的实现不起作用,我找不到关于哪个公式实际上是我需要的一个清晰、简洁的声明。经过反复试验,我终于发现按角度加权是正确的方法,只是我无法正确实现它;因为它现在似乎正在工作,所以我将在下面添加我的实现作为答案。

algorithm 3d vertices normals

9
推荐指数
1
解决办法
7853
查看次数

了解OpenGL中的光照

我正在尝试使用Haskell/GLUT从一堆三角形中创建一个3D球体.它工作得非常好:绿色的是"我的"球体,红色的是用GLUT的renderObject Sphere完成的.当我移动相机时,我可以看到"我的"球体真的是3D,所以这很好.

那么为什么GLUT有一个很好的照明,我的没有?(我是一个新手,并不知道我在initGL中正在做什么,从Hackage的长方体包复制那些东西...)

漂亮而且不那么漂亮的球体

这是代码:

module Main where

import Graphics.UI.GLUT 

main :: IO ()
main = do
  initGL
  displayCallback $= render
  mainLoop

initGL :: IO ()
initGL = do
    getArgsAndInitialize
    initialDisplayMode $= [DoubleBuffered]
    createWindow "Chip!"
    initialDisplayMode $= [ WithDepthBuffer ]
    depthFunc          $= Just Less
    clearColor         $= Color4 0 0 0 0
    light (Light 0)    $= Enabled
    lighting           $= Enabled 
    lightModelAmbient  $= Color4 0.5 0.5 0.5 1 
    diffuse (Light 0)  $= Color4 1 1 1 1
    blend              $= Enabled
    blendFunc          $= (SrcAlpha, …
Run Code Online (Sandbox Code Playgroud)

opengl glut haskell

5
推荐指数
1
解决办法
520
查看次数

标签 统计

3d ×1

algorithm ×1

glut ×1

haskell ×1

html5 ×1

javascript ×1

normals ×1

opengl ×1

three.js ×1

vertices ×1