原文地址:WebGL多模型光照综合实例

WebGL是一个非常的接近硬件底层的光栅化API, 从非常类似C/C++风格的API调用方式就可以看出来, 习惯了高级语言的我们会觉得很不友好,觉得特别繁琐. 这个也是很多人觉得WebGL难的原因之一. 如果我们要使用WebGL做一些项目,毫无疑问要么使用Three.js之类的3D库, 要么需要对原生的API进行封装. 这段时间查看了一些WebGL工具库的源代码, 参考封装出了一个简单的工具库,这样往后用WebGL做小项目就方便多了.

经过前面章节的学习, WebGL的知识点掌握的差不多了, 终于到了做特效和Demo的阶段了,来看一下这节实现的特效:WebGL多物体多光源场景

内容大纲

实现图形绕坐标原点旋转, 同时给所有的物体增加环境光, 漫反射, 高光. 其中旋转功能使用矩阵复合变换实现; 光照部分比较复杂,实现了多个光源照射.

  1. 着色器
  2. 模型变换

着色器

顶点着色器

代码很简单,逐顶点传入坐标,法向量矩阵,模型矩阵,mvp矩阵.

attribute vec4 a_position;
attribute vec4 a_normal;
uniform mat4 u_modelMatrix;
uniform mat4 u_normalMatrix;
uniform mat4 u_mvpMatrix;
varying vec3 v_normal;
varying vec3 v_position; void main() {
gl_Position = u_mvpMatrix * a_position;
v_normal=vec3(u_normalMatrix * a_normal);
v_position= vec3(u_modelMatrix * a_position);
}

片元着色器

分别在左前方和右后方添加了平行光源和点光源, 平行光源的高光使用的是宾氏模型, 它的高光过渡效果比较平滑; 点光源的高光使用的是冯氏模型, 它的高光部分比较明亮, 反射的效果比较好.

最后将两个光源照射产生的漫反射,高光亮度相加,就得到它们的综合光照效果了.

precision mediump float;
uniform vec3 u_lightColor;
uniform vec3 u_lightPosition;
uniform vec3 u_lightPosition2;
uniform vec3 u_ambientColor;
uniform vec3 u_viewPosition;
uniform vec4 u_color;
varying vec3 v_normal;
varying vec3 v_position; void main() {
// 法向量归一化
vec3 normal = normalize(v_normal);
// 计算环境光反射颜色
vec3 ambient = u_ambientColor * u_color.rgb; // 第一个光源:平行光
vec3 lightDirection = normalize(u_lightPosition);
// 计算法向量和光线的点积
float cosTheta = max(dot(lightDirection, normal), 0.0);
// 计算漫反射光的颜色
vec3 diffuse = u_lightColor * u_color.rgb * cosTheta;
// 宾氏模型高光
float shininess =100.0;
vec3 specularColor =vec3(1.0,1.0,1.0);
vec3 viewDirection = normalize(u_viewPosition-v_position);
vec3 halfwayDir = normalize(lightDirection + viewDirection);
float specularWeighting = pow(max(dot(normal, halfwayDir), 0.0), shininess);
vec3 specular = specularColor.rgb * specularWeighting * step(cosTheta,0.0); // 第二个光源:点光源
vec3 lightDirection2 = normalize(u_lightPosition2 - v_position.xyz);
// 计算法向量和光线的点积
float cosTheta2 = max(dot(lightDirection2, normal), 0.0);
// 计算漫反射光的颜色
vec3 diffuse2 = u_lightColor * u_color.rgb * cosTheta2;
// 冯氏模型高光
float shininess2 =30.0;
vec3 specularColor2 =vec3(1.0,1.0,1.0);
vec3 reflectionDirection = reflect(-lightDirection2, normal);
float specularWeighting2 = pow(max(dot(reflectionDirection, viewDirection), 0.0), shininess2);
vec3 specular2 = specularColor2.rgb * specularWeighting2 * step(cosTheta,0.0);
// 两个光源亮度相加
gl_FragColor = vec4(diffuse+diffuse2+ambient+specular+specular2,u_color.a);
}

模型变换

js代码部分使用工具库封装了原生WebGL的很多细节, 现在写起代码来要愉快得多了, 感觉和写canvas差不了太多

