Sifatasinant-CSDN博客

原创 WebGL实践篇（十）—— 光照：聚光灯

1.聚光灯的实现光线从某个点照亮所有方向，而聚光灯只选择其中一个方向，将其他光线方向与所选方向点乘并选择限定范围，判断光线是否在限定范围内，如果不在则不照亮。首先给定一个点乘限定，如果与选定聚光灯方向的点乘大于这个点乘限定，则照亮，否则不照亮。片段着色器： <script id="fragment-shader-3D" type="x-shader/x-fragment"> precision mediump float; varying vec3 v.

2022-05-09 10:52:44 638

原创 WebGL实践篇（九）—— 光照：点光源

1.点光源的光照值光照来源于点，太阳也算是一个点光源，光照射到物体的同一面上有明有暗（即光照值不同），将面上的每个点到光源的矢量与法向量点乘得到的值就是光照值。顶点着色器：主要添加了光照位置的参数，并将顶点着色器中求出来的光照向量传值给着色器进行渲染。 <script id="vertex-shader-3D" type="x-shader/x-vertex"> attribute vec4 a_position; attribute vec3 a_norma

2022-04-27 16:53:19 903

原创 WebGL实践篇（八）—— 光照：方向光源（均匀的光）

1.物体如何加入光照参数光照均匀的光线，日照光相当于是平行于照在地面上的方向光，将方向光的向量与物体面的法向量点成即能得到两个方向的余弦值，结果为-1则方向相反，反之则方向相同。那么我们就可以知道，方向相同时（打光打在物体上，物体朝向正好在打光方向）那么物体就能被看见（明面），方向相反时（打光打在物体上，物体背对打光方向）这样物体就呈现出它的暗面。想想一幅素描画中物体的明暗面跟阴影投射就大概能理解了。2.物体面的法向量：正方体的每个顶点有三个法向量，正x方向向右，正y方向向上，正z方向向里。以F

2022-04-26 14:01:07 881

原创 WebGL实践篇（七）三维相机及视图矩阵

一般来说，物体的位置是固定不动的，而我们的日常做法是将移动相机到合适的位置去拍摄这个物体（总不能把风景吸星大法过来，对它说自己过来站好拍照）。但是，在咱们这个三维空间里是有视锥体的范围，你随便移动相机那就可能要重新调节视锥体的参数，这样反而会更麻烦。因此一般来说在三维空间当中，相机应该是相对不变的。根据相机的位置再去对物体做一系列的变换。1.相机矩阵： var radius = 200; var cameraMatrix = m4.yRotation(cameraAngle

2022-04-25 11:13:19 1303

原创 WebGL实践篇（六）透视投影下的三维图形及其投影矩阵

一透视投影的实现我们日常观看三维物体的方式就是透视投影，而透视投影符合“近大远小”的原则，那该如何实现呢？方法就是将裁剪控件中的X和Y除以Z即可。Z就是深度值，也就是说距屏幕的远近。随着Z值变大X和Y的值就会变小，那么绘制出来的图形也会变小，距离也就变远了。那Z值的范围是-1到1，如何控制距离远近呢？就可以利用一个因子factor与Z相乘来控制距离啦。二透视投影在顶点着色器中的体现1.将factor因子加入到着色器当中 <script id="vertex-shader-3D"

2022-04-21 15:01:16 911

原创 WebGL 实践篇（五）三维图形的绘制及矩阵变换、正射投影

一三维“F”的绘制1.着色器按照上一篇提到的矩阵变换，我们可以直接在顶点着色器中加入相应的矩阵变换，这样就可以简化着色器代码，通过变量传入矩阵的值也便于之后矩阵变换的修改。三维图形的绘制相比于二维图形只在参数类型上有一些变化（注意vec4以及mat4）： <script id="vertex-shader-3D" type="x-shader/x-vertex"> attribute vec4 a_position; uniform mat4 u_matr

2022-04-19 17:15:14 816

原创 WebGL 实践篇（四）二维矩阵

一将三个变换集合成为一个矩阵平移、旋转、缩放的变换还受先后顺序的影响，执行顺序不同，则得到的结果也不同。用一个矩阵来代表三个变换（原理就不放在实践篇了，可自行扒原理） var m3 = { translation: function (tx, ty) { return [ 1, 0, 0, 0, 1, 0, tx, ty, 1 ] }, rotation: f

2022-04-15 16:20:04 571

原创 WebGL 实践篇（三）—— 二维图形的平移、旋转、缩放

一平移（1）平移直接体现在代码当中在二维当中，平移相当于就是改变x,y的位置。 function setRectangle(gl, x, y, width, height) { var x1 = x; var x2 = x + width; var y1 = y; var y2 = y + height; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ x1,

2022-03-29 16:19:44 1641

原创 WebGL 实践篇（二）—— 屏幕坐标与裁剪坐标，片段着色器中的颜色定义

一裁剪坐标系、canvas坐标系以及屏幕坐标系裁剪坐标（WebGL坐标系）的范围：（-1，1），原点在中间，x正值向右，y正值向上屏幕坐标：原点在左上角，x正值向右，y正值向下canvas坐标：与屏幕坐标相比，原点向右向下偏移，x,y正值方向不变参考：(26条消息) WebGL屏幕坐标系、canvas坐标系和WebGL坐标系转换——学习笔记_ponGISer的博客-CSDN博客https://blog.csdn.net/u011332271/article/details/110477

2022-03-28 14:16:16 1849

原创 WebGL 实践篇（一）—— 绘制一个三角形

WebGL初学：绘制三角形

2022-03-25 16:57:59 1424

原创 html系列——（一）基础知识

本文参考黑马程序员的视频教程，视频地址：Html5+Css3+移动Web_前端入门教程，Web前端教程_零基础前端视频教程_哔哩哔哩_bilibili（1）简介1.网站与网页（.htm .html）的关系2.HTML（超文本标记语言，Hyper Text Markup Language）-- 标签语言3.浏览器内核（渲染殷勤）：浏览器内核备注 IE Trident IE、猎豹、360、百度 firefox Gecko 火狐 Safar.

2021-10-13 22:46:28 190

weixin_44207506的博客