Question

我建立了锥形的3D模型。目前我做的很轻。

没有光线
带灯

黄点 - 太阳
粉红点 - 刻面的中心
白点 - 法线的结尾

var light = new BABYLON.Vector3(120, 100, 0);
...
var currentFace = mesh.Facets[indexFaces];
var pixelA = this.project(currentFace.A, transformMatrix);
var pixelB = this.project(currentFace.B, transformMatrix);
var pixelC = this.project(currentFace.C, transformMatrix);
var normal1 = BABYLON.Vector3.Cross(pixelA, pixelB);
var normal2 = BABYLON.Vector3.Cross(pixelB, pixelC);
var normal3 = BABYLON.Vector3.Cross(pixelC, pixelA);
var center = pixelA.add(pixelB).add(pixelC).scale(1 / 3);
var normal = normal1.add(normal2).add(normal3).scale(1 / 3);
var end = center.add(normal.scale(5));
...
var lightDirection = light.subtract(center);
normal.normalize();
lightDirection.normalize();
var ndotl Math.max(0, BABYLON.Vector3.Dot(normal, lightDirection));

我做错了什么？
谢谢你提前！
附：对于基地，我采用了这个tutorial。

UPDATE-1

我重写了我的渲染方法，现在它工作得更好，然后才开始：

    Device.prototype.render = function (cfg, mesh) {
        var self = this,
            normals = [], normal, center, end, color, ndotl, light = cfg.light.clone(),
            pixelA, pixelB, pixelC, pixelWorldA, pixelWorldB, pixelWorldC, normalA, normalB, normalC,
            viewMatrix, projectionMatrix, worldMatrix, worldViewTransformation, transformMatrix;
        viewMatrix = BABYLON.Matrix.LookAtLH(cfg.camera.position, cfg.camera.target, BABYLON.Vector3.Up());
        projectionMatrix = BABYLON.Matrix.PerspectiveFovLH(
            cfg.perspective.fov / 180,
            cfg.perspective.aspect,
            cfg.perspective.znear,
            cfg.perspective.zfar,
            cfg.perspective.distance);
        worldMatrix = BABYLON.Matrix.RotationYawPitchRoll(
            cfg.rotation.y / 180,
            cfg.rotation.x / 180,
            cfg.rotation.z / 180).multiply(BABYLON.Matrix.Translation(
                cfg.translation.x,
                cfg.translation.y,
                cfg.translation.z));
        worldViewTransformation = worldMatrix.multiply(viewMatrix);
        transformMatrix = worldViewTransformation.multiply(projectionMatrix);
        mesh.facets.forEach(function (facet) {
            pixelA = self.project(facet.a, transformMatrix);
            pixelB = self.project(facet.b, transformMatrix);
            pixelC = self.project(facet.c, transformMatrix);
            pixelWorldA = BABYLON.Vector3.TransformCoordinates(facet.a, worldViewTransformation);
            pixelWorldB = BABYLON.Vector3.TransformCoordinates(facet.b, worldViewTransformation);
            pixelWorldC = BABYLON.Vector3.TransformCoordinates(facet.c, worldViewTransformation);
            normalA = BABYLON.Vector3.Cross(pixelWorldA, pixelWorldB);
            normalB = BABYLON.Vector3.Cross(pixelWorldB, pixelWorldC);
            normalC = BABYLON.Vector3.Cross(pixelWorldC, pixelWorldA);
            center = pixelA.add(pixelB).add(pixelC).scale(1 / 3);
            normal = normalA.add(normalB).add(normalC).scale(1 / 3);
            end = center.add(normal.scale(20000));
            normals.push({start: center, end: end});
            ndotl = self.computeNDotL(center, normal, light);
            color = new BABYLON.Color4(ndotl * facet.color.r, ndotl * facet.color.g, ndotl * facet.color.b, ndotl * facet.color.a);
            self.drawTriangle(pixelA, pixelB, pixelC, color);
        });
        self.present();
        self.workingContext.fillStyle = "yellow";
        self.workingContext.fillRect(light.x - 10, light.y - 10, 20, 20);
        self.workingContext.strokeStyle = "#ffffff";
        normals.forEach(function (p) {
            var p1 = p.start;
            var p2 = p.end;
            self.workingContext.beginPath();
            self.workingContext.moveTo(p1.x, p1.y);
            self.workingContext.lineTo(p2.x, p2.y);
            self.workingContext.stroke();
            self.workingContext.fillStyle = "#ffffff";
            self.workingContext.fillRect(p1.x - 2, p1.y - 2, 5, 5);
            self.workingContext.fillStyle = "#ff00ff";
            self.workingContext.fillRect(p2.x - 2, p2.y - 2, 5, 5);
        });
    };

在此代码中，我添加了worldview Matrix。我目前的结果：

你说，要隐藏锥形区域内的红色区域，我可以使用z-buffer。但是......怎么样？

Answer 1

@Spektre，

你也在渲染中使用ndot ilumination intensity吗？

是的，我这样做：

var c = new BABYLON.Color4(ndotl * currentFace.Color.r, ndotl * currentFace.Color.g, ndotl * currentFace.Color.b, 1.0);
this.drawTriangle(pixelA, pixelB, pixelC, c);

刚添加减号。

没有受到影响

如果我更改了我的代码，那么请点亮，但它无法正常工作

for (var indexFaces = 0; indexFaces < mesh.Facets.length; indexFaces++) {
    var currentFace = mesh.Facets[indexFaces];
    var pixelA = this.project(currentFace.A, transformMatrix);
    var pixelB = this.project(currentFace.B, transformMatrix);
    var pixelC = this.project(currentFace.C, transformMatrix);
    var normal1 = BABYLON.Vector3.Cross(currentFace.A, currentFace.B);
    var normal2 = BABYLON.Vector3.Cross(currentFace.B, currentFace.C);
    var normal3 = BABYLON.Vector3.Cross(currentFace.C, currentFace.A);
    normal1 = BABYLON.Vector3.TransformCoordinates(normal1, worldMatrix);
    normal2 = BABYLON.Vector3.TransformCoordinates(normal2, worldMatrix);
    normal3 = BABYLON.Vector3.TransformCoordinates(normal3, worldMatrix);
    var center = pixelA.add(pixelB).add(pixelC).scale(1 / 3);
    var normal = normal1.add(normal2).add(normal3).scale(1 / 3);
    var end = center.add(normal.scale(10000));
    centers.push({p1: center, p2: end});
    var ndotl = this.computeNDotL(center, normal, cfg.light);
    var c = new BABYLON.Color4(ndotl * currentFace.Color.r, ndotl * currentFace.Color.g, ndotl * currentFace.Color.b, 1.0);
    //console.log("center:"+center+", angle: " + (ndotl * 180) + ", cos: " + ndotl + ", type: " + currentFace.Type + ", color:" + c);
    this.drawTriangle(pixelA, pixelB, pixelC, c);
}

要计算法线，我必须使用原始模型的点（在应用变换之前）或之后（在我的情况下，这个点：pixelA，pixelB，pixelC）？

如何计算打开的亮度？

1 个答案: