一。认识
1.定义
webgl是一种3D绘图协议，衍生于 OpenGL，可以结合 Html5 和 JavaScript 在网页上绘制和渲染二/三维图形。
2.优点
1.简单便捷，易于学习。
2.在浏览器中，不需要安装任何插件即可运⾏。
3.学习基础
HTML，CSS，JS，物理知识，计算机图形学，数学基础。
4.学习网站web GL中文网
二，入门
1.web GL容器（坐标系）
WebGL容器（或WebGL环境）中的坐标系是理解和操作3D图形时不可或缺的概念。在WebGL中，为了描述物体、场景以及观察者的位置和方向，使用了多种类型的坐标系。这些坐标系在图形的渲染过程中起着至关重要的作用，它们通过一系列的变换矩阵将顶点的坐标从一个空间转换到另一个空间，最终实现3D图形在屏幕上的正确显示。
WebGL中常见的坐标系包括：
- 模型坐标系（Local Space/Object Space）：也称为局部坐标系或物体坐标系，是物体自身的坐标系。在这个坐标系中，物体的顶点位置是相对于物体自身的原点（通常是物体的中心或底部中心）来定义的。模型坐标系是物体最初所在的坐标空间，所有的调整（如位移、旋转、缩放）都是基于这个坐标系进行的。
- 世界坐标系（World Space）：用来描述整个3D场景的坐标系。在这个坐标系中，所有物体的位置都是相对于一个全局的原点（通常是(0, 0, 0)点）来定义的。模型坐标系中的物体通过模型变换（包括位移、旋转、缩放）被放置到世界坐标系中的合适位置。
- 观察坐标系（View Space/Eye Space）：也称为相机坐标系或视觉空间，是从观察者的视角（即相机或人眼）来观察整个3D场景的坐标系。在这个坐标系中，观察者的位置是坐标原点，观察者的视线方向是z轴的正方向。世界坐标系中的物体通过视图变换（即相机变换）被转换到观察坐标系中，以便模拟观察者看到的场景。
- 裁剪坐标系（Clip Space）：裁剪坐标系主要负责限制可视范围，并为后续将3D世界转换成2D图像做准备。在这个坐标系中，通过投影变换（包括正交投影和透视投影）将观察坐标系中的物体映射到一个特定的视锥体内。视锥体之外的物体将被裁剪掉，不会出现在最终的图像中。
- 规范化设备坐标系（NDC, Normalized Device Coordinates）：裁剪坐标系中的坐标经过透视除法后得到的坐标系统，其坐标范围被规范化到[-1, 1]的立方体内。这个坐标系为后续的视口变换（即将3D坐标映射到屏幕上的2D像素）提供了基础。
- 屏幕坐标系（Screen Space）：最终显示图像的坐标系，即用户屏幕上的像素坐标系。规范化设备坐标系中的坐标经过视口变换后，被映射到屏幕坐标系中，形成用户最终看到的图像。
2，web GL渲染管线
WebGL渲染管线（也称为渲染流水线）是一个将3D场景数据转换成2D图像并在屏幕上显示的过程。这个过程主要由GPU（图形处理单元）负责执行，并且高度并行化以提高渲染效率。WebGL渲染管线可以大致分为以下几个阶段：应用阶段，几何阶段，光栅化阶段，测试与混合，帧缓冲区操作。
3，webGL关键名词
- WebGL（Web Graphics Library）：
- WebGL是一种基于OpenGL ES的3D图形编程接口，允许在支持HTML5 Canvas元素的浏览器中渲染3D图形。它不需要任何插件，直接使用JavaScript和HTML5 Canvas元素即可实现。
- 着色器（Shader）：
- 着色器是运行在GPU上的小程序，用于处理图形渲染过程中的顶点或片段数据。WebGL中有两种主要的着色器：顶点着色器（Vertex Shader）和片段着色器（Fragment Shader）。
- 顶点着色器（Vertex Shader）：
- 顶点着色器负责处理图形的顶点数据，包括位置、颜色、纹理坐标等。它执行顶点变换（如模型变换、视图变换和投影变换），将顶点从模型空间转换到裁剪空间。
- 片段着色器（Fragment Shader）：
- 片段着色器负责处理光栅化阶段产生的每个像素（或片段）数据。它计算像素的最终颜色，并可能应用纹理采样、光照和混合等效果。
- 渲染管线（Rendering Pipeline）：
- 渲染管线是一条处理图形数据并生成最终图像的流水线。它包括几何阶段（顶点着色器、图元装配、裁剪等）、光栅化阶段（光栅化、片段着色器等）以及测试与混合阶段（深度测试、混合等）。
- GLSL（OpenGL Shading Language）：
- GLSL是OpenGL的着色器语言，也用于WebGL的着色器编程。它是一种类似于C的编程语言，用于编写顶点着色器和片段着色器程序。
- 缓冲区（Buffer）：
- 缓冲区是WebGL中用于存储顶点数据的内存区域。它可以是顶点坐标、颜色、纹理坐标等数据的集合。缓冲区对象（Buffer Object）是WebGL中用于表示这些缓冲区的对象。
- 纹理（Texture）：
- 纹理是一种图像数据，可以在WebGL中用于映射到3D模型表面，以提供详细的视觉效果。纹理可以是颜色、图像或其他数据类型。
- 投影矩阵（Projection Matrix）：
- 投影矩阵用于将3D场景中的坐标转换到裁剪空间中。常见的投影类型包括正交投影（Orthographic Projection）和透视投影（Perspective Projection）。
- 模型视图矩阵（Model-View Matrix）：
- 模型视图矩阵是模型矩阵和视图矩阵的乘积。模型矩阵用于描述物体的位置和姿态，而视图矩阵用于描述相机的位置和朝向。模型视图矩阵将顶点从模型空间转换到观察空间。
- 光栅化（Rasterization）：
- 光栅化是将图元（如三角形）转换为屏幕上像素的过程。它涉及三角形的遍历和插值，以确定每个像素的颜色和深度值。
- 深度测试（Depth Testing）：
- 深度测试是一种确定像素是否应该被绘制在屏幕上的技术。它通过比较当前像素的深度值与已绘制像素的深度值来决定是否绘制当前像素。
- 混合（Blending）：
- 混合是一种将当前像素颜色与已绘制在屏幕上的像素颜色进行合并的技术。它用于实现透明效果和其他视觉特效。
4.实例：鼠标动态绘制点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebGL Mouse Draw Points</title> </head> <body> <canvas id="webglCanvas" width="800" height="600"></canvas> <script src="path/to/webgl-utils.js"></script> <script src="draw-points.js"></script> </body> </html>
// 获取canvas和WebGL上下文 const canvas = document.getElementById('webglCanvas'); const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); // 顶点着色器代码 const vertexShaderSource = ` attribute vec2 a_position; void main() { gl_Position = vec4(a_position, 0.0, 1.0); gl_PointSize = 10.0; } `; // 片元着色器代码 const fragmentShaderSource = ` precision mediump float; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色 } `; // 创建着色器、程序对象等（这里省略了详细过程，只展示关键步骤） const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(fragmentShader); const shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); gl.useProgram(shaderProgram); // 获取顶点属性位置 const aPosition = gl.getAttribLocation(shaderProgram, 'a_position'); // 初始化缓冲区（这里先不填充数据，在鼠标事件中填充） let pointBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(aPosition); // 监听鼠标事件 let points = []; canvas.addEventListener('mousedown', function(e) { const rect = canvas.getBoundingClientRect(); const x = (e.clientX - rect.left) / canvas.width * 2 - 1; const y = -(e.clientY - rect.top) / canvas.height * 2 + 1; points.push(x, y); // 更新缓冲区数据并绘制 const pointData = new Float32Array(points); gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer); gl.bufferData(gl.ARRAY_BUFFER, pointData, gl.DYNAMIC_DRAW); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.POINTS, 0, points.length / 2); });
扫一扫
1044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
