webgl 着色器
2021-05-04 本文已影响0人
Viewwei
GUI 渲染能够让我们看到界面,主要是靠着色器进行渲染的.着色器一般分为顶点着色器,片元着色器.
-
顶点着色器
顶点着色器主要负责位置和大小 -
片元着色器
片元着色器只要负责片元的渲染,包括颜色.片元在 js 上面表示像素的意思 -
注意
片元着色器和顶点着色器都是 GLS ES 语言进行编写的,因此需要对 js 语言进行转换.因此我们需要在 js中创建一个 program. 他主要是对我们的 js 文件进行翻译.
function initShaders(gl, vsSource, fsSource) {
//创建程序对象
const program = gl.createProgram();
//建立着色对象
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
//把顶点着色对象装进程序对象中
gl.attachShader(program, vertexShader);
//把片元着色对象装进程序对象中
gl.attachShader(program, fragmentShader);
//连接webgl上下文对象和程序对象
gl.linkProgram(program);
//启动程序对象
gl.useProgram(program);
//将程序对象挂到上下文对象上
gl.program = program;
return true;
}
function loadShader(gl, type, source) {
//根据着色类型，建立着色器对象
const shader = gl.createShader(type);
//将着色器源文件传入着色器对象中
gl.shaderSource(shader, source);
//编译着色器对象
gl.compileShader(shader);
//返回着色器对象
return shader;
}
export { initShaders };
- 注意
在着色器中必须使用分号结尾.在顶点着色器中有什么 GLLS ES 语言特有定义的变量,比如 gl_Position:表示 顶点着色器的位置,gl_PointSize:表示着色器的大小,必须使用浮点数. gl_FragColor在片元着色器中表示填充的颜色 - 完成实例代码如下
<!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">
void main(){
gl_Position = vec4(0.5, 0, 0.5, 1);
// 必须使用浮点数
gl_PointSize = 50.0;
}
</script>
<!-- 片元着色器 -->
<script id="fragmentShader" type="x-shader/x-fragment">
void main(){
gl_FragColor = vec4(1, 1, 0, 1);
}
</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);
gl.drawArrays(gl.POINTS, 0, 1)
</script>
</html>
