WebGL初级 : 在鼠标点击处绘制一个随机颜色的点。

最新推荐文章于 2024-04-02 10:26:13 发布

Ever-Bright

最新推荐文章于 2024-04-02 10:26:13 发布

阅读量907

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习了文章标签： webGL 前端开发 JavaScript JS canvas

本文链接：https://blog.youkuaiyun.com/qq_38931004/article/details/89214065

参考资料

通过对《webGL入门与实践》一书为期一周的学习，仿照书中案例，终于写出了一个基本的webGL程序，也算掌握了webGL的基本绘制过程…

涉及到的相关术语解释：

本篇内容涉及一些术语，为了便于理解，以下是对涉及到的几个相关术语的简单解释：

图元：WebGL 能够绘制的基本图形元素，包含三种：点、线段、三角形。

片元：可以理解为像素，像素着色阶段是在片元着色器中。

裁剪坐标系：裁剪坐标系是顶点着色器中的 gl_Position 内置变量接收到的坐标所在的坐标系。

设备坐标系：又名 NDC 坐标系，是裁剪坐标系各个分量对 w 分量相除得到的坐标系，特点是 x、y、z 坐标分量的取值范围都在 [-1 , 1]之间，可以将它理解为边长为 2 的正方体，坐标系原点在正方体中心。

目标

实现一个简单的 WebGL 程序：鼠标点击一次，就会在点击位置处绘制一个随机颜色的点。麻雀虽小，但五脏俱全，使用 WebGL 绘制一个点虽然简单，但是它仍需要 JavaScript 程序和着色器程序共同完成。
所以通过这个例子，能够基本掌握 WebGL 的绘制过程。
效果如下：
在这里插入图片描述

编写程序

1、准备着色器源码

从着色器程序开始入手，先用GLSL编写顶点着色器和片元着色器。

顶点着色器

void main(){
   
   
    //声明顶点的位置
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
    //声明待绘制点的大小。
    gl_PointSize = 10.0;
}

片元着色器

void main(){
   
   
    //设置像素的填充颜色为红色。
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 
}

至此，我们完成了着色器的开发，是不是灰常 easy 呢？

2、准备 HTML 文件

HTML 文件至少需要包含一个 canvas 标签，另外需要两个存储着色器源码的 script 标签。

<body>
	<!-- 顶点着色器源码 -->
	<script type="shader-source" id="vertexShader">
	 void main(){
    
    
  		//声明顶点位置
  		gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
  		//声明要绘制的点的大小。
  		gl_PointSize = 10.0;
  	}
	</script>
	
	<!-- 片元着色器源码 -->
	<script type="shader-source" id="fragmentShader">
	 void main(){
    
    
	 	//设置像素颜色为红色
		gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 
	}
	</script>
	
	<canvas id="canvas"></canvas>