踏上Shader之路(三)Blinn-Phone光照模型

//Blinn-Phone光照模型
Shader "Unlit/Shader"
{
    Properties
    {
        _Diffuse("Diffuse",Color)=(1,1,1,1)
        _Specular("Specular",Color)=(1,1,1,1)
        _Gloss("Gloss",Range(8.0,256))=20
    }
    SubShader
    {
        Tags { "LightMode"="ForwardBase" }
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"
            #include "Lighting.cginc"

            //定义变量
            fixed4 _Diffuse;
            fixed4 _Specular;
            float _Gloss;

            struct a2v
            {
                float4 vertex : POSITION;
                float3 normal:NORMAL; 
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float3 worldNormal:TEXCOORD0;   
                float3 worldPos:TEXCOORD1;   
            };

            v2f vert (a2v v)
            {
                v2f o;
                o.pos =UnityObjectToClipPos(v.vertex); //把顶点位置从模型空间转换到裁剪空间中
                o.worldNormal = normalize(UnityObjectToWorldNormal(v.normal.xyz));//法线方向转换世界空间下
                o.worldPos=mul(unity_ObjectToWorld,v.vertex).xyz;//顶点坐标转换世界空间下
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed3 ambient=UNITY_LIGHTMODEL_AMBIENT.xyz;//得到环境光的颜色和强度信息

                fixed3 worldNormal=normalize(i.worldNormal);
                fixed3 worldLightDir=normalize(UnityWorldSpaceLightDir(i.worldPos));//世界空间下的光照方向

                //兰伯特漫反射颜色 = _LightColor0.rgb * _Diffuse.rgb * saturate(dot(worldNormal, worldLightDir))
                //半兰伯特漫反射颜色=_LightColor0.rgb * _Diffuse.rgb * (dot(worldNormal, worldLightDir) * 0.5 + 0.5)
                fixed3 diffuse=_LightColor0.rgb*_Diffuse.rgb*saturate(dot(worldNormal,worldLightDir));

                fixed3 reflectDir=normalize(reflect(-worldLightDir,worldNormal));//表面发现的反射方向
                fixed3 viewDir=normalize(UnityWorldSpaceViewDir(i.worldPos));//世界空间下的视角方向
                fixed3 halfDir=normalize(worldLightDir+viewDir);
                //Phong模型的高光反射颜色=_LightColor0.rgb * _Specular.rgb * pow( saturate( dot(worldViewDir, worldReflectDir) ), gloss)
                //Blinn模型的高光反射颜色=_LightColor0.rgb * _Specular.rgb * pow( saturate(dot( worldNormal , h )), gloss)
                fixed3 specular=_LightColor0.rgb*_Specular.rgb*pow(max(0,dot(worldNormal,halfDir)),_Gloss);

                fixed3 color=ambient+diffuse+specular;
                return fixed4(color,1.0);
            }
            ENDCG
        }
    }
    Fallback "Diffuse"
}

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值