webgl添加环境光示例

1.环境光

环境光(间接光)是指那些光源发出后，被墙壁等物体多次反射，然后照到物体表面上的光。环境光从各个角度照射物体，其强度是一致的。比如说，在夜间打开冰箱的门，整个房间都会有些微微亮，这就是环境光的作用。环境光不用指定位置和方向。只需要指定颜色就可以了。

2.环境光的反射

特点:

方向，环境光的反射方向是，和入射光的方向刚好相反。
照射物体的方式都是各方向均匀，强度相等的。

公式:

环境光反射光的颜色 = 物体表面基底色 * 环境光的颜色

3.漫反射,环境光反射同时存在时

公式:

表面的反射光颜色 = 漫反射光的颜色 + 环境光反射光的颜色

详细代码
1.在顶点着色器中，声明接受环境光的变量

'uniform vec3 u_AmbientLight;\n' +  // 环境光

2.在js代码中，获取变量地址，而且设置传递的值

var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');
gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);

3.计算环境光的放射光的颜色

'   vec3 ambient = u_AmbientLight * a_Color.rgb;\n'+

4.然后进行赋值操作

'   c_Color = vec4(diffuse + ambient, a_Color);\n' +

就ok了

具体代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- <canvas id="canvas" width="400" height="400"></canvas> --><canvas id="canvas" width="400" height="400"></canvas><script src="../三维/lib/cuon-matrix.js"></script><script>const gl = canvas.getContext('webgl');// 顶点着色器const VSHADER_SOURCE ='attribute vec4 a_Position;\n' +   // 顶点坐标'attribute vec4 a_Color;\n' + // 颜色值'varying vec4 c_Color;\n' +'uniform mat4 u_ViewProjMatrix;\n' + // 视图透视投影矩阵'uniform vec3 u_LightColor;\n' + // 光线的颜色'uniform vec3 u_LightDirection;\n' + // 光线的向量'uniform vec3 u_AmbientLight;\n' +  // 环境光'attribute vec4 a_Normal;\n' + // 顶点法向量' void main(){\n' +'   gl_Position = u_ViewProjMatrix * a_Position;\n' +'   vec3 normal = normalize(a_Normal.xyz);\n' +'   float nDotl =  max(dot(u_LightDirection, normal), 0.0);\n' +'   vec3 diffuse = u_LightColor * a_Color.rgb* nDotl;\n' +'   vec3 ambient = u_AmbientLight * a_Color.rgb;\n'+'   c_Color = vec4(diffuse + ambient, a_Color);\n' +'}\n';const FSHADER_SOURCE ='#ifdef GL_ES\n' +'precision mediump float;\n' +'#endif\n' +'varying vec4 c_Color;\n' +'void main(){\n' +'   gl_FragColor = c_Color;\n' +'}\n';const createShader = (type, source) => {const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);const compileState = gl.getShaderParameter(shader, gl.COMPILE_STATUS);if (!compileState) {const info = gl.getShaderInfoLog(shader);console.log(`编译报错信息为:${info}`)gl.deleteShader(shader);return null}return shader}// createShader(gl.FRAGMENT_SHADER,FSHADER_SOURCE)const createProgram = (vshader, fshader) => {const vertexShader = createShader(gl.VERTEX_SHADER, vshader);const fragementShader = createShader(gl.FRAGMENT_SHADER, fshader);if (!fragementShader || !vertexShader) {console.log('初始着色器失败')return false}const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragementShader);gl.linkProgram(program);const linkState = gl.getProgramParameter(program, gl.LINK_STATUS);if (!linkState) {const err = gl.getProgramInfoLog(program);console.log(`链接报错信息为:${err}`);gl.deleteShader(vertexShader);gl.deleteShader(fragementShader);gl.deleteProgram(program);return null}return program;}const program = createProgram(VSHADER_SOURCE, FSHADER_SOURCE);// gl.useProgram(program);gl.program = program;// console.log(program, 'programprogram')gl.useProgram(program);const createBuffers = () => {// const vertices = new Float32Array([//     1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, // v0-v1-v2-v3 前面//     1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, // v0-v3-v4-v5 右边//     1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 上//     -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, // v1-v6-v7-v2 左边//     1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, // v7-v4-v3-v2 下面//     1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, -1.0  // v4-v7-v6-v5 后面// ])var vertices = new Float32Array([   // Coordinates1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, // v0-v1-v2-v3 front1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, // v0-v3-v4-v5 right1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up-1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, // v1-v6-v7-v2 left-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // v7-v4-v3-v2 down1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0  // v4-v7-v6-v5 back]); // 顶点坐标// 顶点颜色// const colors = new Float32Array([//     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,//     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,//     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,//     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,//     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,//     1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,// ])var colors = new Float32Array([    // Colors1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v1-v2-v3 front1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v3-v4-v5 right1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v0-v5-v6-v1 up1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v1-v6-v7-v2 left1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,     // v7-v4-v3-v2 down1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0　    // v4-v7-v6-v5 back]); // 顶点颜色// const normals = new Float32Array([//     0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,//     1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,//     0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,//     -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,//     0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,//     0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0// ])var normals = new Float32Array([    // Normal0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,  // v0-v1-v2-v3 front1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,  // v0-v3-v4-v5 right0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,  // v0-v5-v6-v1 up-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,  // v1-v6-v7-v2 left0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,  // v7-v4-v3-v2 down0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0   // v4-v7-v6-v5 back]); // 顶点法向量initArrayBuffer('a_Position', vertices, 3, gl.FLOAT);initArrayBuffer('a_Color', colors, 3, gl.FLOAT);initArrayBuffer('a_Normal', normals, 3, gl.FLOAT);// const indices = new Uint8Array([//     0, 1, 2, 0, 2, 3, // 前面//     4, 5, 6, 4, 6, 7, // 右面//     8, 9, 10, 8, 10, 11, // 上面//     12, 13, 14, 12, 14, 15,  // 左面//     16, 17, 18, 16, 18, 19, // 下面//     20, 21, 22, 20, 22, 23, // 后面  // ])var indices = new Uint8Array([0, 1, 2, 0, 2, 3,    // front4, 5, 6, 4, 6, 7,    // right8, 9, 10, 8, 10, 11,    // up12, 13, 14, 12, 14, 15,    // left16, 17, 18, 16, 18, 19,    // down20, 21, 22, 20, 22, 23     // back]); // 顶点索引const bufferIndex = gl.createBuffer();gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferIndex)gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);return indices.length;}const initArrayBuffer = (attribute, data, num, type) => {// console.log(attribute, 'attribute')const buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);// const a_attribute = gl.getAttribLocation(gl.program, attribute);var a_attribute = gl.getAttribLocation(gl.program, attribute);if (a_attribute < 0) {console.log('Failed to get the storage location of ' + attribute);return false;}gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);gl.enableVertexAttribArray(a_attribute);gl.bindBuffer(gl.ARRAY_BUFFER, null);}var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);const n = createBuffers();var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_ViewProjMatrix');console.log(u_MvpMatrix, 'u_MvpMatrix')var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor');var u_LightDirection = gl.getUniformLocation(gl.program, 'u_LightDirection');gl.uniform3f(u_LightColor, 5.0, 5.0, 5.0);// console.log(Matrix4, 'Matrix4')const mvpMatrix = new Matrix4();// mvpMatrix.setPerspective(30, canvas.with / canvas.height, 0.0, 100);mvpMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);// gl.uniform3f(u_MvpMatrix, false, mvpMatrix.elements);gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);var lightDirection = new Vector3([0.5, 3.0, 4.0]);lightDirection.normalize();gl.uniform3fv(u_LightDirection, lightDirection.elements);gl.clearColor(0, 0, 0, 1);gl.enable(gl.DEPTH_TEST);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);console.log(n, 'n')gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);</script>
</body></html>

