相关疑难解决方法(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万
查看次数

GLSL矩阵/逆乘法精度

我正在尝试使用GPU进行布料模拟,我遇到了一些不同硬件的问题.我使用threejs作为框架,但我认为这与我遇到的问题无关.

基本上我做的是上传一个矩阵和该矩阵的逆矩阵,以便将点从局部坐标转换为世界,在世界坐标中进行一些数学运算(如碰撞检测),然后将它们转换回本地.当我使用浮点纹理时,这在我的笔记本电脑上工作得很好,但是我在手机上注意到有一些奇怪的文物:

正确: IMG

不正确的: IMG

在做了一些调试后,我把它缩小到两个问题.它们都与小数精度有关.由于约束(以及约束期间的精度问题)导致的顶点折叠以及使用矩阵乘法和逆时的精度损失.

我认为这个问题与精度有关的原因是因为如果我使用浮点纹理它可以在我的计算机上工作,但如果我使用半浮点数我会遇到同样的问题.我的手机支持浮点纹理,这也是我为什么会在手机上发生这种情况的原因之一.我把问题缩小了,所以所有的布料模拟都被禁用了,如果我在我的计算机上运行半浮动纹理的应用程序,没有任何重力但是转换并反转平面类型的闪烁以奇怪的方式

如果转换和反转被禁用,那么它看起来很正常.

我不知道如何处理这个问题,或者我是否正走在正确的道路上.我相信半浮点纹理具有有限的小数精度,但我不明白为什么这会导致我的问题,因为它应该只影响着色器的输出,而不是着色器中的数学运算.

着色器的代码如下所示:

    '   vec2 cellSize  = 1.0 / res;',
    '   vec4 pos = texture2D(vertexPositions, vuv.xy );',


    '   vec2 newUV;',
    '   if(type == 0.0){',
        '   float px = floor(vuv.x * res.x );',
        '   float spacingx = px- (2.0 * floor(px/2.0));',
        '   float py = floor(vuv.y * res.y );',
        '   float spacingy = py- (2.0 * floor(py/2.0));',
        '   float total = spacingx + spacingy;',
        '   total = total- (2.0 * floor(total/2.0));',

        '   if(total == 0.0){', …
Run Code Online (Sandbox Code Playgroud)

glsl matrix webgl three.js

8
推荐指数
1
解决办法
411
查看次数

立方体内球体的光线追踪

我正在尝试对立方体内的球体进行光线追踪。立方体由 12 个具有法线的三角形简单构成。

立方体具有单位坐标和单位法线。因此,在其局部空间内(-1 和 1 之间),应该有一个半径为 0.5 的球体。

所以我想我应该在顶点着色器中计算光线:光线原点是插值顶点位置,光线方向是顶点法线(或其相反方向,但我认为这并不重要)。剩下的应该由插值完成。

然后在片段着色器中,我应该计算光线球体交点,如果有的话,更改片段的颜色。

在立方体的正面和背面,结果似乎是正确的,但在左侧、右侧、顶部和底部,结果似乎来自错误的角度。我应该始终看到中间的球体,而那些侧面的情况并非如此。

有人可以告诉我我做错了什么吗?

这是着色器代码:

顶点着色器:

#version 400

layout(location = 0) in vec3 aPos;
layout(location = 1) in vec3 aNor;

uniform mat4 uProj;
uniform mat4 uView;
uniform mat4 uModel;

out vec3 vRayPos;
out vec3 vRayDir;

void main(void)
{
  gl_Position = uProj * uView * uModel * vec4(aPos, 1);
  vRayPos = aPos;
  vRayDir = inverse(mat3(uModel)) * aNor;
}
Run Code Online (Sandbox Code Playgroud)

片段着色器:

#version 400

in vec3 vRayPos;
in vec3 vRayDir;

out vec4 oFrag;

void main(void) …
Run Code Online (Sandbox Code Playgroud)

trace raytracing glsl

6
推荐指数
1
解决办法
952
查看次数

OpenGL 中的射线球相交

我正在尝试使用射线球相交在 OpenGL 中执行鼠标拾取。我在网上找了几个公式,最后一个是 Stack Exchange 上的一个用户推荐的:

射线球相交

根据我对这个答案的理解,我正在检查二次方程是否有正根。我真的不在乎交点在哪里发生,只要光线与球体相交。我的代码如下,但似乎不起作用。

bool Mesh::useObject(vec3 camera, vec3 direction) {

    // a = (xB-xA)²+(yB-yA)²+(zB-zA)²
    float a = ((direction.v[0] - camera.v[0])*(direction.v[0] - camera.v[0])
        + (direction.v[1] - camera.v[1])*(direction.v[1] - camera.v[1])
        + (direction.v[2] - camera.v[2])*(direction.v[2] - camera.v[2]));

    // b = 2*((xB-xA)(xA-xC)+(yB-yA)(yA-yC)+(zB-zA)(zA-zC))
    float b = 2 * ((direction.v[0] - camera.v[0])*(camera.v[0] - mOrigin.v[0])
        + (direction.v[1] - camera.v[1])*(camera.v[1] - mOrigin.v[1])
        + (direction.v[2] - camera.v[2])*(camera.v[2] - mOrigin.v[2]));

    // c = (xA-xC)²+(yA-yC)²+(zA-zC)²-r²
    float c = ((camera.v[0] - mOrigin.v[0])*(camera.v[0] - mOrigin.v[0])
        + (camera.v[1] - mOrigin.v[1])*(camera.v[1] …
Run Code Online (Sandbox Code Playgroud)

c++ opengl graphics geometry mouse-picking

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

稳健的线性插值

给定两个线段端点 A 和 B(在二维中),我想根据值 t 执行线性插值,即:

C = A + t(B-A)
Run Code Online (Sandbox Code Playgroud)

在理想世界中,A、B 和 C 应该共线。但是,我们在这里使用有限的浮点运算,所以会有小的偏差。为了解决其他操作的数值问题,我使用了最初由 Jonathan Shewchuk 创建的强大的自适应例程。特别是,Shewchuk 实现了一个方向函数orient2d,该函数使用自适应精度来精确测试三个点的方向。

我的问题是:是否有一个已知的程序如何使用浮点数学计算插值,以便它正好位于 A 和 B 之间的线上?在这里,我不太关心插值本身的准确性,而更关心由此产生的共线性。换句话说,只要满足共线性,C 稍微移动一点就可以了。

precision geometry

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

矩阵逆精度

我有一个大世界,大约5,000,000 x 1,000,000单位.相机可以靠近某个物体或足够远,以便看到整个世界.
我通过unprojecting(Z来自深度缓冲区)获得世界坐标中的鼠标位置.问题是它涉及矩阵逆.当使用大数字和小数字(例如,从原点平移并缩放以查看更多世界)时,计算变得不稳定.

试图看到这个逆矩阵的准确性,我看一下行列式.理想情况下,由于转换矩阵的性质,它永远不会为零.我知道,'det'一个小值本身并不意味着它,它可能是由于矩阵中的值很小.但它也可能是数字出错的标志.

我也知道我可以通过反转每个变换并乘以它们来计算逆.它提供更准确吗?

如何判断我的矩阵是否退化,是否存在数值问题?

opengl math matrix

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

移动一段距离后opengl对象振动

我有一个物体在地形上移动,第三人称相机跟随它,在我将它向不同方向移动一段距离后,它开始摇晃或振动,即使它没有移动并且相机围绕它旋转,这就是移动对象的代码

double& delta = engine.getDeltaTime();
GLfloat velocity = delta * movementSpeed;
glm::vec3 t(glm::vec3(0, 0, 1) * (velocity * 3.0f));
//translate the objet atri before rendering
matrix = glm::translate(matrix, t);
//get the forward vetor of the matrix
glm::vec3 f(matrix[2][0], matrix[2][1], matrix[2][2]);
f = glm::normalize(f);
f = f * (velocity * 3.0f);
f = -f;
camera.translate(f);
Run Code Online (Sandbox Code Playgroud)

相机旋转是

void Camera::rotate(GLfloat xoffset, GLfloat yoffset, glm::vec3& c, double& delta, GLboolean constrainpitch) {
    xoffset *= (delta * this->rotSpeed);
    yoffset *= (delta * this->rotSpeed);
    pitch += yoffset; …
Run Code Online (Sandbox Code Playgroud)

c++ android opengl-es

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

光线追踪球体反射bug

我正在尝试实现光线跟踪算法,我在计算球形物体的反射光线时遇到了一些麻烦.对于某些特定的光线,反射光线似乎只是通过并与跟踪光线共线.贝娄是我如何记录射线 - 球体交叉点:

bool Sphere::intersectLocal(const ray & r, isect & i) const {
    Vec3d P = r.getPosition();
    Vec3d D = r.getDirection();
    //D.normalize();
    double a = dot(D, D);
    double b = 2 * dot(P, D);
    double c = dot(P, P) - 1;
    double delta = b * b - 4 * a * c;
    if (delta < 0)
        return false;
    if (delta == 0) {
        double t = -b / 2 * a;
        Vec3d Q = P + t * D; …
Run Code Online (Sandbox Code Playgroud)

c++ opengl raytracing

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

定点数学比浮点数快吗?

多年前,在20世纪90年代早期,我构建了图形软件包,这些图形软件包基于定点算法优化计算,并使用牛顿近似方法对sqrt和log近似的cos,sin和缩放方程进行预先计算.这些先进技术似乎已成为图形和内置数学处理器的一部分.大约5年前,我参加了一个涉及一些旧技术的数值分析课程.我已经编写了近30年的编码,很少见到使用过的旧定点优化,即使在GPGPU应用程序中进行世界级粒子加速器实验之后也是如此.定点方法是否仍然适用于整个软件行业的任何地方,或者这些知识的用处现在已经永远消失了?

algorithm graphics numerical-methods

4
推荐指数
2
解决办法
4184
查看次数

是否可以从三次贝塞尔曲线方程中表达“t”变量?

我只想通过片段着色器绘制贝塞尔曲线以连接编辑器中的节点。我知道定义贝塞尔曲线的所有 4 个点。并且为每个像素调用片段着色器,所以我可以检查:如果 gl_Coord.x 的“t”在 0 和 1 之间,然后将 frag_color 设置为红色。我想避免着色器中效率低下的循环。我认为最好的方法是检查曲线上的点。但是如何为贝塞尔曲线做到这一点?

是否可以从三次贝塞尔方程表达“t”变量?

x = ((1-t)^3 * p0.x) + (3 * (1-t)^2 * t * p1.x) + (3 * (1 - t) * t^2 * p2.x) + (t^3 * p3.x);

t = ?
Run Code Online (Sandbox Code Playgroud)

网站 Wolfram Aplha 给我那个公式(在 GetBezierT 函数中)。但是公式给了我错误的“t”值,我有一半的抛物线而不是曲线:

#version 150
.....
layout (origin_upper_left, pixel_center_integer) in vec4 gl_FragCoord;
out vec4 frag_color;
.....
vec4 BackgroundColor = vec4(0.15, 0.15, 0.15, 1.0);
vec2 p0 = vec2(61.0f,87.0f);
vec2 p1 = vec2(181.0f, 39.0f);
vec2 p2 = …
Run Code Online (Sandbox Code Playgroud)

algorithm math glsl cubic-bezier

4
推荐指数
1
解决办法
1155
查看次数

计算机图形学中4x4矩阵的行列式是否有用?

在大多数的图形库我所看到的,有一些函数,返回从3×3和4×4矩阵的行列式,但我不知道,当你真正需要使用3D计算机图形的决定因素.

在3D图形编程中使用行列式的一些例子是什么?

3d graphics matrix determinants

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