WebGL多模型光照综合实例的更多相关文章

  1. ReportingServies——SQLServer报表开发综合实例

    如果我们安装了sqlserver2008 R2,将会自动安装一个报表开发工具 不要以为此报表开发工具只适合于sqlserver2008,其实在sqlserver2012中也是支持的,事实上我现在项目中 ...

  2. 8月7号晚7点Autodesk北京办公室,我们来聊聊HTML5/ WebGL 3D 模型浏览技术

    Autodesk 发布了一款完全无需插件的三维模型浏览器 Autodesk 360 Viewer,大家有没有兴趣,下班后过来聊聊吧!   8月7号 周四, 19:00~21:00 Autodesk北京 ...

  3. Loadrunner 关联 web_custom_request综合实例

    Loadrunner 关联 web_custom_request综合实例 Loadrunner 关联web_custom_request,针对自带的订票系统的一个综合实例,相信看了本文大家对学习loa ...

  4. 使用VS2012 开发SharePoint 2013 声明式的action(activity) 综合实例

    本文讲述使用VS2012 开发SharePoint 2013 声明式的action 综合实例. 需求同: http://blog.csdn.net/abrahamcheng/article/detai ...

  5. [原创]MongoDB综合实例一

    CentOS-6.5单机实现mongoDB分片 环境:1)CentOS 6.5系统      2)IP:本机3)MongoDB:MongoDB-linux-x86_64-2.6.1 实现:两个副本集s ...

  6. 一个综合实例讲解vue的基础知识点。

    本文通过一个简单的实例来讲解一下vue的基本知识点.通过这个综合实例的讲解,vue的基础知识就会掌握的差不多了. 首先看一下项目的效果:

  7. 面向对象:静态属性,静态方法,组合,继承,衍生,继承之mro线性顺序列表,面向对象综合实例

    1.静态属性(附有装饰器) class Room: def __init__(self,name,owner,width,length,height): self.name=name self.own ...

  8. html5-表单的综合实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. html5--2.10综合实例2-移动端页面练习

    html5--2.10综合实例2-移动端页面练习 学习要点 通过一个简单的移动手机页面,复习学过的内容 手机网页的测试 手机布局的屏幕设定 手机网页的测试方法 直接在手机上测试,比较麻烦,效果好 电脑 ...

随机推荐

  1. 对于是否在一个python程序中编写函数的启发

    那我们到底是应该直接使用这些模块级别的函数呢,还是先编译一个模式对象,再调用模式对象的方法呢?这其实取决于正则表达式的使用频率,如果说我们这个程序只是偶尔使用到正则表达式,那么全局函数是比较方便的:如 ...

  2. linux下使用自带mail发送邮件(超简单)

    linux 发邮件最简单的办法 ,也可以使用公司邮箱,需要安装mailx工具,mailx是一个小型的邮件发送程序. 具体步骤如下: 1.安装 [root@001 ~]# yum install mai ...

  3. linux(ubuntu) 搭建java程序运行环境

    一:简介 ubuntu 系统的和linux差不多,我们需要在系统上搭建java程序运行环境,需要安装jdk,mysql这两个软件,tomcat是绿色版,直接通过taz -zxvf tomcat 就可以 ...

  4. go基础之--函数和map

    在整理函数之前先整理一下关于指针 指针 普通类型变量存的就是值,也叫值类型.指针类型存的是地址,即指针的值是一个变量的地址.一个指针指示值所保存的位置,不是所有的值都有地址,但是所有的变量都有.使用指 ...

  5. dispatch_sync和dispatch_async的区别

    dispatch_sync 线程同步.dispatch_async线程异步 比如 //同步 dispatch_sync(dispatch_get_global_queue(DISPATCH_QUEUE ...

  6. CET——4 常用短语

    在网上看到的,先拔到自己这来,四级大大,求过!!!!

  7. bzoj 4345: [POI2016]Korale

    Description 有n个带标号的珠子,第i个珠子的价值为a[i].现在你可以选择若干个珠子组成项链(也可以一个都不选),项链的价值为所有珠子的价值和.现在给所有可能的项链排序,先按权值从小到大排 ...

  8. 封装数据库配置文件App配置文件

    <connectionStrings>   <add name="strCon" connectionString="Data Source=.;Ini ...

  9. ArcGIS API for Javascript 加载天地图(经纬度投影)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. Verilog code

    1.计数,用于对精度不高的计数 always @(posedge clk or negedge rst_n) begin if(!rst_n) div_cnt <= 'd0; else div_ ...