经验首页
WebGL可视化学习：如何用WebGL绘制3D物体
在之前的文章中，我们使用WebGL绘制了很多二维的图形和图像，在学习2D绘图的时候，我们提过很多次关于GPU的高效渲染，但是2D图形的绘制只展示了WebGL部分的能力，WebGL更强大的地方在于，它可以绘制各种3D图形，而3D图形能够极大地增强可视化的表现能力。 相信很多小伙伴都对此有所耳闻，...[2024/7/12]
我用WebGL打造了一款动态壁纸
我用WebGL打造了一款动态壁纸 简述 最近在给自己电脑换壁纸的时候发现了一张很有特点的图（就是下面这张），于是我突发奇想，要是能把这张图变成一张动态的壁纸。那该多好。于是我打算用threejs开发一个3D的动态壁纸网页。 相关技术 Vite+Vue、Threejs、TwinSpace(我...[2023/7/31]
【WebGL系列-01】获取WebGL上下文
获取WebGL上下文 获取上下文 WebGL上下文是从<canvas>标签中获取到的，通过canvas对象的getContext()函数可以获取WebGLRenderingContext。 跟据参数的不同，getContext()函数可以获取不同种类的渲染上下文。 接口 canv...[2023/7/24]
打造原生 WebGL 2D 引擎：一场创意与技术的融合
打造原生 WebGL 2D 引擎：一场创意与技术的融合 1.引言 在当今数字化时代，网页的功能越来越丰富，已经远远超越了传统的文本和图片呈现。我们生活在一个充满交互性和视觉魅力的网络世界。每天都会遇到许多令人惊叹的网页效果和动画。作为一个Web3D图形的开发，希望可以通过网页来实现更多强大的功能...[2023/7/24]
webgl 系列 —— 渐变三角形
其他章节请看： webgl 系列 渐变三角形 本文通过一个渐变三角形的示例逐步分析：varying变量、合并缓冲区、图形装配、光栅化、varying 内插 绘制三个点v1 需求：绘制三个相同颜色的点，效果如下： 通过三角形的学习，这个需求非常容易实现。代码如下： const...[2023/3/15]
WebGL 与 WebGPU 比对[1] 前奏
目录1 为什么是 WebGPU 而不是 WebGL 3.0显卡驱动图形 API 的简单年表WebGL 能运行在各个浏览器的原因WebGPU 的名称由来2 与 WebGL 比较编码风格OpenGL 的编码风格CPU 负载问题WebGPU 的装配式编码风格厨子戏法3 多线程与强大的通用计算（GPGP...[2022/1/17]
WebGL简易教程(十二)：包围球与投影
目录 1. 概述 2. 实现详解 3. 具体代码 4. 参考 1. 概述 在之前的教程中，都是通过物体的包围盒来设置模型视图投影矩阵（MVP矩阵），来确定...[2019/11/11]
WebGL简易教程(十一)：纹理
目录 1. 概述 2. 实例 2.1. 准备纹理 2.2. 配置纹理 2.3. 使用纹理 3. 结果 4. 参考 ...[2019/10/16]
WebGL简易教程(十)：光照
目录 1. 概述 2. 原理 2.1. 光源类型 2.2. 反射类型 2.2.1. 环境反射(enviroment/ambient reflection) ...[2019/10/14]
WebGL简易教程(九)：综合实例：地形的绘制
目录 1. 概述 2. 实例 2.1. TerrainViewer.html 2.2. TerrainViewer.js 3. 结果 4...[2019/10/9]
基于 HTML5 WebGL 的垃圾分类系统
前言 垃圾分类，一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运，从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值，力争物尽其用。垃圾在分类储存阶段属于公众的私有品，垃圾经公众分类投放后成为公众所在小区或社区的区域性准公共资源，垃圾分类搬运到垃...[2019/10/8]
WebGL简易教程(五)：图形变换(模型、视图、投影变换)
目录 1. 概述 2. 详论 1) 模型变换 (1) 平移变换 (2) 缩放变换 (3) 旋转变换 (4) 组合变换 ...[2019/10/8]
WebGL简易教程(六)：第一个三维示例(使用模型视图投影变换)
目录 1. 概述 2. 示例：绘制多个三角形 2.1. Triangle_MVPMatrix.html 2.2. Triangle_MVPMatrix.js 2.2.1....[2019/10/8]
WebGL简易教程(七)：绘制一个矩形体
目录 1. 概述 2. 示例 2.1. 顶点索引绘制 2.2. MVP矩阵设置 2.2.1. 模型矩阵 2.2.2. 投影矩阵 2.2.3...[2019/10/8]
WebGL简易教程(八)：三维场景交互
目录 1. 概述 2. 实例 2.1. 重绘刷新 2.2. 鼠标事件调整参数 3. 结果 4. 参考 1....[2019/10/8]
WebGL简易教程(四)：颜色
目录 1. 概述 2. 示例：绘制三角形 1) 数据的组织 2) varying变量 3. 结果 4. 理解 1) 图形...[2019/9/16]
WebGL简易教程(三)：绘制一个三角形(缓冲区对象)
目录 1. 概述 2. 示例：绘制三角形 1) HelloTriangle.html 2) HelloTriangle.js 3) 缓冲区对象 (1) 创...[2019/9/10]
WebGL2系列之采样器对象
前言 在WebGL1中，纹理的图片和采样信息都是写在纹理对象之中. 采样信息告诉GPU如何去读取贴图上图片的信息。 如果我们希望从同一个图片多次读取像素信息，但是每次读取的时候使用的过滤方式不一样, 此时我们需要创建两个不同的纹理对象。 "你说这样是不是很烦啊&qu...[2019/9/10]
WebGL简易教程(二)：向着色器传输数据
目录 1. 概述 2. 示例：绘制一个点(改进版) 1) attribute变量 2) uniform变量 3) varying变量 3...[2019/8/12]
WebGL之物体选择
原文地址: WebGL之物体选择 使用WebGL将图形绘制到画布后，如何与外部进行交互？这其中最关键的就是如何实现物体的选择。比如鼠标点击后判断是否选中了某个图形或图形的某个部分。 本节实现的效果: WebGL选中物体 如何实现选中物体 颜色区分法 《WebGL编程指南》中提出了一个原理很...[2019/5/30]
WebGL学习之HDR与Bloom
什么是HDR HDR (High Dynamic Range，高动态范围)，在摄影领域，指的是可以提供更多的动态范围和图像细节的一种技术手段。简单讲就是将不同曝光拍摄出的最佳细节的LDR (低动态范围) 图像合成后，就叫HDR，它能同时反映出场景最暗和最亮部分的细节。为什么需要多张图片？因为目前的...[2019/5/22]
WebGL学习之纹理盒
我们之前已经学习过二维纹理 gl.TEXTURE_2D，而且还使用它实现了各种效果。但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP，它包含了6个纹理代表立方体的6个面。不像常规的纹理坐标有2个纬度，立方体纹理使用法向量，换句话说三维方向。本节实现的demo请看 天空盒 根据法向...[2019/5/7]
WebGL学习之法线贴图
实际效果请看demo：纹理贴图 为了增加额外细节，提升真实感，我们使用了漫反射贴图和高光贴图，它们都是向三角形进行附加纹理。但是从光的视角来看是表面法线向量使表面被视为平坦光滑的表面。以光照算法的视角考虑的话，只有一件事决定物体的形状，那就是垂直于它的法线向量。砖块表面只有一个法向量，表面完...[2019/5/5]
WebGL半透明物体的绘制
WebGL 中当透明和半透明物体共存时，相关设置不正确的话，物体表面会出现破碎杂乱的断面，非常影响效果，我们接着就来解决这个问题。 完成的展示Demo请看: 半透明物体和透明物体共存 α 混合 让物体实现半透明效果需要用到颜色的α分量。该功能被称为a混合(alpha blending) 或 ...[2019/5/5]
WebGL学习之纹理贴图
为了使图形能获得接近于真实物体的材质效果，一般会使用贴图，贴图类型主要包括两种：漫反射贴图和镜面高光贴图。其中漫反射贴图可以同时实现漫反射光和环境光的效果。 实际效果请看demo：纹理贴图 2D纹理 实现贴图就需要用到纹理，常用的纹理格式有：2D纹理，立方体纹理，3D纹理。我们使用最基本的...[2019/4/30]
WebGL学习教程之Three.js学习笔记(第一篇)
webgl介绍 WebGL是一种3D绘图协议，它把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。 WebGL技术标准免去了开发网页专用渲染插件的麻烦...[2019/4/26]
WebGL three.js学习笔记之阴影与实现物体的动画效果
实现物体的旋转、跳动以及场景阴影的开启与优化 本程序将创建一个场景，并实现物体的动画效果 运行的结果如图： 运行结果 完整代码如下： <!DOCTYPE html> <html lang="en"> ...[2019/4/26]
WebGl 利用缓冲区对象画多个点
效果： 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <...[2019/4/1]
WebGl 利用drawArrays、drawElements画三角形
效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>We...[2019/4/1]
WebGl 二维纹理贴图(矩形)
效果： 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5...[2019/4/1]
WebGl 多缓冲区传递颜色和坐标（矩形）
效果： 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <...[2019/4/1]
纯Shading Language绘制HTML5时钟
搞个HTML5版的时钟就是我们今天要完成的任务，实现HTML5的时钟绘制一般会采用三种方式，第一种采用CSS的实现方式，例如 http: www.c -tricks.com/example CSS3Clock/ ；第二种采用SVG的实现方式，例如 http: www.c -tricks.com/e...[2018/12/11]
WebGL模型拾取——射线法二
这篇文章是对射线法raycaster的补充，上一篇文章主要讲的是raycaster射线法拾取模型的原理，而这篇文章着重讲使用射线法要注意的地方。首先我们来看下图。 我来解释一下上图中的originTriangle，这就是Triangle2三角形第一次绘制在空间中的位置，而Triang...[2018/11/19]
WebGL模型拾取——射线法
今天要把WebGL中一个非常重要的算法记录下来——raycaster射线法拾取模型。首先我们来了解一下为什么要做模型拾取，我们在做webgl场景交互的时候经常要选中场景中的某个模型，比如鼠标拖拽旋转，平移。为了能做到鼠标交互，就首先要能选中场景中的模型对象，这就要用到模型拾取算法，本文仅讨论射...[2018/11/17]
皖公网安备34020702000426号