老师，我这边点的大小没有变化，帮我看一下问题出在哪儿

来源：3-2 多缓冲区和数据偏移

慕函数6231552

2023-12-19

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="initShader.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			canvas{
				margin: 50px auto 0;
				display: block;
				background: yellow;
			}
		</style>
		</head>
	<body>
		<canvas id="canvas" width="400" height="400"></canvas>
	</body>
	<script>
		const ctx=document.getElementById('canvas');
		const gl=ctx.getContext('webgl');
		const VERTEX_SHADER_SOURCE=`
		attribute vec4 aPosition;
		attribute float aPointSize;//形成动态的点体积
		void main(){
			gl_Position=aPosition;
			gl_PointSize=aPointSize;
		}`;
		const FRAGMENT_SHADER_SOURCE=`
		void main(){
			gl_FragColor=vec4(1.0,0.0,0.0,1.0);
		}`;
		// gl.viewport(0, 0, ctx.width, ctx.height);
		// 			gl.clearColor(0.3, 0.3, 0.3, 1.0);
		// 			gl.clear(gl.COLOR_BUFFER_BIT);
		const program=initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE);
		
		const aPosition=gl.getAttribLocation(program,'aPosition');
		const aPointSize=gl.getAttribLocation(program,'aPointSize');
		const points=new Float32Array([
			-0.5,-0.5,10.0,
			0.5,-0.5,20.0,
			0.0,0.5,30.0
		])
		const buffer=gl.createBuffer();
		gl.bindBuffer(gl.ARRAY_BUFFER,buffer);//将缓冲区对象绑定到gl
		gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW);
		const BYTES=points.BYTE_PER_ELEMENT;
		gl.vertexAttribPointer(aPosition,2,gl.FLOAT,false,BYTES*3,0);//指定数据
		gl.enableVertexAttribArray(aPosition);//传入数据的内存地址
		// gl.vertexAttrib2f(aPosition,0.0,0.0);
		
		gl.vertexAttribPointer(aPointSize,1,gl.FLOAT,false,BYTES*3,BYTES*2);//指定数据
		gl.enableVertexAttribArray(aPointSize);//传入数据的内存地址
		// gl.vertexAttrib2f(aPosition,0.0,0.0);
		gl.drawArrays(gl.POINTS,0,3);//绘制3个顶点
			</script>
</html>

写回答

1回答