1、将画点写在顶点着色器里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点</title>
<script src="base.js"></script>
</head>
<style>
#container{
width: 800px;
height: 600px;
}
</style>
<body>
<canvas id="container"></canvas>
<script>
const canvas=document.getElementById('container')
var VSHADER=`
void main(){
gl_Position=vec4(0.0,0.0,0.0,1.0);
gl_PointSize=20.0;
}
`;
var FSHADER=`
precision mediump float;
void main(){
gl_FragColor=vec4(1.0,0.0,0.0,1.0);
}
`;
let webgl=container.getContext('webgl2'); //获得webgl的上下文
if(!webgl)
{
console.assert("该网页不支持webgl2");
}
if(!initShaders(webgl, VSHADER, FSHADER)){
console.assert("初始化shader错误");
}
webgl.clearColor(0.0, 0.0, 0.0, 1.0); //设置背景颜色
webgl.clear(webgl.COLOR_BUFFER_BIT); //清除canvas的颜色
webgl.drawArrays(webgl.POINTS,0,1);
</script>
</body>
</html>
2、将点的赋值移到javascript里
<body>
<canvas id="container"></canvas>
<script>
const canvas=document.getElementById('container')
var VSHADER=`
attribute vec4 a_Position;
attribute float a_PointSize;
void main(){
gl_Position=a_Position;
gl_PointSize=a_PointSize;
}
`;
var FSHADER=`
precision mediump float;
uniform vec4 u_Color;
void main(){
gl_FragColor=u_Color;
}
`;
let webgl=container.getContext('webgl2') //获得webgl的上下文
if(!webgl)
{
console.assert("该网页不支持webgl2")
}
if(!initShaders(webgl, VSHADER, FSHADER)){
console.assert("初始化shader错误")
}
webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色
webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色
let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position')
let a_PointSize=webgl.getAttribLocation(webgl.program, 'a_PointSize')
let u_Color=webgl.getUniformLocation(webgl.program, 'u_Color')
webgl.vertexAttrib4f(a_Position, 0.0, 0.0, 0.0, 1.0)
webgl.vertexAttrib1f(a_PointSize,10.0)
webgl.uniform4f(u_Color, 1.0, 0.0, 0.0, 1.0)
webgl.drawArrays(webgl.POINTS,0,1)
</script>
</body>
3、鼠标交互输入控制点
这里需要注意width和height需要在canvas元素中直接指定，在style里指定的不对，具体原因见：
https://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点</title>
<script src="base.js"></script>
</head>
<body>
<canvas id="container" width="800px" height="600px"></canvas>
<script>
const canvas=document.getElementById('container')
var VSHADER=`
attribute vec4 a_Position;
attribute float a_PointSize;
void main(){
gl_Position=a_Position;
gl_PointSize=a_PointSize;
}
`;
var FSHADER=`
precision mediump float;
uniform vec4 u_Color;
void main(){
gl_FragColor=u_Color;
}
`;
let webgl=container.getContext('webgl') //获得webgl的上下文
if(!webgl)
{
console.assert("该网页不支持webgl2")
}
if(!initShaders(webgl, VSHADER, FSHADER)){
console.assert("初始化shader错误")
}
webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色
let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position')
let a_PointSize=webgl.getAttribLocation(webgl.program, 'a_PointSize')
let u_Color=webgl.getUniformLocation(webgl.program, 'u_Color')
var points = [];
var colors = [];
canvas.onclick=(evt)=>{
let x=evt.clientX
let y=evt.clientY
let rect=evt.target.getBoundingClientRect()
x=((x-rect.left)-canvas.clientWidth/2)/(canvas.clientWidth/2)
y=(canvas.clientHeight/2-(y-rect.top))/(canvas.clientHeight/2)
points.push([x, y]);
webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色
for (var i=points.length; i>0; i--) {
var xy = points[i-1];
var rgba = colors[i-1];
webgl.vertexAttrib4f(a_Position,xy[0], xy[1], 0.0, 1.0)
webgl.vertexAttrib1f(a_PointSize,10.0)
webgl.uniform4f(u_Color, 1.0, 0.0, 0.0, 1.0)
webgl.drawArrays(webgl.POINTS,0,1)
}
}
webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色
</script>
</body>
</html>
4、一次性画多个点
<canvas id="container" width="800px" height="600px"></canvas>
<script>
const canvas=document.getElementById('container')
var VSHADER=`
attribute vec4 a_Position;
void main(){
gl_Position=a_Position;
gl_PointSize=10.0;
}
`;
var FSHADER=`
precision mediump float;
void main(){
gl_FragColor=vec4(1.0,0.0,0.0,1.0);
}
`;
let webgl=container.getContext('webgl') //获得webgl的上下文
if(!webgl)
{
console.assert("该网页不支持webgl2")
}
if(!initShaders(webgl, VSHADER, FSHADER)){
console.assert("初始化shader错误")
}
webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色
let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position')
let vertices=new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5])
var colors = []
webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色
let vertexBuffer=webgl.createBuffer() //创建缓冲区对象
webgl.bindBuffer(webgl.ARRAY_BUFFER,vertexBuffer) //将缓冲区对象绑定到目标
webgl.bufferData(webgl.ARRAY_BUFFER,vertices,webgl.STATIC_DRAW) //向缓冲区对象写入数据
webgl.vertexAttribPointer(a_Position,2,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
webgl.enableVertexAttribArray(a_Position) //连接变量a_Position和缓冲区对象
webgl.drawArrays(webgl.POINTS,0,3)
</script>
5、将点改为圆点
这里主要修改片元着色器就好
<canvas id="container" width="800px" height="600px"></canvas>
<script>
const canvas=document.getElementById('container')
var VSHADER=`
attribute vec4 a_Position;
varying vec4 v_color;
void main(){
gl_Position=a_Position;
gl_PointSize=10.0;
}
`;
var FSHADER=`
precision mediump float;
void main(){
float dist=distance(gl_PointCoord,vec2(0.5,0.5));
if(dist<0.5){
gl_FragColor=vec4(1.0,0.0,0.0,1.0);
}
else{
discard;
}
}
`;
let webgl=container.getContext('webgl') //获得webgl的上下文
if(!webgl)
{
console.assert("该网页不支持webgl2")
}
if(!initShaders(webgl, VSHADER, FSHADER)){
console.assert("初始化shader错误")
}
webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色
let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position')
let vertices=new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5])
var colors = []
webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色
let vertexBuffer=webgl.createBuffer() //创建缓冲区对象
webgl.bindBuffer(webgl.ARRAY_BUFFER,vertexBuffer) //将缓冲区对象绑定到目标
webgl.bufferData(webgl.ARRAY_BUFFER,vertices,webgl.STATIC_DRAW) //向缓冲区对象写入数据
webgl.vertexAttribPointer(a_Position,2,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
webgl.enableVertexAttribArray(a_Position) //连接变量a_Position和缓冲区对象
webgl.drawArrays(webgl.POINTS,0,3)
</script>
