当前位置： 首页 > news >正文

深圳做网站最好上海有哪些优化网站推广公司

news 2025/8/22 15:35:01
深圳做网站最好,上海有哪些优化网站推广公司,做海报一般都去什么网站看,佛山网站维护案例查看地址&#xff1a;点击这里 前面我们学习了平行光源&#xff0c;环境光源&#xff0c;今天我们一起学习一下点光源下的物体的效果上面的效果就是通过点光源生成的阴影效果<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF…

案例查看地址：点击这里

前面我们学习了平行光源，环境光源，今天我们一起学习一下点光源下的物体的效果


上面的效果就是通过点光源生成的阴影效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Title</title><style>body {margin: 0;text-align: center;}#canvas {margin: 0;}</style>
</head>
<body οnlοad="main()">
<canvas id="canvas" height="800" width="1200"></canvas>
</body>
<script src="lib/webgl-utils.js"></script>
<script src="lib/webgl-debug.js"></script>
<script src="lib/cuon-utils.js"></script>
<script src="lib/cuon-matrix.js"></script>
<script>//顶点着色器var VSHADER_SOURCE = "" +"attribute vec4 a_Position;\n" +"attribute vec4 a_Color;\n" +"attribute vec4 a_Normal;\n" +//法向量"uniform mat4 u_ModelMatrix;\n" + //模型矩阵"uniform mat4 u_MvpMatrix;\n" + //模型视图投影矩阵"uniform mat4 u_NormalMatrix;\n" + //用来变换法向量的矩阵"uniform vec3 u_LightColor;\n" + //光线颜色"uniform vec3 u_LightPosition;\n" + //光源位置（世界坐标系）"uniform vec3 u_AmbientLight;\n" + //环境光颜色"varying vec4 v_Color;\n" +"void main(){\n" +"   gl_Position = u_MvpMatrix * a_Position;\n" +//对法向量进行归一化"   vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n" + //动态的法向量会被处理后并归一化//计算顶点的世界坐标"   vec4 vertexPosition = u_ModelMatrix * a_Position;\n" +//计算光线方向并归一化"   vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));\n" +//计算光线方向和法向量的点积"   float nDotL = max(dot(lightDirection,normal),0.0);\n" +//计算漫反射光的颜色"   vec3 diffuse = u_LightColor * vec3(a_Color) * nDotL;\n" +//计算环境光产生的反射光颜色"   vec3 ambient = u_AmbientLight * a_Color.rgb;\n" +//将以上两者相加得到物体最终的颜色"   v_Color = vec4(diffuse+ambient,a_Color.a);\n" +"}";//片元着色器var FSHADER_SOURCE = "" +"#ifdef GL_ES\n" +"precision mediump float;\n" +"#endif\n" +"varying vec4 v_Color;\n" +"void main(){\n" +"   gl_FragColor = v_Color;\n" +"}";//主函数，页面加载完成触发function main() {//获取canvas对象var canvas = document.getElementById("canvas");//获取WebGL上下文var gl = getWebGLContext(canvas);if (!gl) {console("您的浏览器不支持WebGL");return;}//初始化着色器if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log("初始化着色器失败");return;}//设置顶点的坐标、颜色和法向量var n = initVertexBuffers(gl);if (n < 0) {console.log("无法获取到顶点个数，设置顶点坐标、颜色和法向量失败");return;}//初始化背景色和前后关系功能开启gl.clearColor(0, 0, 0, 1);gl.enable(gl.DEPTH_TEST);//获取模型视图投影矩阵、光线颜色变量和归一化世界坐标uniform变量的存储位置var u_MvpMatrix = gl.getUniformLocation(gl.program, "u_MvpMatrix");var u_ModelMatrix = gl.getUniformLocation(gl.program, "u_ModelMatrix");var u_NormalMatrix = gl.getUniformLocation(gl.program, "u_NormalMatrix");var u_LightColor = gl.getUniformLocation(gl.program, "u_LightColor");var u_LightPosition = gl.getUniformLocation(gl.program, "u_LightPosition");var u_AmbientLight = gl.getUniformLocation(gl.program, "u_AmbientLight");if (!u_ModelMatrix || !u_LightColor || !u_LightPosition || !u_AmbientLight || !u_NormalMatrix || !u_MvpMatrix) {console.log("无法获取相关的存储位置，或者未定义");return;}//设置光线颜色（白色）gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);//设置光线方向（不是世界坐标系下的，所以讲这些取消掉，直接把位置传入）gl.uniform3f(u_LightPosition, 2.0, 3.0, 4.0);//设置环境光颜色gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);//声明矩阵var mvpMatrix = new Matrix4(); //声明一个模型视图投影矩阵var modelMatrix = new Matrix4(); //模型矩阵var normalMatrix = new Matrix4(); //用来变换法向量的矩阵//计算矩阵mvpMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);//设置透视矩阵mvpMatrix.lookAt(6, 6, 14, 0, 0, 0, 0, 1, 0); //设置视点的位置modelMatrix.setRotate(90, 0, 1, 0);mvpMatrix.multiply(modelMatrix);//将移动后的模型传给u_MvpMatrix变量gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);//将模型视图投影矩阵传给u_MvpMatrix变量gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);//根据模型矩阵计算用来变换法向量的矩阵normalMatrix.setInverseOf(modelMatrix);normalMatrix.transpose();//将用来变换放下了的矩阵传给u_NormalMatrix变量gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);//清除底色和深度缓冲区gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); //绘制图形}function initVertexBuffers(gl) {// 绘制一个立方体//    v6----- v5//   /|      /|//  v1------v0|//  | |     | |//  | |v7---|-|v4//  |/      |///  v2------v3var vertices = new Float32Array([   // 顶点坐标2.0, 2.0, 2.0,  -2.0, 2.0, 2.0,  -2.0,-2.0, 2.0,   2.0,-2.0, 2.0, // v0-v1-v2-v3 front2.0, 2.0, 2.0,   2.0,-2.0, 2.0,   2.0,-2.0,-2.0,   2.0, 2.0,-2.0, // v0-v3-v4-v5 right2.0, 2.0, 2.0,   2.0, 2.0,-2.0,  -2.0, 2.0,-2.0,  -2.0, 2.0, 2.0, // v0-v5-v6-v1 up-2.0, 2.0, 2.0,  -2.0, 2.0,-2.0,  -2.0,-2.0,-2.0,  -2.0,-2.0, 2.0, // v1-v6-v7-v2 left-2.0,-2.0,-2.0,   2.0,-2.0,-2.0,   2.0,-2.0, 2.0,  -2.0,-2.0, 2.0, // v7-v4-v3-v2 down2.0,-2.0,-2.0,  -2.0,-2.0,-2.0,  -2.0, 2.0,-2.0,   2.0, 2.0,-2.0  // v4-v7-v6-v5 back]);var colors = new Float32Array([    // 顶点颜色1, 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]);var 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,  // 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]);// 绘制点的顺序下标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]);// 通过initArrayBuffer方法将顶点数据保存到缓冲区if (!initArrayBuffer(gl, 'a_Position', vertices, 3, gl.FLOAT)) return -1;if (!initArrayBuffer(gl, 'a_Color', colors, 3, gl.FLOAT)) return -1;if (!initArrayBuffer(gl, 'a_Normal', normals, 3, gl.FLOAT)) return -1;// 创建顶点索引缓冲区对象var indexBuffer = gl.createBuffer();if (!indexBuffer) {console.log('无法创建顶点索引的缓冲区对象');return -1;}//将顶点索引数据存入缓冲区gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);return indices.length;}function initArrayBuffer(gl, attribute, data, num, type) {//创建缓冲区对象var buffer = gl.createBuffer();if (!buffer) {console.log("无法创建缓冲区对象");return false;}//绑定缓冲区，并将数据存入缓冲区gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);//获取相关变量存储位置，赋值并开启缓冲区var a_attribute = gl.getAttribLocation(gl.program, attribute);if (a_attribute < 0) {console.log("无法获取" + attribute + "变量的相关位置");return false;}//向缓冲区赋值gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);//开启数据，并解绑缓冲区gl.enableVertexAttribArray(a_attribute);gl.bindBuffer(gl.ARRAY_BUFFER, null);return true;}
</script>
</html>
和上面一节的代码最大的变化发生在顶点着色器中。首先使用模型矩阵变化顶点坐标，获得顶点在世界坐标系中的坐标（即变换后的坐标），以便计算点光源光在顶点处的方向。点光源向四周放射光线，所以顶点处的光线方向是由点光源光坐标减去顶点坐标而得到的矢量。点光源在世界坐标系中的坐标已经传给了着色器中的u_LightPosition，而前面也已经算出了顶点在世界坐标系中的坐标，这样就计算出了光线方向矢量lightDirection。最后需要使用normalize()函数进行归一化，以保证光线方向矢量的长度为1.0.最后，计算光线方向矢量与法向量的点积，从而算出了每个顶点的颜色。

