- 博客(11)
- 收藏
- 关注
原创 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
原创 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
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人