计算机图形学

计算机图形学

计算机图形学

记录webgl学习的一些教程

等 8 人订阅共63篇文章创建于2023-04-19

webgl扩展系列之二--------------------ANGLE_instanced_arrays(实例化绘制)

一.介绍 ANGLE_instanced_arrays 扩展是一种用于实现WebGL中实例化渲染的扩展。实例化渲染允许您在单个绘制调用中多次使用相同的几何体，并对每个实例应用不同的属性（如颜色、位置、

2年前
614
点赞
评论

webgl扩展系列之一------------OES_vertex_array_object

一.扩展介绍 OES_vertex_array_object 是一个WebGL扩展，用于引入顶点数组对象（VAO），以便更有效地组织和管理顶点属性数据和状态。顶点数组对象（VAO）是一种用于存储和管

2年前
219
点赞
评论

webgl常用扩展介绍

1. OES_texture_float OES_texture_float 是WebGL的一个扩展，它允许在片段着色器中使用浮点数纹理。这对于需要更高精度计算的图形处理任务非常有用，因为标准的8位或

2年前
519
点赞
评论

webgl 1.0中一些不常用函数学习

一、关于Buffer Objects 1.1 bufferSubData 在OpenGL中，gl.bufferSubData 函数用于更新一个已经创建的缓冲区对象（Buffer Object）的子区

2年前
445
点赞
评论

屏幕空间反射

屏幕空间反射（Screen Space Reflection，简称 SSR）是一种实时计算图形渲染中物体表面反射效果的技术。它主要用于在游戏和实时渲染应用中实现更高质量的反射效果。SSR 的核心思想是

2年前
1.2k
点赞
评论

webgl学习之getContext函数详解

用法: 参数介绍 contextType取值如下: "2d"开始创建CanvasRenderingContext2D对象，该对象表示二维渲染上下文。 “webgl”（或“experimental-we

2年前
227
点赞
评论

webgl学习之模板缓冲区

一、介绍一个模板缓冲中，（通常）每个模板值(Stencil Value)是8位的。所以每个像素/片段一共能有256种不同的模板值。我们可以将这些模板值设置为我们想要的值，然后当某一个片段有某一个模板

2年前
569
1
评论

2023-04-12------------------视锥体剔除

一、首先实现面与包围球的关系计算 1.1、三点定义一个平面，并实现点到平面的距离计算 1.2、在每一帧中，获取视锥体的世界坐标 1.2、每一帧下根据世界坐标计算视锥体六个面 1.4、计算每一个面与包围

2年前
89
点赞
评论

2023-03-22---webgl绘制坐标轴和视锥体

一、绘制结果如图所示，其中红色为x轴，绿色为y轴，蓝色为z轴，原点位于地球表面，地球也向里偏移一个地球半径白色为视锥体，其中视锥体已向里偏移一个地球半径,地球也向里偏移一个地球半径，这样视锥体与

2年前
291
点赞
评论

2023-03-17--------------------包围球计算的两种方式

一、均值法我们将所有的顶点相加，然后除以顶点数，这样就能得到一个球心的位置了，然后将所有顶点位置减去球心位置，取最大值，得到半径二、Ritter方法首先我们分别找到这个模型在x，y，z正负六个

2年前
219
点赞
评论

2023-04-10 glsl将屏幕坐标转换为世界坐标

``` vec3 calcWorldNormal(vec2 screenCoord, float depth, mat4 invProjMat, mat4 invViewMat) { // 转换为裁剪

2年前
73
点赞
评论

2022-10-18-------------实现有倒影的水

一、原理 1.实现环境贴图和漫反射 2.利用法线贴图对环境贴图进行干扰，让环境贴图有扭曲的效果 3.利用环境贴图代替漫反射的基础色二、效果三、代码

2年前
275
点赞
评论

2022-10-12-------------------webgl实现简单的法线贴图

一、思路 1.将法线x,y,z三个分量存储在法线贴图存储在r，g，b三个通道中 2.利用模型的切线T和法向量N（模型的真正法线）计算副切线构建TBN矩阵 3.从法线贴图中rgb值转化到-1到1，即为切

2年前
85
点赞
评论

2022-10-17-------------------------环境映射

一、原理 1.1 、反射反射这个属性表现为物体（或物体的一部分）反射它周围环境，即根据观察者的视角，物体的颜色或多或少等于它的环境。镜子就是一个反射性物体：它会根据观察者的视角反射它周围的环境。反

2年前
128
1
评论

2023-03-15 webgl绘制影像瓦片

一、结果二、代码根据瓦片行列号计算单个瓦片范围构建mesh 调用代码,实现瓦片的轮流加载，展示效果

2年前
90
点赞
评论

2022-11-02------webgl绘制圆形点

一、原理 1.绘制圆形点，计算到圆心的距离 2.绘制球背面剔除 3.开启多边形偏移解决球遮挡点问题二、效果三、代码

2年前
80
点赞
评论

2023-02-03----webgl绘制粗线

一、原文 Drawing Lines is Hard (svbtle.com) 二、翻译绘制线条听起来可能不像火箭科学那么高科技，但在OpenGL中很难做到，尤其是WebGL。在这里，我探索了一些不

2年前
304
点赞
评论

webgl学习四--绘制彩色三角形

## 一、代码 ```html <html> <head> <title> 使用顶点缓冲区 </title> <script type="text/javas

2年前
64
点赞
评论

webgl学习二--从外部向着色器传值

<head> <title> webgl程序之从外部向着色器传值 </title> <script type="text/jav

2年前
96
点赞
评论

2022-10-25---------------阴影贴图

一、原理实现阴影的基本思想是：太阳看不见阴影。如果在光源处放置以为观察者，其视线方向与光线一致，那么观察者也看不到阴影。他看到的每一处都在光的照射下，而那些背后的，他没有看到的物体则处在阴影中。这里

2年前
44
点赞
评论