gghhb12的博客

传统的pc屏幕，1个物理像素就等于1个逻辑像素。当然，我们描述一个图片占的小格子数总不能一个个地数小格子吧，图片是矩形，因此常常描述一个图片尺寸时就说多少乘多少像素，像素就是小格子，比如一张图片的尺寸是 300 * 300 像素，也就是说该图片的长、宽都有300个小格子，该图片一共占 300 * 300 = 90000 个小格子。css像素适用于web编程，指的是我们在前端样式代码中使用到的逻辑像素，是逻辑像素的一种，默认情况下，web页面的缩放比为100%，那么，1css像素=1逻辑像素=1物理像素。

一、雾化WEBGL中的雾化是一种视觉效果，可以模拟远处物体出现“雾气”或“烟雾”等效果，使场景更加真实。雾化可以让场景中的物体看起来模糊或透明，从而创建出一种深度感和距离感，增强场景的立体感。WEBGL中的雾化通常使用线性或指数函数来计算出物体的深度，然后根据深度来进行颜色和透明度的调整，从而实现雾化效果。调整透明度的方式有多种，例如将物体的alpha值进行平滑过渡，或者使用特定的shader程序来自定义透明度的计算方式。在实际的WEBGL应用中，雾化可以被用于增强场景的真实感，同时也可以用于创建特定

WebGL中的光与现实世界中的光类似，是一种物理光线模拟。WebGL使用光线追踪算法来模拟光在3D场景中的反射、折射和散射等现象，以实现逼真的光影效果。在WebGL中，光源是光的来源，可以模拟不同类型的光源，如平行光、点光源、聚光灯等。光线从光源发出，经过场景中的各个物体后，被摄像机捕捉，生成最终的渲染图像。通过调整光源的位置、颜色、强度等参数，可以在WebGL中实现不同的光影效果，如明暗对比、高光反射、镜面反射等。这些光影效果可以增强3D场景的真实感和表现力。

webGL坐标系统，x沿水平方向从左到右，y垂直向上，z指向屏幕向外这些都是正方向canvas坐标系统，z，x一样，但是y是向下的。浏览器坐标系，x，是向左、y是向下的。tip: 鼠标点击的是浏览器的坐标系统，要先转换为Canvas的坐标系统，也就是0点是不一致的。然后就是webGL的坐标要进行归一化。同时把原点切换到Canvas的中心。网格：就是有一个或多个多边形拼接而成的，网格只能确定形状不能确定色彩和明暗等多边形：多指三角形和四边形模型：也就是3D的网格的别名顶点：就是定义多边形位置的3D

在WebGL中，varying变量是在顶点着色器和片元着色器之间传递数据的一种特殊类型的变量。它们被用于在顶点着色器和片元着色器之间传递信息，以便在渲染过程中进行插值。在顶点着色器中，varying变量的值被计算并传递到片元着色器中，然后在片元着色器中进行插值，然后被用来确定要绘制的像素的颜色。Varying变量通常被用于将光照和纹理坐标等信息从顶点着色器传递到片元着色器中。由于它们是在渲染过程中插值的，所以它们可以用来创建平滑的过渡，使得渲染出来的图像更加真实和细腻。

缓冲区对象时WebGL系统中的一块内存区域，可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存其中，供顶点着色器使用。//为什么要用uniform-因为要对所有的顶点实现同样的变换。//要绘制的大小(着色器变量使用的是浮点型)//要绘制的大小(着色器变量使用的是浮点型)//要绘制的大小(着色器变量使用的是浮点型)//要绘制的大小(着色器变量使用的是浮点型)data表示需要写入到缓冲区的顶点数据，如程序中的points。//BYTES*3,BYTES*2 就是数据偏移量。

WebGL，是一项用来在网页上绘制和渲染复杂三维图形，并允许用户与之进行交互的技术。WebGL通过JavaScript操作OpenGL接口的标准，把三维空间图像显示在二维的屏幕上。