(精华)2020年6月29日 WebGL 绘制点
【摘要】
静态版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
&...
静态版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绘制一个点</title>
<!-- //顶点着色器 shader vertex-->
<script type='x-shader/x-vertex' id='shader-vs'>
void main(){
gl_Position=vec4(0.5,0.0,1.0,1.0);
gl_PointSize=20.0;
}
</script>
<!-- // 范围： 0 - 1 -->
<!-- 片元着色器 -->
<script type='x-shader/x-fragment' id='shader-fs'>
void main(){
gl_FragColor=vec4(0.5,0.0,0.0,1.0);
}
</script>
</head>
<body>
<!-- style="width:400px;height:400px" 不要这样-->
<canvas id="webgl" width="400" height="400"></canvas>
<script>
//1. 获取webgl
var canvas = document.getElementById('webgl');
var gl = canvas.getContext('webgl');
gl.clearColor(0.5, 0.5, 0.5, 1.0); //rgba - 0 - 0 1 - 255
gl.clear(gl.COLOR_BUFFER_BIT);
//1. 初始化着色器 ,方式一
var vs_source = document.getElementById('shader-vs').innerHTML,
fs_source = document.getElementById('shader-fs').innerHTML;
//方式二：
// var vs_source = `
// void main(){
// gl_Position=vec4(0.5,0.0,1.0,1.0);
// gl_PointSize=80.0;
// }
// `;
// var fs_source = `
// void main(){
// gl_FragColor=vec4(0.0,0.0,0.0,1.0);
// }
// `;
//2 创建顶点着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
//绑定资源
gl.shaderSource(vertexShader, vs_source);
//编译顶点着色器
gl.compileShader(vertexShader);
//. 2 创建片段着色器
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
// 绑定资源
gl.shaderSource(fragmentShader, fs_source);
// 编译片段着色器
gl.compileShader(fragmentShader);
// 3.创建一个着色器程序
var glProgram = gl.createProgram();
gl.attachShader(glProgram, vertexShader); //把顶点着色器添加到着色器程序
gl.attachShader(glProgram, fragmentShader); //把片元着色器添加到着色器程序
// 4.把着色器程序链接成一个完整的程序
gl.linkProgram(glProgram);
gl.useProgram(glProgram);
gl.drawArrays(gl.POINTS, 0, 1);
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
动态版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绘制一个点</title>
</head>
<body>
<!-- style="width:400px;height:400px" 不要这样-->
<canvas id="webgl" width="400" height="400"></canvas>
<script>
//1. 获取webgl
var canvas = document.getElementById('webgl');
var gl = canvas.getContext('webgl');
// gl.clearColor(0.5,0.5,0.5,1.0); //rgba - 0 - 0 1 - 255
// gl.clear(gl.COLOR_BUFFER_BIT);
//1. 初始化着色器 ,方式一
//方式二：
//顶点
var vs_source = `
attribute vec4 a_Position;
attribute float a_PointSize;
void main(){
gl_Position=a_Position;
gl_PointSize=a_PointSize;
}
`;
// vec4(0.5,0.0,1.0,1.0)
//片元
var fs_source = `
void main(){
gl_FragColor=vec4(0.5,0.0,0.0,1.0);
}
`;
//2 创建顶点着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
//绑定资源
gl.shaderSource(vertexShader, vs_source);
//编译顶点着色器
gl.compileShader(vertexShader);
//. 2 创建片段着色器
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
// 绑定资源
gl.shaderSource(fragmentShader, fs_source);
// 编译片段着色器
gl.compileShader(fragmentShader);
// 3.创建一个着色器程序
var glProgram = gl.createProgram();
gl.attachShader(glProgram, vertexShader); //把顶点着色器添加到着色器程序
gl.attachShader(glProgram, fragmentShader); //把片元着色器添加到着色器程序
// 4.把着色器程序链接成一个完整的程序
gl.linkProgram(glProgram);
gl.useProgram(glProgram);
// 获取attribute变量的存储位置 , 返回对应的地址信息
var aPosition = gl.getAttribLocation(glProgram, 'a_Position');
//给变量赋值
gl.vertexAttrib3f(aPosition, 0.0, 0.5, 0.0); //位置
// vertexAttrib函数功能，3：对应需要传3个参数，或者是几维向量，
// f：表示参数是float类型，
var aPointSize = gl.getAttribLocation(glProgram, 'a_PointSize');
gl.vertexAttrib1f(aPointSize, 50.0); //大小
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
//绘制
gl.drawArrays(gl.POINTS, 0, 1);
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。
原文链接：codeboy.blog.csdn.net/article/details/107010705
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）