- 博客(7)
- 资源 (2)
- 收藏
- 关注
RSS订阅翻译 WebGL - 示例 从文件中加载并使用不同着色器
因为对不同的场景以及不同的材质需要使用不同的着色器，因此需要使用多个着色器，而不是单个，单个着色器是无法绘制出很复杂的场景，因为有的物体没有纹理而有的有纹理以及别的效果1、外部文件加载着色器着色器语言就是 GLSL格式的代码，我们可以先把顶点和片元着色器分别写在.glsl后缀名的文件中，如果你的编译器支持这种语法检测，那么代码就会有颜色，而不仅仅是字符串样式显示，尽管着色器代码本身就是字符串...
2019-07-18 13:55:26
1710
翻译 WebGL - 示例 α 混合透明效果
颜色的中的α分量控制着颜色的透明度，在webgl实现透明效果需要用到α混合，因为webgl已经内置了该功能因此开启即可示例：透明混合开启混合开启混合功能 - gl.enable(gl.BLEND)指定混合函数 - gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)混合函数在进行α混合时，实际上webgl用到了两个颜色，即 源颜色和 ...
2019-07-12 15:37:40
1653
翻译 WebGL - 示例 绘制圆形点
之前绘制的点都是正方形的，类似一个像素点，那怎么才能把方点绘制成圆点，顶点着色器和片元着色器之间发生了光栅化过程，一个顶点被光栅化为了多个片元，每一个片元都会经过片元着色器处理，直接绘制就是方形的点，要绘制圆形的点就需要把多余的片元给削去;将矩形削成圆形需要知道每个片元在光栅化过程中的坐标，在片元着色器中通过 **内置变量 gl_FragCoord**来访问片元的坐标，还可以通过另一个 **内...
2019-07-08 17:05:58
2133
3
翻译 WebGL - 示例 添加雾化效果
在三维图形学中， 雾化用来描述远处的物体看上去较为模糊的现象。示例：雾化效果实现雾化的方式有很多种，这里最简单的一种就是 线性雾化，在线性雾化中，某一点的雾化程度取决于它与视点之间的距离，距离越远雾化程度越高，线性雾化有起点和终点，起点表示雾化开始之处，终点表示完全雾化之处，两点之间某一点的雾化程度与该点的距离呈线性关系比终点更远的点完全雾化了，即完全看不到东西，某一点的雾化的程度可以定义...
2019-07-08 14:27:08
1311
翻译 WebGL - 示例 点击物体改变背景色
再threejs中是通过射线检测THREE.Raycaster()这个对象，来获取点击的对象，这个示例是走了个捷径，通过对比物体的颜色和点击处的像素值，来检测是否点击了物体，下面是示例效果示例：点击物体改变背景色，并实时检测旋转角度主要示例代码<!DOCTYPE html><html lang="en"><head> <meta cha...
2019-07-04 17:55:14
1358
翻译 WebGL - 示例 通过鼠标操作物体
案例实现功能如下：鼠标左右键点击实现旋转滑动滑轮实现缩放首先物体的旋转是通过对模型矩阵的旋转计算modelMatrix.rotate(angle, x, y, z)这个方法可以让物体绕某个轴进行旋转多少度，进而变换顶点坐标，normalMatrix、mvpMatrix...都是可以进行一些列的矩阵变换的，计算过后在清空颜色缓存以及深度缓存，重新绘制页面；因此使用鼠标去控制物体就是通过监...
2019-07-03 11:05:55
2489
翻译 WebGL - 着色器初始化流程
之前对着色器的初始化都是使用的initShaders()这个方法，这个的代码在最后，其内部分执行细节没有去清晰的了解过，下面做进一步的了解和分析，才能更深入的了解webgl的原理initShaders()方法的主要作用是编译GLSL ES代码，创建和初始化着色器，以便供WebgGL使用，具体初始化分为以下七步；1、创建着色器对象gl.createShader()2、向着色器对象中填充着色器...
2019-07-01 17:44:43
1253
glsl_fire.rar
2020-11-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人