小编ema*_*key的帖子

如何将gltf模型加载到Three.js?

我决定尝试使用gltf格式在Three.js中渲染模型,并且我使用这个转换器(http://cesiumjs.org/convertmodel.html)将模型从Collada转换为GlTF.它吐出一个*.gltf文件,但是在Three.js的例子中,它们传递一个*.json文件.如何加载*.gltf文件或如何获取要加载的正确文件集?谢谢

three.js gltf

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

删除cesium js中的Polyline

如何删除 cesiumjs 中的折线,

var p = this.viewer.entities.add({
    polyline: {
        material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.7,
            color: Cesium.Color.ORANGE.withAlpha(0.7)
        }),
        positions: Cesium.Cartesian3.fromDegreesArrayHeights(points),
        width: 15,
    }
});
Run Code Online (Sandbox Code Playgroud)

我使用了Entity.removeAll(),但它正在从铯容器中删除整个数据(包括模型等)。我只想删除折线。

cesiumjs

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

如何在PBR中实现金属工作流程?

Cook-Torrance BRDF以及Lambert BRDF上有很多材料.虚幻引擎4中的真实着色将霜冻运动转换为BPR,可以深入解释如何将它们实现为实时渲染.

他们省略的是两个BRDF的组合,以创建完整的着色模型.如果我理解正确,我们可以使用至少两个基本原则来做到这一点:镜面和金属工作流程.是对它们的比较.

我决定实施金属工作流程.所以我有以下参数来计算:

  • 反照率(RGB)
  • 粗糙度(浮法)
  • 金属(浮法)

对于镜面反射部分,我需要确定我的镜面反射颜色.

Mamoset说明了这一点

当使用metalness地图,绝缘表面 - 在metalness地图设定为0.0(黑色)像素 - 被分配一个固定的反射率值(线性:0.04的sRGB:0.22),并使用反射率的地图为漫反射值.对于金属表面 - 金属度贴图中设置为1.0(白色)的像素 - 镜面反射颜色和强度取自反照率贴图,漫反射器中的漫反射值设置为0(黑色).

因此,镜面反射颜色应通过以下方式计算:

vec3 specularColor = mix(vec3(0.04), material.albedo, material.metalness);
Run Code Online (Sandbox Code Playgroud)

随后,这可用于计算反射辐射.为了限制我的问题的扩展,我将在这里参考Brian Karis的实现,其中包括:

vec3 L_specular = specularIBL(specularColor, material.roughness, normal, view);
Run Code Online (Sandbox Code Playgroud)

对于漫射部分,我需要确定反照率.

如何工作在上面的相同引用中描述:

vec3 albedo = mix(material.albedo, vec3(0), material.metalness);
Run Code Online (Sandbox Code Playgroud)

现在,Lambert BRDF可用于计算来自某些入射辐照度E的漫射光照:

vec3 L_diffuse = f_lambert(albedo) * E;
Run Code Online (Sandbox Code Playgroud)

为了得到最终的光度,漫反射和镜面反射部分组合在一起:

vec3 L = kd * L_diffuse + ks * L_specular;
Run Code Online (Sandbox Code Playgroud)

我的问题是如何计算kdks

  1. Codinglabs建议将菲涅尔函数整合到半球上进行计算ks. …

opengl directx graphics rendering pbr

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

如何在Cesium中正确使用unitQuaternion czml属性

我使用Cesium的gltf分支,我想显示三维平面模型.为此,我创建了我加载并添加到dataSources的czmlDataSource.

问题是我无法弄清楚如何计算方向四元数以使平面与地面平行,在给定的纬度,lon,alt默认向北(然后影响它们的航向,最终俯仰和滚动).

这是我做的计算我的实际四元数,但3D模型没有正确定向(我不知道如何改变标题,俯仰,滚动):

    var geoPosition = new Cesium.Cartographic(Cesium.Math.toRadians(inputPosition.lon), Cesium.Math.toRadians(inputPosition.lat), inputPosition.alt);
    var cartesianPosition = Cesium.Ellipsoid.WGS84.cartographicToCartesian(geoPosition);

    var euler = [cartesianPosition.x, cartesianPosition.y, cartesianPosition.z];
    var qx = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_X, euler[0]);
    var qy = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Y, euler[1]);
    var qz = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, euler[2]);
    var qt = Cesium.Quaternion.multiply(qz, qy);
    var q = Cesium.Quaternion.multiply(qt, qx);
    Cesium.Quaternion.normalize(q, q);

var czmlSrc = [{
       "orientation": {
            "epoch": "2012-08-04T16:00:00Z",
            "interpolationAlgorithm": "LINEAR",
            "interpolationDegree": 1,
            "unitQuaternion": [0, q.x,q.y,q.z,q.w,
                            3600, q.x,q.y,q.z,q.w]
        }
   }];
Run Code Online (Sandbox Code Playgroud)

cesium czml

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

如何计算PBR中的镜面贡献?

我正在尝试在我们的项目中实现基于物理的渲染(PBR)(我们开始用于学术和学习目的的小型游戏引擎)并且我无法理解根据材料的金属和粗糙度计算镜面反射和漫反射贡献的正确方法是什么.

我们不使用任何第三方库/引擎进行渲染,一切都是用OpenGL 3.3手写的.

现在我有这个(我将把完整的代码放在下面):

// Calculate contribution based on metallicity
vec3 diffuseColor  = baseColor - baseColor * metallic;
vec3 specularColor = mix(vec3(0.00), baseColor, metallic);
Run Code Online (Sandbox Code Playgroud)

但我的印象是,镜面术语必须以某种方式依赖于粗糙度.我想把它改成这个:

vec3 specularColor = mix(vec3(0.00), baseColor, roughness);
Run Code Online (Sandbox Code Playgroud)

但同样,我不确定.做正确的方法是什么?是否有正确的方法,或者我应该使用'试错'方法,直到我得到满意的结果?

这是完整的GLSL代码:

// Calculates specular intensity according to the Cook - Torrance model
float CalcCookTorSpec(vec3 normal, vec3 lightDir, vec3 viewDir, float roughness, float F0)
{
    // Calculate intermediary values
    vec3 halfVector = normalize(lightDir + viewDir);
    float NdotL = max(dot(normal, lightDir), 0.0);
    float NdotH = max(dot(normal, halfVector), 0.0);
    float NdotV …
Run Code Online (Sandbox Code Playgroud)

opengl glsl game-engine specular pbr

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

WebGL中的最大纹理数量?

我知道WebGL中有8个纹理的限制.

我的问题是,全局限制是8,还是每个着色器/程序明智?

如果它是每个着色器/程序明智的限制,这是否意味着,一旦我将纹理加载到一个着色器的制服,我可以开始重用这些插槽用于其他着色器?说我用过TEXTURE0一种形状,我可以用TEXTURE0另一种形状吗?

webgl

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

如何将 Three.js 集成到 Cesium 中,反之亦然?

我在 Three.js 框架中渲染了一些 3D 对象(JSON 和 OBJ 模型)。现在我需要根据地理坐标将场景渲染到Cesium框架中。

以前有人尝试过这个吗?如果有人可以分享一些关于此的文章或示例应用程序(即集成 Cesium 和 Three.js),那将会很有帮助。

javascript three.js cesiumjs

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