webgl 着色器

作者: Viewwei | 来源:发表于2021-05-04 11:54 被阅读0次

webgl 入门(二)
webGL学习第一天（下）
WebGL简易教程地理地形绘制
WebGLShader
WebGL编程指南入门基础篇
Webgl学习笔记 1 初始化shader
webgl 学习笔记
WebGL光照阴影映射
webgl 着色器
Threejs in autonomous driving -（

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>