但是，我们发现逐顶点处理出来的立方体和逐片元处理出来的效果有一定的区别。

上图是逐顶点绘制出来的图形

上图是逐片元绘制出来的效果

发现两个有很大的区别，而且逐片元着色器绘制出来的效果更好，下一节我们使用逐片元处理光源光照效果

http://www.lbrq.cn/news/2796013.html

相关文章：

  • 建设部人才网站九江seo公司
  • 常用的建站工具有哪些电商平台运营方案思路
  • 有什么做设计接任务的网站推广策划方案怎么做
  • 用php做的网站用什么数据库深圳靠谱网站建设公司
  • wordpress横线广州网站优化软件
  • wordpress增加论坛苏州seo公司
  • 诸城网站优化阿里域名购买网站
  • asp艺术学校网站源码济南seo外包服务
  • p2p网站建设价格百度正版下载恢复百度
  • 网站搭建论文app开发平台
  • 地图网站模板做网络推广可以通过哪些渠道推广
  • 如何在网站上做标记圈信息网站怎么优化关键词
  • 制作网站页面怎么做sem管理工具
  • 购物网站建设报价网站快速收录
  • 建设交通职业技术学院招聘信息网站中国科技新闻网
  • 做商城网站哪里买seo技术员
  • 政治工作网站管理建设网站seo推广公司靠谱吗
  • 台州网站搭建电商网站建设
  • 北京网站建设icp有限公司百度推广个人怎么开户
  • 网站服务器试用游戏广告推广平台
  • 自己做网站去哪买服务器seo建站技巧
  • 西安建网站价格免费学生网页制作成品
  • 做网站怎样找湖南搜索引擎推广平台
  • 个人响应式网站建设搜索引擎优化的办法有哪些
  • wordpress侧边栏目录seo单词优化
  • 网站建设的步骤教程下载2023年8月份新冠
  • 宁晋企业做网站广告关键词查询
  • 网站建设新闻发布注意什么怎么制作网站教程手机
  • 怎么自制网站dz论坛seo设置
  • 什么网站可以做项目网站关键词优化排名公司
  • 遥感机器学习入门实战教程｜Sklearn案例⑤：集成学习方法全览
  • 福昕PDF编辑软件高级版下载与详细图文安装教程！！
  • Model Context Protocol (MCP) - 尝试创建和使用一下MCP Client
  • JAVA：MyBatis 核心组件详解的技术指南
  • mycat分库分表实验
  • 告别手写文档！Spring Boot API 文档终极解决方案：SpringDoc OpenAPI