1.WebGL中，如何通过javascript来修改着色器的数据。
1.在对应的着色器中，将需要通过js修改的数据，使用attribute来声明
2.通过gl.getAttribLocation()来获取，attribute声明的变量的地址。
3.通过gl.vertexAttrib3f()来修改对应的新的值
在对应的着色器中，将需要通过js修改的数据，使用attribute来声明。
以顶点着色器为例。
const VSHADER_SOURCE =
'attribute vec4 a_Position;\n'+
'void main() { \n'+
' gl_Position = a_Position;\n'+
' gl_PointSize = 5.0;\n'+
'}\n';
attribute vec4 a_Position
a_Position变量是通过 atribute声明的。
2.通过gl.getAttribLocation()来获取，attribute声明的变量的地址。
const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
获取存储地址
3.通过gl.vertexAttrib3f()来修改对应的新的值
gl.vertexAttrib3f(a_Position, '0', '0', '0');
修改对应的值。
最后重新渲染
gl.clearColor(0.0,0.0,0.0,1.0)
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS,0,1);
3.案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas {
height:400px;
width: 400px;
/* background-color: red; */
}
</style>
</head>
<body>
<input type="number" id="value1" />
<input type="number" id="value2" />
<input type="number" id="value3" />
<button id="btn">确定</button>
<canvas id="canvas"></canvas>
<script>
const VSHADER_SOURCE =
'attribute vec4 a_Position;\n'+
'void main() { \n'+
' gl_Position = a_Position;\n'+
' gl_PointSize = 5.0;\n'+
'}\n';
const FSHADER_SOURCE =
'void main() { \n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';
// console.log(canvas, 'canvas')
const gl = canvas.getContext('webgl');
// console.log(gl.createShader, 'sdf')
function createshader(gl, type, source) {
const shader = gl.createShader(type)
gl.shaderSource(shader, source);
gl.compileShader(shader);
const compileState = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compileState) {
// console.log(source, 'type')
const err = gl.getShaderInfoLog(shader);
console.log('编译报错的信息为'+err);
gl.deleteShader(shader); // 删除对应的着色器。
return null
}
return shader;
}
function createProgram(gl,vshader, fshader) {
const vertexShader = createshader(gl, gl.VERTEX_SHADER, vshader);
const fragmentShader = createshader(gl, gl.FRAGMENT_SHADER, fshader);
if (!fragmentShader && !vertexShader) {
console.log('创建着色器报错');
return null
}
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const linkState = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linkState) {
const err = gl.getProgramInfoLog(program);
console.log('链接报错的信息为:'+err);
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);
gl.deleteProgram(program);
return null;
}
return program;
}
function initShader() {
const program = createProgram(gl, VSHADER_SOURCE, FSHADER_SOURCE);
if (!program) {
console.log('创建失败');
return false;
}
gl.useProgram(program);
gl.program = program;
}
initShader();
const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
gl.vertexAttrib3f(a_Position, '0', '0', '0');
gl.clearColor(0.0,0.0,1.0,1.0)
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1)
let x = 0
value1.addEventListener('change',function(){
x = this.value / 10;
console.log(y, 'yyy')
// drawarrays(Math.abs(parseInt(this.value) / 10), '1', '0')
drawarrays(this.value / 10, y, '0')
})
let y = 0
value2.addEventListener('change',function(){
y = this.value / 10;
// drawarrays(0, Math.abs(parseInt(this.value) / 10), '0')
drawarrays(x, this.value / 10, '0')
})
value3.addEventListener('change',function(){
// drawarrays(0, '1', Math.abs(parseInt(this.value) / 10))
drawarrays(0, '1', this.value / 10)
})
function drawarrays(x,y,z) {
gl.vertexAttrib3f(a_Position,x,y,z)
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>
运行的界面:
功能点:
点击可以改变红点的位置.