03.片元变量赋值
2020-03-20 本文已影响0人
cmd_ts
着色器中的代码precision mediump float;表示的意思是着色器中配置的float对象会占用中等尺寸内存。
具体包含的尺寸：
highp for vertex positions,
mediump for texture coordinates,
lowp for colors.
123.png
03.png
<!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>cmd_webgl_study3</title>
</head>
<body>
<!-- 1.创建webgl标签 -->
<canvas id="webgl" width="500" height="500"></canvas>
<script type="shader" id="vertex">
attribute vec4 apos;
attribute float a_PointSize;
void main(){
gl_PointSize = a_PointSize;
gl_Position = apos;
}
</script>
<script type="shader" id="fragment">
precision mediump float;
uniform vec4 vColor;
void main(){
gl_FragColor = vColor;
}
</script>
<script src="./libs/webgl_libs.js"></script>
<script>
// 2.得到canvas element
let canvas = document.getElementById('webgl');
// 3.得到上下文对象 context
let gl = canvas.getContext('webgl');
//4.编写顶点着色器源代码、实际绘制的代码，GPU：描述一个顶点的大小、位置（3d坐标） 顶点着色器
let vertex_shader_source = document.getElementById("vertex").innerHTML;
//5.片元着色器源代码：描述一个点的颜色 片元着色器
let fragment_shader_source = document.getElementById("fragment").innerHTML;
let program = create_program(gl,vertex_shader_source,fragment_shader_source);
console.log('program:',program);
let apos = gl.getAttribLocation(program,'apos');
let aPointSize = gl.getAttribLocation(program,'a_PointSize');
let a_colol = gl.getUniformLocation(program,'vColor');
console.log('a_color:',a_colol);
let x1 = 0.5;
let y1 = 0.5;
gl.vertexAttrib2f(apos,x1,y1);
gl.vertexAttrib1f(aPointSize,60.0);
let p = new Float32Array([0.0, 0.0, 1.0,1.0]);
gl.uniform4fv(a_colol, p);
// 13.设置背景色
gl.clearColor(1.0,0.0,0.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// 14.绘制
gl.drawArrays(gl.POINTS,0,1);
</script>
</body>
</html>
