光模拟基础(2) 光源

    在基本光照模型基础上,今天探讨一下如何建立各种光源模型.

     (1)方向光(或称平行光)

    方向光可以看作太阳光,为什么会有白天黑夜呢,就是因为太阳只能照向地球的一个面( dir ),也即一个方向,而且即使地球绕太阳转动时距离会变化,太阳光也没有衰减(no pos, no attenuation 当然,这里是近似的).

    dirLight = emissive + ambient + diffuse + specular;

    可以发现,上一篇文章中给出的光照公式,就是方向光.

 

    (2)点光源

    你可以把点光源看成是家里的电灯,你可以发现,它是从某个位置(pos),向各个方向( no dir )发散,而且,越发散,光强越弱(attenuation),我已经把几个重要的概念用英文标注.在这里,灯光的位置会影响attenuation.那么最终的公式取为:

    pointLight = emissive + ambient + attenuationFactor * ( diffuse + specular );

    其中attenuationFactor是由顶点与光源位置的距离来确定的.

 

    (3)聚光灯

    探照灯就是这种光的代表,它由一个取舍角Thi的概念来控制聚光灯圆锥体的传播,你需要知道灯的位置,灯的方向,以及将要进行着色的点的位置,然后通过他们得到从聚光灯到点的向量V与光的方向D,这时候dot( D, V )求出角,只有当这个角小于取舍角Thi,点才被着色.

    为了更好模拟,我们还需要两个角a,b,Thi = a + b;而且0到a的范围表示热区,而a到a+b范围表示衰减区,在热区中,灯光强度不变,而在衰减区中,灯光会衰减(具体衰减策略可以自己定义),总之利用聚光灯,可以形成两个光区,非常漂亮.

 

    这里光源最基本的实现(要不然怎么叫基础...),使用shader,你可以自由的选择光的实现形式(数学..还是数学..),anyway,enjoy!!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这里给出一个使用 Three.js 实现的带有 Blinn-Phong 照模型和聚灯模式的多个立方体的代码示例: ```javascript // 初始化场景、相机、渲染器等 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 添加聚光源 var spotLight = new THREE.SpotLight(0xffffff, 1); spotLight.position.set(0, 100, 0); spotLight.angle = Math.PI / 4; spotLight.penumbra = 0.05; spotLight.decay = 2; spotLight.distance = 200; scene.add(spotLight); // 添加多个立方体 var cube1 = new THREE.Mesh( new THREE.BoxGeometry(1, 1, 1), new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('texture1.png') }) ); cube1.position.set(-2, 0, -5); scene.add(cube1); var cube2 = new THREE.Mesh( new THREE.BoxGeometry(1, 1, 1), new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('texture2.png') }) ); cube2.position.set(0, 0, -5); scene.add(cube2); var cube3 = new THREE.Mesh( new THREE.BoxGeometry(1, 1, 1), new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('texture3.png') }) ); cube3.position.set(2, 0, -5); scene.add(cube3); // 设置相机位置和控制器 camera.position.z = 5; var controls = new THREE.OrbitControls(camera, renderer.domElement); // 渲染循环 function render() { requestAnimationFrame(render); // 计算每个立方体的 Blinn-Phong 照 cube1.material.needsUpdate = true; cube2.material.needsUpdate = true; cube3.material.needsUpdate = true; spotLight.position.copy(camera.position); spotLight.lookAt(cube1.position); var distance = spotLight.position.distanceTo(cube1.position); var intensity = spotLight.intensity / (spotLight.decay * distance * distance); cube1.material.uniforms.lightPosition.value = spotLight.position; cube1.material.uniforms.lightColor.value = spotLight.color; cube1.material.uniforms.lightIntensity.value = intensity; cube1.material.uniforms.lightDistance.value = distance; cube1.material.uniforms.lightAngle.value = spotLight.angle; cube1.material.uniforms.lightPenumbra.value = spotLight.penumbra; cube1.material.uniforms.lightDecay.value = spotLight.decay; spotLight.lookAt(cube2.position); distance = spotLight.position.distanceTo(cube2.position); intensity = spotLight.intensity / (spotLight.decay * distance * distance); cube2.material.uniforms.lightPosition.value = spotLight.position; cube2.material.uniforms.lightColor.value = spotLight.color; cube2.material.uniforms.lightIntensity.value = intensity; cube2.material.uniforms.lightDistance.value = distance; cube2.material.uniforms.lightAngle.value = spotLight.angle; cube2.material.uniforms.lightPenumbra.value = spotLight.penumbra; cube2.material.uniforms.lightDecay.value = spotLight.decay; spotLight.lookAt(cube3.position); distance = spotLight.position.distanceTo(cube3.position); intensity = spotLight.intensity / (spotLight.decay * distance * distance); cube3.material.uniforms.lightPosition.value = spotLight.position; cube3.material.uniforms.lightColor.value = spotLight.color; cube3.material.uniforms.lightIntensity.value = intensity; cube3.material.uniforms.lightDistance.value = distance; cube3.material.uniforms.lightAngle.value = spotLight.angle; cube3.material.uniforms.lightPenumbra.value = spotLight.penumbra; cube3.material.uniforms.lightDecay.value = spotLight.decay; renderer.render(scene, camera); } render(); ``` 其中,纹理贴图的加载需要使用 `THREE.ImageUtils.loadTexture()` 方法,同时为了实现 Blinn-Phong 照模型,需要在材质中添加 uniform 变量,并在渲染循环中对每个立方体的材质进行更新。具体的实现细节可以参考代码中的注释。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值