ディレクトリ
1.概要
前のチュートリアルでは、「WebGLの簡単なチュートリアル（IX）：統合の例：地形レンダリング」、地形のレンダリングを実現。このチュートリアルでは、光と組み合わせて、この地形を与え、それがよりリアル、立体感強くします。
2.原理
2.1。軽量タイプ
現実、でも真っ白なオブジェクトでは、あなたは簡単にオブジェクトの輪郭を識別することができます。実際には、暗闇の中で差がその三次元の光を生成します。現実と同様に、光の3つの基本タイプがありますWebGLの：
- 点光源：例えば電球などの環境に放出されたスポット光、炎。点光源は、光源の位置、方向及び光の色を必要と定義します。照射点の位置に応じて、光の方向が異なっています。
- 平行光：平行光は、太陽光など、無限遠に光源として出射することができます。なぜなら遠い光源からの特別な位置に、光を平行照明された物体に到達すると言うことができます。方向のみを必要とし、色を定義することができます。
- 周囲光：周囲光は、物体の表面上の光の他のオブジェクトの発光と露光の様々なを通して、その光源を意味する、間接光です。例えば、冷蔵庫の扉を開くために夜に、台所の光が生成します。強度が非常に小さいため、多重反射した後にギャップを正確に光強度を算出する必要はなかったです。一般的に、周囲光が均一物体、一方のみ定義された色の表面に照射されると考えられます。
図示のように：
2.2反射型
入射光の種類と物体の表面：物体色の最終的な色を伴う光の反射に表示されるので、それは、2つの部分の要因によって決定されます。入射光の色情報と、入射光の方向、及び基板と有色反射特性を含む物体表面の情報を含みます。環境反射（的環境/雰囲気反射）と拡散反射（乱反射）により物体によって反射された光線の二つのタイプに応じてあります。
2.2.1。環境反射鏡（的環境/雰囲気反射）
周囲の光環境の反射が懸念されているオブジェクトを照明する周辺光はすべての点で均一で等しい強度であり、環境に反射が、それは方向が入射光の反対方向に反射させることができます。それはちょうど、入射光の色と基本色を有する最終オブジェクトの色についてです。それは周囲の色を反射定義することができる：
\ [= <色入射>×<基板表面の色> \タグ{1} \ <アンビエントカラー反射>]は、
式中、これは乗算色ベクトルを意味することに注意を成分ごとの乗算。
2.2.2。拡散反射（乱反射）
拡散光は、点光源条件に平行に向けられています。ジュニアは時間が鏡面と拡散反射と物理的に接触していたと信じていました。表面に凹凸がある場合、反射光が出射されない一定の角度になり、鏡のように滑らかな表面は、その後、光が特定の角度に亘って反射される場合、それは、視覚反射効果からグレアです。さまざまなオブジェクトを参照するので、実際には、表面の大部分は、ラフです。図示のように：
拡散反射、色に加えて、反射光の色は、基板表面の色、入射光の物体法線ベクトルの入射面が形成された入射角に依存します。θの入射角は、拡散反射光の色は、に従って計算することができるように：
\ [<拡散色> = <色入射>×<基板表面の色は>×cosθと\タグ{2}
\] 入射角θがあることができますベクトル内積によって算出：
\ [<線方向> - <法線方向> = |線方向| * |法線方向| *cosθと\]
通常光方向は、次に、正規化された場合ケース1のベクトル型（長さ）がある：
\ [<拡散色> = <色入射>×<基板表面の色>×（<線方向> - <法線方向>）\]
メモ、ここで、「光方向」とは、示されるように逆方向の入射方向、すなわち光入射点から方向をポイントすることを意味します。
2.2.3統合
ときに、周囲拡散との両方が存在し、一緒に、オブジェクトの最終的な色が観察されるようになります反射：
\ [<反射色面> = <拡散色> + <周囲の色が反映> \タグ{3} \]
3.例
3.1。特定のコード
次のようにJSコードの改善されたチュートリアルです。
// 顶点着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' + //位置
'attribute vec4 a_Color;\n' + //颜色
'attribute vec4 a_Normal;\n' + //法向量
'uniform mat4 u_MvpMatrix;\n' +
'varying vec4 v_Color;\n' +
'varying vec4 v_Normal;\n' +
'void main() {\n' +
' gl_Position = u_MvpMatrix * a_Position;\n' + //设置顶点的坐标
' v_Color = a_Color;\n' +
' v_Normal = a_Normal;\n' +
'}\n';
// 片元着色器程序
var FSHADER_SOURCE =
'precision mediump float;\n' +
'uniform vec3 u_DiffuseLight;\n' + // 漫反射光颜色
'uniform vec3 u_LightDirection;\n' + // 漫反射光的方向
'uniform vec3 u_AmbientLight;\n' + // 环境光颜色
'varying vec4 v_Color;\n' +
'varying vec4 v_Normal;\n' +
'void main() {\n' +
//对法向量归一化
' vec3 normal = normalize(v_Normal.xyz);\n' +
//计算光线向量与法向量的点积
' float nDotL = max(dot(u_LightDirection, normal), 0.0);\n' +
//计算漫发射光的颜色
' vec3 diffuse = u_DiffuseLight * v_Color.rgb * nDotL;\n' +
//计算环境光的颜色
' vec3 ambient = u_AmbientLight * v_Color.rgb;\n' +
' gl_FragColor = vec4(diffuse+ambient, v_Color.a);\n' +
'}\n';
//定义一个矩形体：混合构造函数原型模式
function Cuboid(minX, maxX, minY, maxY, minZ, maxZ) {
this.minX = minX;
this.maxX = maxX;
this.minY = minY;
this.maxY = maxY;
this.minZ = minZ;
this.maxZ = maxZ;
}
Cuboid.prototype = {
constructor: Cuboid,
CenterX: function () {
return (this.minX + this.maxX) / 2.0;
},
CenterY: function () {
return (this.minY + this.maxY) / 2.0;
},
CenterZ: function () {
return (this.minZ + this.maxZ) / 2.0;
},
LengthX: function () {
return (this.maxX - this.minX);
},
LengthY: function () {
return (this.maxY - this.minY);
}
}
//定义DEM
function Terrain() {}
Terrain.prototype = {
constructor: Terrain,
setWH: function (col, row) {
this.col = col;
this.row = row;
}
}
var currentAngle = [0.0, 0.0]; // 绕X轴Y轴的旋转角度 ([x-axis, y-axis])
var curScale = 1.0; //当前的缩放比例
function main() {
var demFile = document.getElementById('demFile');
if (!demFile) {
console.log("Failed to get demFile element!");
return;
}
demFile.addEventListener("change", function (event) {
//判断浏览器是否支持FileReader接口
if (typeof FileReader == 'undefined') {
console.log("你的浏览器不支持FileReader接口！");
return;
}
var input = event.target;
var reader = new FileReader();
reader.onload = function () {
if (reader.result) {
//读取
var terrain = new Terrain();
if (!readDEMFile(reader.result, terrain)) {
console.log("文件格式有误，不能读取该文件！");
}
//绘制
onDraw(gl, canvas, terrain);
}
}
reader.readAsText(input.files[0]);
});
// 获取 <canvas> 元素
var canvas = document.getElementById('webgl');
// 获取WebGL渲染上下文
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// 初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// 指定清空<canvas>的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 开启深度测试
gl.enable(gl.DEPTH_TEST);
//清空颜色和深度缓冲区
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
//绘制函数
function onDraw(gl, canvas, terrain) {
// 设置顶点位置
var n = initVertexBuffers(gl, terrain);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
//注册鼠标事件
initEventHandlers(canvas);
//设置灯光
setLight(gl);
//绘制函数
var tick = function () {
//设置MVP矩阵
setMVPMatrix(gl, canvas, terrain.cuboid);
//清空颜色和深度缓冲区
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//绘制矩形体
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0);
//请求浏览器调用tick
requestAnimationFrame(tick);
};
//开始绘制
tick();
}
//设置灯光
function setLight(gl) {
var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');
var u_DiffuseLight = gl.getUniformLocation(gl.program, 'u_DiffuseLight');
var u_LightDirection = gl.getUniformLocation(gl.program, 'u_LightDirection');
if (!u_DiffuseLight || !u_LightDirection || !u_AmbientLight) {
console.log('Failed to get the storage location');
return;
}
//设置漫反射光
gl.uniform3f(u_DiffuseLight, 1.0, 1.0, 1.0);
// 设置光线方向(世界坐标系下的)
var solarAltitude = 45.0;
var solarAzimuth = 315.0;
var fAltitude = solarAltitude * Math.PI / 180; //光源高度角
var fAzimuth = solarAzimuth * Math.PI / 180; //光源方位角
var arrayvectorX = Math.cos(fAltitude) * Math.cos(fAzimuth);
var arrayvectorY = Math.cos(fAltitude) * Math.sin(fAzimuth);
var arrayvectorZ = Math.sin(fAltitude);
var lightDirection = new Vector3([arrayvectorX, arrayvectorY, arrayvectorZ]);
lightDirection.normalize(); // Normalize
gl.uniform3fv(u_LightDirection, lightDirection.elements);
//设置环境光
gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);
}
//读取DEM函数
function readDEMFile(result, terrain) {
var stringlines = result.split("\n");
if (!stringlines || stringlines.length <= 0) {
return false;
}
//读取头信息
var subline = stringlines[0].split("\t");
if (subline.length != 6) {
return false;
}
var col = parseInt(subline[4]); //DEM宽
var row = parseInt(subline[5]); //DEM高
var verticeNum = col * row;
if (verticeNum + 1 > stringlines.length) {
return false;
}
terrain.setWH(col, row);
//读取点信息
var ci = 0;
var pSize = 9;
terrain.verticesColors = new Float32Array(verticeNum * pSize);
for (var i = 1; i < stringlines.length; i++) {
if (!stringlines[i]) {
continue;
}
var subline = stringlines[i].split(',');
if (subline.length != pSize) {
continue;
}
for (var j = 0; j < pSize; j++) {
terrain.verticesColors[ci] = parseFloat(subline[j]);
ci++;
}
}
if (ci !== verticeNum * pSize) {
return false;
}
//包围盒
var minX = terrain.verticesColors[0];
var maxX = terrain.verticesColors[0];
var minY = terrain.verticesColors[1];
var maxY = terrain.verticesColors[1];
var minZ = terrain.verticesColors[2];
var maxZ = terrain.verticesColors[2];
for (var i = 0; i < verticeNum; i++) {
minX = Math.min(minX, terrain.verticesColors[i * pSize]);
maxX = Math.max(maxX, terrain.verticesColors[i * pSize]);
minY = Math.min(minY, terrain.verticesColors[i * pSize + 1]);
maxY = Math.max(maxY, terrain.verticesColors[i * pSize + 1]);
minZ = Math.min(minZ, terrain.verticesColors[i * pSize + 2]);
maxZ = Math.max(maxZ, terrain.verticesColors[i * pSize + 2]);
}
terrain.cuboid = new Cuboid(minX, maxX, minY, maxY, minZ, maxZ);
return true;
}
//注册鼠标事件
function initEventHandlers(canvas) {
var dragging = false; // Dragging or not
var lastX = -1,
lastY = -1; // Last position of the mouse
//鼠标按下
canvas.onmousedown = function (ev) {
var x = ev.clientX;
var y = ev.clientY;
// Start dragging if a moue is in <canvas>
var rect = ev.target.getBoundingClientRect();
if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) {
lastX = x;
lastY = y;
dragging = true;
}
};
//鼠标离开时
canvas.onmouseleave = function (ev) {
dragging = false;
};
//鼠标释放
canvas.onmouseup = function (ev) {
dragging = false;
};
//鼠标移动
canvas.onmousemove = function (ev) {
var x = ev.clientX;
var y = ev.clientY;
if (dragging) {
var factor = 100 / canvas.height; // The rotation ratio
var dx = factor * (x - lastX);
var dy = factor * (y - lastY);
currentAngle[0] = currentAngle[0] + dy;
currentAngle[1] = currentAngle[1] + dx;
}
lastX = x, lastY = y;
};
//鼠标缩放
canvas.onmousewheel = function (event) {
if (event.wheelDelta > 0) {
curScale = curScale * 1.1;
} else {
curScale = curScale * 0.9;
}
};
}
//设置MVP矩阵
function setMVPMatrix(gl, canvas, cuboid) {
// Get the storage location of u_MvpMatrix
var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
if (!u_MvpMatrix) {
console.log('Failed to get the storage location of u_MvpMatrix');
return;
}
//模型矩阵
var modelMatrix = new Matrix4();
modelMatrix.scale(curScale, curScale, curScale);
modelMatrix.rotate(currentAngle[0], 1.0, 0.0, 0.0); // Rotation around x-axis
modelMatrix.rotate(currentAngle[1], 0.0, 1.0, 0.0); // Rotation around y-axis
modelMatrix.translate(-cuboid.CenterX(), -cuboid.CenterY(), -cuboid.CenterZ());
//投影矩阵
var fovy = 60;
var near = 1;
var projMatrix = new Matrix4();
projMatrix.setPerspective(fovy, canvas.width / canvas.height, 1, 10000);
//计算lookAt()函数初始视点的高度
var angle = fovy / 2 * Math.PI / 180.0;
var eyeHight = (cuboid.LengthY() * 1.2) / 2.0 / angle;
//视图矩阵
var viewMatrix = new Matrix4(); // View matrix
viewMatrix.lookAt(0, 0, eyeHight, 0, 0, 0, 0, 1, 0);
//MVP矩阵
var mvpMatrix = new Matrix4();
mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix);
//将MVP矩阵传输到着色器的uniform变量u_MvpMatrix
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
}
//
function initVertexBuffers(gl, terrain) {
//DEM的一个网格是由两个三角形组成的
// 0------1 1
// | |
// | |
// col col------col+1
var col = terrain.col;
var row = terrain.row;
var indices = new Uint16Array((row - 1) * (col - 1) * 6);
var ci = 0;
for (var yi = 0; yi < row - 1; yi++) {
//for (var yi = 0; yi < 10; yi++) {
for (var xi = 0; xi < col - 1; xi++) {
indices[ci * 6] = yi * col + xi;
indices[ci * 6 + 1] = (yi + 1) * col + xi;
indices[ci * 6 + 2] = yi * col + xi + 1;
indices[ci * 6 + 3] = (yi + 1) * col + xi;
indices[ci * 6 + 4] = (yi + 1) * col + xi + 1;
indices[ci * 6 + 5] = yi * col + xi + 1;
ci++;
}
}
//
var verticesColors = terrain.verticesColors;
var FSIZE = verticesColors.BYTES_PER_ELEMENT; //数组中每个元素的字节数
// 创建缓冲区对象
var vertexColorBuffer = gl.createBuffer();
var indexBuffer = gl.createBuffer();
if (!vertexColorBuffer || !indexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// 将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
// 向缓冲区对象写入数据
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
//获取着色器中attribute变量a_Position的地址
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
// 将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 9, 0);
// 连接a_Position变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Position);
//获取着色器中attribute变量a_Color的地址
var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
if (a_Color < 0) {
console.log('Failed to get the storage location of a_Color');
return -1;
}
// 将缓冲区对象分配给a_Color变量
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 9, FSIZE * 3);
// 连接a_Color变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Color);
// 向缓冲区对象分配a_Normal变量,传入的这个变量要在着色器使用才行
var a_Normal = gl.getAttribLocation(gl.program, 'a_Normal');
if (a_Normal < 0) {
console.log('Failed to get the storage location of a_Normal');
return -1;
}
gl.vertexAttribPointer(a_Normal, 3, gl.FLOAT, false, FSIZE * 9, FSIZE * 6);
//开启a_Normal变量
gl.enableVertexAttribArray(a_Normal);
// 将顶点索引写入到缓冲区对象
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
return indices.length;
}3.2。詳細な変更
3.2.1。太陽の光を設定します
主な変更はでonDraw（）（）内に設けられた照明setLight描画関数の機能を追加することです。
//绘制函数
function onDraw(gl, canvas, terrain) {
//...
//注册鼠标事件
initEventHandlers(canvas);
//设置灯光
setLight(gl);
//绘制函数
var tick = function () {
//...
};
//开始绘制
tick();
}この特定の機能を拡張し、コードがシェーダ色u_AmbientLight、拡散色u_DiffuseLight、u_LightDirectionこれら三つのパラメータ拡散反射方向を通過した周辺光に主に見られます。周囲光は、他によれば、環境光の強度が弱い物体の色で反射され、（0.2,0.2,0.2）に設定されています。ここで太陽光をシミュレートするために、拡散色と、それは（1.0,1.0,1.0）最強に設定することができます。
//设置灯光
function setLight(gl) {
var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');
var u_DiffuseLight = gl.getUniformLocation(gl.program, 'u_DiffuseLight');
var u_LightDirection = gl.getUniformLocation(gl.program, 'u_LightDirection');
if (!u_DiffuseLight || !u_LightDirection || !u_AmbientLight) {
console.log('Failed to get the storage location');
return;
}
//设置漫反射光
gl.uniform3f(u_DiffuseLight, 1.0, 1.0, 1.0);
//...
gl.uniform3fv(u_LightDirection, lightDirection.elements);
//设置环境光
gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);
}前述のように、太陽の光が平行光であるので、唯一のラインの方向を設定する必要があります。方向および関連する太陽solarAzimuth二地理的パラメータsolarAltitude太陽の仰角と方位角を計算します。一時的に特定の突起の詳細に焦点を当てる必要はありませんすることができます（私の他のブログの記事で見つけることができOSG日照シミュレーションモデルによって達成される IIおよびIV）、ここでしか拡散反射の方向を知っている必要が任意に指定されていない、に基づいています実際のパラメータを計算しました。
function setLight(gl) {
{
//...
// 设置光线方向(世界坐标系下的)
var solarAltitude = 45.0;
var solarAzimuth = 315.0;
var fAltitude = solarAltitude * Math.PI / 180; //光源高度角
var fAzimuth = solarAzimuth * Math.PI / 180; //光源方位角
var arrayvectorX = Math.cos(fAltitude) * Math.cos(fAzimuth);
var arrayvectorY = Math.cos(fAltitude) * Math.sin(fAzimuth);
var arrayvectorZ = Math.sin(fAltitude);
var lightDirection = new Vector3([arrayvectorX, arrayvectorY, arrayvectorZ]);
lightDirection.normalize(); // Normalize
//...
}3.2.2。シェーダの照明設定
ここで、頂点シェーダと入射光がパラメータが、頂点バッファおよび変数を変化させる値として保存する目標色値を使用していない、着信フラグメントをバッファリングします。
// 顶点着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' + //位置
'attribute vec4 a_Color;\n' + //颜色
'attribute vec4 a_Normal;\n' + //法向量
'uniform mat4 u_MvpMatrix;\n' +
'varying vec4 v_Color;\n' +
'varying vec4 v_Normal;\n' +
'void main() {\n' +
' gl_Position = u_MvpMatrix * a_Position;\n' + //设置顶点的坐标
' v_Color = a_Color;\n' +
' v_Normal = a_Normal;\n' +
'}\n';タイルバッファに、タイルバッファと正常値の色値に渡された値は、各フラグメント及び方法の基本色となる補間されてきました。正規化された法線ベクトルは、ドット積は、拡散反射、拡散反射得られる入射角の入射方向に関係します。入射光強度の発生率および拡散反射シート素子のベースカラーの拡散反射角度、（2）式の拡散色に応じて算出されます。入ってくる周囲の色を有する基板の色をフラグメント、（1）光の色を反射式の周囲に応じて算出されます。式によれば、（3）の両方が表示される断片の最終的な色を得るために添加しました。
// 片元着色器程序
var FSHADER_SOURCE =
'precision mediump float;\n' +
'uniform vec3 u_DiffuseLight;\n' + // 漫反射光颜色
'uniform vec3 u_LightDirection;\n' + // 漫反射光的方向
'uniform vec3 u_AmbientLight;\n' + // 环境光颜色
'varying vec4 v_Color;\n' +
'varying vec4 v_Normal;\n' +
'void main() {\n' +
//对法向量归一化
' vec3 normal = normalize(v_Normal.xyz);\n' +
//计算光线向量与法向量的点积
' float nDotL = max(dot(u_LightDirection, normal), 0.0);\n' +
//计算漫发射光的颜色
' vec3 diffuse = u_DiffuseLight * v_Color.rgb * nDotL;\n' +
//计算环境光的颜色
' vec3 ambient = u_AmbientLight * v_Color.rgb;\n' +
' gl_FragColor = vec4(diffuse+ambient, v_Color.a);\n' +
'}\n';4.結果
ブラウザの最終結果は、次のように表示されます
前回のチュートリアルのレンダリングと比較すると、我々は大幅に見つかった三次元性を高めることができ、ケースは明らかに起伏のある地形を見ることができます。
5.リファレンス
：「WebGLのプログラミングガイド、」ソースリンクからコードやイラストのもともと一部のアドレス。フォローアップは、この共有ディレクトリの内容を更新していきます。