效果图

webgl添加环境光示例相关推荐

SuperMap iClient3D for WebGL教程- 环境光
环境光主要用来营造场景整体的光线效果,比如阴.晴.日.夜.黄昏.黎明等,建筑物从而呈现不同环境下的光照效果,使场景更加逼真,接下来我们将使用环境光制作一个深夜场景. 一.核心接口介绍环境光使用的接口 ...
【JS】创建和添加节点示例
创建和添加节点示例 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
php加音效,HTML_为你的html5网页添加音效示例，为交互添加恰当的音效，常常 - phpStudy...
为你的html5网页添加音效示例为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用HTML5, Jquery,给页面添加音效 ...
如何在html中加入音效,为你的html5网页添加音效示例
这篇文章主要介绍了为你的html5网页添加音效示例,需要的朋友可以参考下为交互添加恰当的音效,常常能改善用户体验.在我们所熟悉的windows里,清空回收站的碎纸声就是很好的例子. 下面是一个利用H ...
结合WebSocket编写WebGL综合场景示例
在WebGL场景中导入多个Babylon骨骼模型,在局域网用WebSocket实现多用户交互控制. 首先是场景截图: 上图在场景中导入一个Babylon骨骼模型,使用asdw.空格.鼠标控制加速度移动 ...
葛兰岱尔WebGL引擎开放示例demo，二次开发更便捷
2023年,葛兰岱尔对公司官网(http://sampledemo.glendale.top/#/)WebGL轻量化3D/BIM/GIS引擎示例demo进行了升级,不仅优化了原有示例demo,而且增加 ...
SkeyeWebPlayer免费网页RTSP/RTMP/FLV/HLS/H265/M3U8直播点播播放器-页面动态多播放器添加代码示例
强大的网页直播/点播播放器 SkeyeWebPlayer,使用简单,功能强大, 终身免费使用,支持Windows. Android.iOS平台. SkeyeWebPlayer.js H5播放器是由成都 ...
liveplayer免费网页直播|点播播放器-页面动态多播放器添加代码示例
强大的网页直播/点播播放器,使用简单,功能强大, 终身免费使用支持m3u8播放; 支持HTTP-FLV播放; 支持RTMP播放; 支持直播和点播播放; 支持播放器快照截图; 支持点播多清晰度播放; ...
liveplayer免费网页直播_点播播放器-页面动态多播放器添加代码示例
强大的网页直播/点播播放器,使用简单,功能强大, 终身免费使用支持m3u8播放; 支持HTTP-FLV播放; 支持RTMP播放; 支持直播和点播播放; 支持播放器快照截图; 支持点播多清晰度播放; ...

webgl添加环境光示例

1.环境光

2.环境光的反射

3.漫反射,环境光反射同时存在时

webgl添加环境光示例相关推荐

最新文章

热门文章