webgl参数
2021-05-06 本文已影响0人
Viewwei
webgl顶点着色器的修改参数是通过attribute属性导出.attribute属性类似如 es6 中的 export.然后在通过 js 中的getAttribLocation获取到这个参数,在通过 js 中的vertexAttrib23f方法或者vertexAttrib23f的同族方法对attribute的属性进行修改
//获取属性
const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
//设置属性
gl.vertexAttrib3f(a_Position, 0, 0, 0)
webgl修改片元着色器.片元着色的参数和顶点着色器思路一样.只不过关键词不同.顶点的是 attribute,片元的是 uniform.但是 uniform 需要使用 p申明类似precision mediump float;修改类型.然后通过js 中的 gl.getUniformLocation获取参数,通过 gl.unform4f方法修改参数.也可以使用uniform4fv修改参数.uniform4fv需要传递的是一个数组.
- 实例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#canvas {
/* width: 100px; */
/* height: 100px; */
/* background: red; */
}
</style>
<body>
<canvas id="canvas"></canvas>
</body>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 a_Position;
void main(){
gl_Position = a_Position;
// 必须使用浮点数
gl_PointSize = 50.0;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_FragColor;
void main(){
gl_FragColor = u_FragColor;
}
</script>
<script type="module">
import { initShaders } from "./jsm/util.js";
const canvas = document.getElementById('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
// 获取着色器文本
const vsSource = document.querySelector("#vertexShader").innerText;
const fsSource = document.querySelector("#fragmentShader").innerText;
console.log(vsSource,fsSource)
const gl = canvas.getContext('webgl')
initShaders(gl, vsSource, fsSource)
//声明颜色 rgba
gl.clearColor(0, 0, 0, 1);
//刷底色
gl.clear(gl.COLOR_BUFFER_BIT);
const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor')
gl.uniform4f(u_FragColor, 1, 0, 0, 1)
// 获取传递数组
// const arr = new
gl.uniform4fv(u_FragColor, new Float32Array([1, 0, 0, 1]))
gl.vertexAttrib3f(a_Position, 0, 0, 0)
gl.drawArrays(gl.POINTS, 0, 1)
</script>
</html>
