WebGL学习

最新推荐文章于 2024-10-06 20:54:02 发布
最新推荐文章于 2024-10-06 20:54:02 发布
阅读量342 收藏 9
点赞数 6
文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsjvh/article/details/137436710
版权

WebGL+three.js

4.4

1、canvas 和 webgl 的区别
1.1 画布

image-20240413162741970

1.2 Canvas API

image-20240413173052139

1.3 WebGL API

image-20240413173110928

image-20240413173129557

2、WebGL 简介
2.1 什么是 webgl

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.2 为什么学 webgl
  • 数据可视化
  • 图形/游戏引擎
  • 交互演示、图形渲染
  • 地图
  • VR
  • 物品展示
  • 室内设计
  • 城市规划
2.3 webgl 的优势

image-20240413173142525

2.4 webgl 开源框架

image-20240413173157165

image-20240413173219515

3、webgl 入门
3.1 最短的 webgl 程序
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="carvas" width="400" height="400">
        此浏览器不支持carvas
    </canvas>
</body>
</html>

<script>
    const _ctx _= _document_.getElementById("carvas")

    const _gl _= _ctx_.getContext("webgl")

    _gl_.clearColor(1.0, 0.0, 0.0, 1.0)

    _gl_.clear(_gl_._COLOR_BUFFER_BIT_)
</script>

image-20240413173500873

image-20240413173540242

3.2 通过 webgl 绘制一个点
什么是着色器

image-20240413173556231

image-20240413173601506

着色器的工作流程

image-20240413173638692

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持carvas
</canvas>
</body>
</html>

<script>
    const _ctx _= _document_.getElementById("canvas")

    const _gl _= _ctx_.getContext("webgl")

    //着色器
    //创建着色器源码
    const _VERTEX_SHADER_SOURCE _= `
        void main() {
        //点的坐标
            gl_Position = vec4(0.0,0.0,0.0,1.0);
            //点的大小
            gl_PointSize = 100.0;
        }
    `;//顶点着色器

    const _FRAGMENT_SHADER_SOURCE _= `
        void main(){
            gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        }
    `;//片元着色器

    //创建着色器
    const _vertexShader _= _gl_.createShader(_gl_._VERTEX_SHADER_);
    const _fragmentShader _= _gl_.createShader(_gl_._FRAGMENT_SHADER_);

    _gl_.shaderSource(_vertexShader_, _VERTEX_SHADER_SOURCE_);//指定顶点着色器的源码
    _gl_.shaderSource(_fragmentShader_, _FRAGMENT_SHADER_SOURCE_);//指定片元着色器的源码

    //编译着色器
    _gl_.compileShader(_vertexShader_);
    _gl_.compileShader(_fragmentShader_);

    //创建一个程序对象
    const _program _= _gl_.createProgram();

    _gl_.attachShader(_program_, _vertexShader_);
    _gl_.attachShader(_program_, _fragmentShader_);

    _gl_.linkProgram(_program_);

    _gl_.useProgram(_program_);

    //执行绘制
    //要绘制的图形是什么, 从哪个开始，使用几个顶点
    _gl_.drawArrays(_gl_._POINTS_, 0, 1);
</script>

将创建着色器封装

function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
    const vertexShader = gl.createShader(gl._VERTEX_SHADER_);
    const fragmentShader = gl.createShader(gl._FRAGMENT_SHADER_);

    gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE);//指定顶点着色器的源码
    gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE);//指定片元着色器的源码

    //编译着色器
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);

    //创建一个程序对象
    const program = gl.createProgram();

    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);

    gl.useProgram(program);

    return program;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/index.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持carvas
</canvas>
</body>
</html>

<script>
    const _ctx _= _document_.getElementById("canvas")

    const _gl _= _ctx_.getContext("webgl")

    //着色器
    //创建着色器源码
    const _VERTEX_SHADER_SOURCE _= `
        void main() {
        //点的坐标
            gl_Position = vec4(0.0,0.0,0.0,1.0);
            //点的大小
            gl_PointSize = 10.0;
        }
    `;//顶点着色器

    const _FRAGMENT_SHADER_SOURCE _= `
        void main(){
            gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        }
    `;//片元着色器

    // //创建着色器
    // const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    // const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    //
    // gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE);//指定顶点着色器的源码
    // gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE);//指定片元着色器的源码
    //
    // //编译着色器
    // gl.compileShader(vertexShader);
    // gl.compileShader(fragmentShader);
    //
    // //创建一个程序对象
    // const program = gl.createProgram();
    //
    // gl.attachShader(program, vertexShader);
    // gl.attachShader(program, fragmentShader);
    //
    // gl.linkProgram(program);
    //
    // gl.useProgram(program);
    const _program _= initShader(_gl_, _VERTEX_SHADER_SOURCE_, _FRAGMENT_SHADER_SOURCE_);

    //执行绘制
    //要绘制的图形是什么, 从哪个开始，使用几个顶点
    _gl_.drawArrays(_gl_._POINTS_, 0, 1);
</script>

image-20240413173704997

3.3 webgl 坐标系

image-20240413173717729

image-20240413173752281

<!DOCTYPE html
<html lang="en"
<head>
  <meta charset="UTF-8"
  <title>Title</title>
  <script src="./lib/index.js"</script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #canvas{
      background: grey;
    }
    body::after{
      content: ' ';
      display: block;
      width: 1px;
      height: 400px;
      background: red;
      position: absolute;
      top: 0;
      left: 200px;
    }
    body::before{
      content: ' ';
      display: block;
      width: 400px;
      height: 1px;
      background: red;
      position: absolute;
      top: 200px;
      left: 0;
    }
  </style>
</head>
<body>
<canvas id="canvas" width="400" height="400"
  此浏览器不支持carvas
</canvas>
</body>
</html>

<script>
  const _ctx _= _document_.getElementById("canvas")

  const _gl _= _ctx_.getContext("webgl")

  //着色器
  //创建着色器源码
  const _VERTEX_SHADER_SOURCE _= `
        void main() {
        //点的坐标
            gl_Position = vec4(0.5,0.5,0.5,1.0);
            //点的大小
            gl_PointSize = 30.0;
        }
    `;//顶点着色器

  const _FRAGMENT_SHADER_SOURCE _= `
        void main(){
            gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        }
    `;//片元着色器

  const _program _= initShader(_gl_, _VERTEX_SHADER_SOURCE_, _FRAGMENT_SHADER_SOURCE_);

  //执行绘制
  //要绘制的图形是什么, 从哪个开始，使用几个顶点
  _gl_.drawArrays(_gl_._POINTS_, 0, 1);
</script>

image-20240413173846404

3.4 学习使用 attribute 变量

image-20240413173911902

attribute变量只能在顶点着色器中使用不能在片元着色器中使用!

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

image-20240413174120305

image-20240413174210792

image-20240413174215962

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./lib/index.js"></script>
</head>
<body>
  <canvas id="canvas" width="400" height="400">
    此浏览器不支持carvas
  </canvas>
</body>
</html>

<script>
  const _ctx _= _document_.getElementById("canvas")

  const _gl _= _ctx_.getContext("webgl")

  //着色器
  //创建着色器源码
  const _VERTEX_SHADER_SOURCE _= `
    attribute vec4 aPosition; //默认为vec4(1.0,0.0,0.0,1.0)
    void main() {
        gl_Position = aPosition;
        gl_PointSize = 30.0;
    }
  `;//顶点着色器

  const _FRAGMENT_SHADER_SOURCE _= `
      void main(){
          gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
  `;//片元着色器

  const _program _= initShader(_gl_, _VERTEX_SHADER_SOURCE_, _FRAGMENT_SHADER_SOURCE_);

  const _aPosition _= _gl_.getAttribLocation(_program_, "aPosition");

  _gl_.vertexAttrib4f(_aPosition_, 1.0, 0.0, 0.0, 1.0)
  // gl.vertexAttrib3f(aPosition, 0.0, 0.0, 0.0)
  //执行绘制
  //要绘制的图形是什么, 从哪个开始，使用几个顶点

  let _x _= 0;
  setInterval(() =>{
    _x _+= 0.1;
    if(_x _> 1.0){
      _x _= 0.0;
    }
    _gl_.vertexAttrib1f(_aPosition_, _x_);

    _gl_.drawArrays(_gl_._POINTS_, 0, 1);
  })
</script>

image-20240413174235897

4.5

1、通过鼠标控制绘制

image-20240413174419192

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/index.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">
    此浏览器不支持carvas
</canvas>
</body>
</html>

<script>
    const _ctx _= _document_.getElementById("canvas")

    const _gl _= _ctx_.getContext("webgl")

    //着色器
    //创建着色器源码
    const _VERTEX_SHADER_SOURCE _= `
    attribute vec4 aPosition; //默认为vec4(1.0,0.0,0.0,1.0)
    void main() {
        gl_Position = aPosition;
        gl_PointSize = 10.0;
    }
  `;//顶点着色器

    const _FRAGMENT_SHADER_SOURCE _= `
      void main(){
          gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
  `;//片元着色器

    const _program _= initShader(_gl_, _VERTEX_SHADER_SOURCE_, _FRAGMENT_SHADER_SOURCE_);

    const _aPosition _= _gl_.getAttribLocation(_program_, "aPosition");

    const _point _= [];
    _ctx_.onmousemove = function (ev) {
        //鼠标坐标
        const x = ev.clientX;
        const y = ev.clientY;

        const domPosition = ev.target.getBoundingClientRect();

        const domx = x - domPosition.left;
        const domy = y - domPosition.top;

        const halfWidth = _ctx_.offsetWidth / 2;
        const halfHeight = _ctx_.offsetHeight / 2;

        const clickX = (domx - halfWidth) / halfWidth;
        const clickY = (halfHeight - domy) / halfHeight;

        _point_.push({clickX, clickY});

        for(let i = 0; i < _point_.length; i ++){
            _gl_.vertexAttrib2f(_aPosition_, _point_[i].clickX, _point_[i].clickY);

            _gl_.drawArrays(_gl_._POINTS_, 0 , 1);
        }
    }

</script>
2、使用 uniform 绘制不同颜色的点

添加uniform变量，设置到颜色

image-20240413174540453

const _FRAGMENT_SHADER_SOURCE _= `
    void main(){
        uniform vec4 uColor;
        gl_FragColor = uColor;
    }
`;//片元着色器

image-20240413174555996

设置完发现有编译错误，片元着色器需要设置精度

const _FRAGMENT_SHADER_SOURCE _= `
    void main(){
        precision mediump float;
        uniform vec4 uColor;
        gl_FragColor = uColor;
    }
`;//片元着色器

image-20240413174622523

注意：片元着色器类型要与方法对应 vec4 --> uniform4f

vec3 --> uniform3f

float --> uniform1f

uniform 也可以在顶点着色器使用，但不能传递位置信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/index.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">
    此浏览器不支持carvas
</canvas>
</body>
</html>

<script>
    const _ctx _= _document_.getElementById("canvas")

    const _gl _= _ctx_.getContext("webgl")

    //着色器
    //创建着色器源码
    const _VERTEX_SHADER_SOURCE _= `
        attribute vec4 aPosition; //默认为vec4(1.0,0.0,0.0,1.0)
        void main() {
            gl_Position = aPosition;
            gl_PointSize = 10.0;
        }
  `;//顶点着色器

    const _FRAGMENT_SHADER_SOURCE _= `
        precision mediump float;
        uniform vec2 uColor;
        void main(){
            gl_FragColor = vec4(uColor.r, uColor.g, 0.0, 1.0);
        }
  `;//片元着色器

    const _program _= initShader(_gl_, _VERTEX_SHADER_SOURCE_, _FRAGMENT_SHADER_SOURCE_);

    const _aPosition _= _gl_.getAttribLocation(_program_, "aPosition");

    const _uColor _= _gl_.getUniformLocation(_program_, "uColor");

    const _point _= [];
    _ctx_.onmousemove = function (ev) {
        //鼠标坐标
        const x = ev.clientX;
        const y = ev.clientY;

        const domPosition = ev.target.getBoundingClientRect();

        const domx = x - domPosition.left;
        const domy = y - domPosition.top;

        const halfWidth = _ctx_.offsetWidth / 2;
        const halfHeight = _ctx_.offsetHeight / 2;

        const clickX = (domx - halfWidth) / halfWidth;
        const clickY = (halfHeight - domy) / halfHeight;

        _point_.push({clickX, clickY});

        for(let i = 0; i < _point_.length; i ++){
            _gl_.vertexAttrib2f(_aPosition_, _point_[i].clickX, _point_[i].clickY);

            _gl_.uniform2f(_uColor_, _point_[i].clickX, _point_[i].clickY);

            _gl_.drawArrays(_gl_._POINTS_, 0 , 1);
        }
    }

</script>

image-20240413174644189

4.6

1、使用缓冲区对象——绘制多个点

image-20240413174710655

image-20240413174720009

image-20240413174729263

image-20240413174743695

2、多缓冲区和数据偏移

比如指定顶点的大小

弊端：如果多个属性，要创建多个缓冲区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/index.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">
    此浏览器不支持carvas
</canvas>
</body>
</html>

<script>
    const _ctx _= _document_.getElementById("canvas")

    const _gl _= _ctx_.getContext("webgl")

    //着色器
    //创建着色器源码
    const _VERTEX_SHADER_SOURCE _= `
    attribute vec4 aPosition; //默认为vec4(1.0,0.0,0.0,1.0)
    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);
      }
  `;//片元着色器

    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.5, -0.5, 20,
        0.5, 0.5, 30
    ]);

    const _buffer _= _gl_.createBuffer();
    _gl_.bindBuffer(_gl_._ARRAY_BUFFER_, _buffer_);
    _gl_.bufferData(_gl_._ARRAY_BUFFER_, _points_, _gl_._STATIC_DRAW_);

    //多缓冲区绑定数据
    const _BYTES _= _points_.BYTES_PER_ELEMENT;
    _gl_.vertexAttribPointer(_aPosition_, 2, _gl_._FLOAT_, false, _BYTES _* 3, 0);
    _gl_.enableVertexAttribArray(_aPosition_);

    _gl_.vertexAttribPointer(_aPointSize_, 1, _gl_._FLOAT_, false, _BYTES _* 3, _BYTES _* 2);
    _gl_.enableVertexAttribArray(_aPointSize_);

    _gl_.drawArrays(_gl_._POINTS_, 0 , 3);

</script>

3、绘制多种图形
3.1 绘制连续的线段
_gl_.drawArrays(_gl_._LINE_STRIP_, 0 , 3);
3.2 绘制三角形

gl.TRIANGLES

要绘制多个三角形，点数必须是 3 的倍数

4、图形平移——着色器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/index.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">
    此浏览器不支持carvas
</canvas>
</body>
</html>

<script>
    const _ctx _= _document_.getElementById("canvas")

    const _gl _= _ctx_.getContext("webgl")

    //着色器
    //创建着色器源码
    const _VERTEX_SHADER_SOURCE _= `
    attribute vec4 aPosition; //默认为vec4(1.0,0.0,0.0,1.0)
    attribute float aPointSize;
    attribute float aTranslate;
    void main() {
        gl_Position = vec4(aPosition.x + aTranslate, aPosition.y, aPosition.z, 1.0);
        gl_PointSize = 10.0;
    }
  `;//顶点着色器

    const _FRAGMENT_SHADER_SOURCE _= `
      void main(){
          gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
  `;//片元着色器

    const _program _= initShader(_gl_, _VERTEX_SHADER_SOURCE_, _FRAGMENT_SHADER_SOURCE_);

    const _aPosition _= _gl_.getAttribLocation(_program_, "aPosition");
    const _aTranslate _= _gl_.getAttribLocation(_program_, "aTranslate");

    const _points _= new _Float32Array_([
        -0.5, -0.5,
        0.5, -0.5,
        0.5, 0.5,
    ]);

    const _buffer _= _gl_.createBuffer();
    _gl_.bindBuffer(_gl_._ARRAY_BUFFER_, _buffer_);
    _gl_.bufferData(_gl_._ARRAY_BUFFER_, _points_, _gl_._STATIC_DRAW_);

    //多缓冲区绑定数据
    const _BYTES _= _points_.BYTES_PER_ELEMENT;
    _gl_.vertexAttribPointer(_aPosition_, 2, _gl_._FLOAT_, false, _BYTES _* 2, 0);
    _gl_.enableVertexAttribArray(_aPosition_);

    let _x _= -1;
    setInterval(() => {
        _x _+= 0.1;
        if(_x _> 1) _x _= -1;
        _gl_.vertexAttrib1f(_aTranslate_, _x_);
        _gl_.drawArrays(_gl_._TRIANGLES_, 0 , 3);
    }, 60)


</script>
5、图形缩放——着色器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/index.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">
    此浏览器不支持carvas
</canvas>
</body>
</html>

<script>
    const _ctx _= _document_.getElementById("canvas")

    const _gl _= _ctx_.getContext("webgl")

    //着色器
    //创建着色器源码
    const _VERTEX_SHADER_SOURCE _= `
    attribute vec4 aPosition; //默认为vec4(1.0,0.0,0.0,1.0)
    attribute float aScale;
    void main() {
        gl_Position = vec4(aPosition.x * aScale, aPosition.y, aPosition.z, 1.0);
        gl_PointSize = 10.0;
    }
  `;//顶点着色器

    const _FRAGMENT_SHADER_SOURCE _= `
      void main(){
          gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
  `;//片元着色器

    const _program _= initShader(_gl_, _VERTEX_SHADER_SOURCE_, _FRAGMENT_SHADER_SOURCE_);

    const _aPosition _= _gl_.getAttribLocation(_program_, "aPosition");
    const _aScale _= _gl_.getAttribLocation(_program_, "aScale");

    const _points _= new _Float32Array_([
        -0.5, -0.5,
        0.5, -0.5,
        0.5, 0.5,
    ]);

    const _buffer _= _gl_.createBuffer();
    _gl_.bindBuffer(_gl_._ARRAY_BUFFER_, _buffer_);
    _gl_.bufferData(_gl_._ARRAY_BUFFER_, _points_, _gl_._STATIC_DRAW_);

    //多缓冲区绑定数据
    const _BYTES _= _points_.BYTES_PER_ELEMENT;
    _gl_.vertexAttribPointer(_aPosition_, 2, _gl_._FLOAT_, false, _BYTES _* 2, 0);
    _gl_.enableVertexAttribArray(_aPosition_);

    let _x _= 1;
    setInterval(() => {
        _x _+= 0.1;
        if(_x _> 2) _x _= 1;
        _gl_.vertexAttrib1f(_aScale_, _x_);
        _gl_.drawArrays(_gl_._TRIANGLES_, 0 , 3);
    }, 60)


</script>
6、图形旋转——着色器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/index.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">
    此浏览器不支持carvas
</canvas>
</body>
</html>

<script>
    const _ctx _= _document_.getElementById("canvas")

    const _gl _= _ctx_.getContext("webgl")

    //着色器
    //创建着色器源码
    const _VERTEX_SHADER_SOURCE _= `
    attribute vec4 aPosition; //默认为vec4(1.0,0.0,0.0,1.0)
    attribute float deg; //选转角度
    void main() {
        gl_Position.x = aPosition.x * cos(deg) - aPosition.y * sin(deg);
        gl_Position.y = aPosition.x * sin(deg) + aPosition.y * cos(deg);
        gl_Position.z = aPosition.z;
        gl_Position.w = aPosition.w;
    }
  `;//顶点着色器

    const _FRAGMENT_SHADER_SOURCE _= `
      void main(){
          gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
  `;//片元着色器

    const _program _= initShader(_gl_, _VERTEX_SHADER_SOURCE_, _FRAGMENT_SHADER_SOURCE_);

    const _aPosition _= _gl_.getAttribLocation(_program_, "aPosition");
    const _deg _= _gl_.getAttribLocation(_program_, "deg");

    const _points _= new _Float32Array_([
        -0.5, -0.5,
        0.5, -0.5,
        0.0, 0.5,
    ]);

    const _buffer _= _gl_.createBuffer();
    _gl_.bindBuffer(_gl_._ARRAY_BUFFER_, _buffer_);
    _gl_.bufferData(_gl_._ARRAY_BUFFER_, _points_, _gl_._STATIC_DRAW_);

    //多缓冲区绑定数据
    const _BYTES _= _points_.BYTES_PER_ELEMENT;
    _gl_.vertexAttribPointer(_aPosition_, 2, _gl_._FLOAT_, false, 0, 0);
    _gl_.enableVertexAttribArray(_aPosition_);

    let _x _= 1;
    function animation() {
        _x _+= 0.1;
        _gl_.vertexAttrib1f(_deg_, _x_);
        _gl_.drawArrays(_gl_._TRIANGLES_, 0 , 3);
        requestAnimationFrame(animation)
    }
    animation()
</script>
7、图形平移——平移矩阵

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/index.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">
    此浏览器不支持carvas
</canvas>
</body>
</html>

<script>
    const _ctx _= _document_.getElementById("canvas")

    const _gl _= _ctx_.getContext("webgl")

    //着色器
    //创建着色器源码
    const _VERTEX_SHADER_SOURCE _= `
    attribute vec4 aPosition; //默认为vec4(1.0,0.0,0.0,1.0)
    uniform mat4 mat;
    void main() {
        gl_Position = mat * aPosition;
        gl_PointSize = 10.0;
    }
  `;//顶点着色器

    const _FRAGMENT_SHADER_SOURCE _= `
      void main(){
          gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
  `;//片元着色器

    const _program _= initShader(_gl_, _VERTEX_SHADER_SOURCE_, _FRAGMENT_SHADER_SOURCE_);

    const _aPosition _= _gl_.getAttribLocation(_program_, "aPosition");
    const _mat _= _gl_.getUniformLocation(_program_, "mat");

    function getTranslateMatrix(x = 0, y = 0, z = 0) {
        return new _Float32Array_([
            1.0, 0.0, 0.0, 0.0,
            0.0, 1.0, 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
              x,   y,   z, 1.0,
        ])
    }

    const _points _= new _Float32Array_([
        -0.5, -0.5,
        0.5, -0.5,
        0.5, 0.5,
    ]);

    const _buffer _= _gl_.createBuffer();
    _gl_.bindBuffer(_gl_._ARRAY_BUFFER_, _buffer_);
    _gl_.bufferData(_gl_._ARRAY_BUFFER_, _points_, _gl_._STATIC_DRAW_);

    //多缓冲区绑定数据
    const _BYTES _= _points_.BYTES_PER_ELEMENT;
    _gl_.vertexAttribPointer(_aPosition_, 2, _gl_._FLOAT_, false, 0, 0);
    _gl_.enableVertexAttribArray(_aPosition_);

    let _x _= -1;
    function animation() {
        _x _+= 0.1;
        if(_x _> 1){
            _x _= -1;
        }
        const matrix = getTranslateMatrix(_x_);
        _gl_.uniformMatrix4fv(_mat_, false, matrix);
        _gl_.drawArrays(_gl_._TRIANGLES_, 0 , 3);

        requestAnimationFrame(animation);
    }
    animation();
</script>
8、图形缩放——缩放矩阵

缩放矩阵

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index.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">
  此浏览器不支持carvas
</canvas>
</body>
</html>

<script>
  const _ctx _= _document_.getElementById("canvas")

  const _gl _= _ctx_.getContext("webgl")

  //着色器
  //创建着色器源码
  const _VERTEX_SHADER_SOURCE _= `
    attribute vec4 aPosition; //默认为vec4(1.0,0.0,0.0,1.0)
    uniform mat4 mat;
    void main() {
        gl_Position = mat * aPosition;
        gl_PointSize = 10.0;
    }
  `;//顶点着色器

  const _FRAGMENT_SHADER_SOURCE _= `
      void main(){
          gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
  `;//片元着色器

  const _program _= initShader(_gl_, _VERTEX_SHADER_SOURCE_, _FRAGMENT_SHADER_SOURCE_);

  const _aPosition _= _gl_.getAttribLocation(_program_, "aPosition");
  const _mat _= _gl_.getUniformLocation(_program_, "mat");

  function getTranslateMatrix(x = 0, y = 0, z = 0) {
    return new _Float32Array_([
      1.0, 0.0, 0.0, 0.0,
      0.0, 1.0, 0.0, 0.0,
      0.0, 0.0, 1.0, 0.0,
      x,   y,   z, 1.0,
    ])
  }

  const _points _= new _Float32Array_([
    -0.5, -0.5,
    0.5, -0.5,
    0.5, 0.5,
  ]);

  const _buffer _= _gl_.createBuffer();
  _gl_.bindBuffer(_gl_._ARRAY_BUFFER_, _buffer_);
  _gl_.bufferData(_gl_._ARRAY_BUFFER_, _points_, _gl_._STATIC_DRAW_);

  //多缓冲区绑定数据
  const _BYTES _= _points_.BYTES_PER_ELEMENT;
  _gl_.vertexAttribPointer(_aPosition_, 2, _gl_._FLOAT_, false, 0, 0);
  _gl_.enableVertexAttribArray(_aPosition_);

  let _x _= -1;
  function animation() {
    _x _+= 0.1;
    if(_x _> 1){
      _x _= -1;
    }
    const matrix = getTranslateMatrix(_x_);
    // gl.vertexAttrib1f(aTranslate, x);
    _gl_.uniformMatrix4fv(_mat_, false, matrix);
    _gl_.drawArrays(_gl_._TRIANGLES_, 0 , 3);

    requestAnimationFrame(animation);
  }
  animation();
</script>
9、图形旋转——旋转矩阵


绕 z 轴旋转矩阵

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index.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">
  此浏览器不支持carvas
</canvas>
</body>
</html>

<script>
  const _ctx _= _document_.getElementById("canvas")

  const _gl _= _ctx_.getContext("webgl")

  //着色器
  //创建着色器源码
  const _VERTEX_SHADER_SOURCE _= `
    attribute vec4 aPosition; //默认为vec4(1.0,0.0,0.0,1.0)
    uniform mat4 mat;
    void main() {
        gl_Position = mat * aPosition;
        gl_PointSize = 10.0;
    }
  `;//顶点着色器

  const _FRAGMENT_SHADER_SOURCE _= `
      void main(){
          gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
  `;//片元着色器

  const _program _= initShader(_gl_, _VERTEX_SHADER_SOURCE_, _FRAGMENT_SHADER_SOURCE_);

  const _aPosition _= _gl_.getAttribLocation(_program_, "aPosition");
  const _mat _= _gl_.getUniformLocation(_program_, "mat");

  function getRotateMatrix(deg) {
    return new _Float32Array_([
       _Math_.cos(deg), _Math_.sin(deg), 0.0, 0.0,
      -_Math_.sin(deg), _Math_.cos(deg), 0.0, 0.0,
                 0.0,           0.0, 1.0, 0.0,
                 0.0,           0.0, 0.0, 1.0,
    ])
  }

  const _points _= new _Float32Array_([
    -0.5, -0.5,
    0.5, -0.5,
    0.5, 0.5,
  ]);

  const _buffer _= _gl_.createBuffer();
  _gl_.bindBuffer(_gl_._ARRAY_BUFFER_, _buffer_);
  _gl_.bufferData(_gl_._ARRAY_BUFFER_, _points_, _gl_._STATIC_DRAW_);

  //多缓冲区绑定数据
  const _BYTES _= _points_.BYTES_PER_ELEMENT;
  _gl_.vertexAttribPointer(_aPosition_, 2, _gl_._FLOAT_, false, 0, 0);
  _gl_.enableVertexAttribArray(_aPosition_);

  let _x _= 0;
  function animation() {
    _x _+= 0.1;
    const matrix = getRotateMatrix(_x_);
    _gl_.uniformMatrix4fv(_mat_, false, matrix);
    _gl_.drawArrays(_gl_._TRIANGLES_, 0 , 3);

    requestAnimationFrame(animation);
  }
  animation();
</script>
10、图形复合变换

因为矩阵是列主序的，所以是列 × 行

getTranslateMatrix、getScaleMatrix、getRotateMatrix 已写入到 lib/index.js 文件中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index.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">
  此浏览器不支持carvas
</canvas>
</body>
</html>

<script>
  const _ctx _= _document_.getElementById("canvas")

  const _gl _= _ctx_.getContext("webgl")

  //着色器
  //创建着色器源码
  const _VERTEX_SHADER_SOURCE _= `
    attribute vec4 aPosition; //默认为vec4(1.0,0.0,0.0,1.0)
    uniform mat4 mat;
    void main() {
        gl_Position = mat * aPosition;
        gl_PointSize = 10.0;
    }
  `;//顶点着色器

  const _FRAGMENT_SHADER_SOURCE _= `
      void main(){
          gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
  `;//片元着色器

  const _program _= initShader(_gl_, _VERTEX_SHADER_SOURCE_, _FRAGMENT_SHADER_SOURCE_);

  const _aPosition _= _gl_.getAttribLocation(_program_, "aPosition");
  const _mat _= _gl_.getUniformLocation(_program_, "mat");

  const _points _= new _Float32Array_([
    -0.5, -0.5,
    0.5, -0.5,
    0.5, 0.5,
  ]);

  const _buffer _= _gl_.createBuffer();
  _gl_.bindBuffer(_gl_._ARRAY_BUFFER_, _buffer_);
  _gl_.bufferData(_gl_._ARRAY_BUFFER_, _points_, _gl_._STATIC_DRAW_);

  //多缓冲区绑定数据
  const _BYTES _= _points_.BYTES_PER_ELEMENT;
  _gl_.vertexAttribPointer(_aPosition_, 2, _gl_._FLOAT_, false, 0, 0);
  _gl_.enableVertexAttribArray(_aPosition_);

  let _translateX _= -1;
  let _scaleX _= 0.1;
  let _deg _= 0;
  function animation() {
    _translateX _+= 0.01;
    _scaleX _+= 0.01;
    _deg _+= 0.01;

    if(_translateX _> 1) _translateX _= -1;
    if(_scaleX _> 1.5) _scaleX _= 0.1;
    const translateMatrix = getTranslateMatrix(_translateX_);
    const scaleMatrix = getScaleMatrix(_scaleX_);
    const rotateMatrix = getRotateMatrix(_deg_);
    const matrix = getMixMatrix(getMixMatrix(translateMatrix, scaleMatrix), rotateMatrix);
    _gl_.uniformMatrix4fv(_mat_, false, matrix);
    _gl_.drawArrays(_gl_._TRIANGLES_, 0 , 3);

    requestAnimationFrame(animation);
  }
  animation();
</script>

4.8

1、使用 varying 变量——绘制彩色三角形

2、webgl 渲染流程

2.1 图元装配过程

2.2 光栅化

3、给图形添加背景图

4.9

1、OpenGL 语言基础


外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传



2、矢量和举证



3、纹理取样器


4、内置函数的介绍



外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5、存储限定词

5.1 const

  • 声明一个常量，定义之后不能被改变

5.2 attribute

  • 只能出现在顶点着色器中，只能声明为全局变量，表示逐顶点信息。单个顶点的信息。

5.3 uniform

  • 只读类型，强调一致性
  • 可同时出现在顶点着色器和片元着色器中
  • 用来存储的是影响所有顶点的数据。如变换矩阵。

5.4 varying

  • 从顶点着色器向片元着色器传递数据

5.5 精度限定

4.11

1、3D 基础

2、正射投影

3、透视投影

…未完待续

zrj316
关注
WebGL学习颜色与纹理
04-01
### WebGL学习颜色与纹理 #### 一、理解Varying变量的作用 在WebGL中，顶点着色器(Vertex Shader)和片段着色器(Fragment Shader)之间通过Varying变量进行通信。当我们想要为每个顶点指定不同的颜色时，就需要用到...
webGL学习
weixin_44208404的博客
11-29 882
例如有一点p需要绕OC2轴旋转ang度，那么可以让c2旋转到z轴对齐，然后点p绕z轴旋转ang度，然后再旋转回来。是由颜色缓冲区导致的，颜色缓冲区中存储的图像只在当前线程有效；：设置image.setAttribute(‘crossOrigin’,‘Anonymous’)绕z轴逆时针旋转角度：[[cosθ,-sinθ]，[sinθ，cosθ]]C2旋转B2OB1度到C3,然后C3旋转C3OB1度到Z轴。有A（x1，y1）、B（x2，y2）、C（x3，y3）无论绕那个轴，从正半轴向正半轴逆时针旋转都是正。
WebGL学习【焕新计划】
警警的博客
06-16 1287
在正式进入webgl之前，我想有必要简单了解一下渲染管线，毕竟它贯穿webgl学习的整个过程。
webgl学习笔记
zhoulib__的博客
06-17 336
opengl 纯可编程式管线技术
Webgl学习系列-Webgl 入门
wjsn520的博客
03-28 551
第二章 Webgl 入门。
webGL 学习
似水流年，举重若轻
01-13 372
1
webGl学习
手动滑稽你爸爸
07-31 153
开个新坑,不知道能不能做完 学习地址:mdn地址 浏览器支持范围:支持范围 首先是创建一个容器,与canvas的canvas.getContext('2d')相似 let canvas = document.getElementById('myCanvas'); let gl = canvas.getContext('webgl');
WebGL学习之路
GIS小虫的博客
04-07 5446
在这里记录一下个人的WebGL学习过程     作为GIS开发工程师四年，技术栈和项目经验都有了一定积累，感觉到了一个瓶颈。经过一些讨论和思考，认为可以向两个方向发力，后端方向的空间大数据处理，前端方向的三维。后端方向苦于以往接触的都是面向政府单位的项目，数据量和并发量都不大，后端能力也比较薄弱，所以先学习前端方向的三维开发。     GIS领域的三维开发有两个方向，一种基于桌面端三维引擎如UE、unity，另一种基于Web.
webgl学习路径
猿脑2.0的博客
10-03 419
WebGL（Web Graphics Library）是一种JavaScript API，用于在任何兼容的网页浏览器中不使用插件的情况下渲染2D图形和3D图形。
WebGL学习（一）渲染关系
huhuan123456的博客
05-28 1481
WebGL，全称Web Graphics Library，是一种在网页上渲染3D图形的技术。WebGL渲染管线可以想象成一个工厂流水线，它将3D模型转换为2D图像，供我们的眼睛欣赏。这个流水线分为几个主要阶段，每个阶段都对最终图像的生成起着至关重要的作用。整个WebGL渲染管线就像是一个精心设计的工厂，每个阶段都有其特定的任务，确保最终的图像既美观又符合3D世界的规则。学习webgl 开发理解渲染关系是必须的，也非常重要，很多人忽视了这个过程。中作为专项梳理，以为渲染关系，不是一句话两句话就可以讲明白的。
WebGL学习教程之Three.js学习笔记(第一篇)
10-17
Three.js是一个js的开源框架，它把webgl的所有东西都封装好了，我们不再需要去了解webgl那些比较麻烦的细节，直接在此框架上进行开发，既方便，又快捷，而且很容易就能学习,感兴趣的朋友跟随小编一起看看吧
WebGL学习变量、缓冲区、其他图形
04-01
### WebGL学习：变量、缓冲区、其他图形 #### 1. 变量 在WebGL的学习过程中，变量的使用非常重要，特别是在实现动态效果时。本节将深入探讨如何使用变量来控制绘制对象的位置和颜色。 ##### 1.1 跟随点击移动 ...
WebGL学习三维世界
04-01
### WebGL学习三维世界 在深入探讨如何利用WebGL创建三维世界的过程中，我们首先需要理解一些基本的概念和技术。本文将重点介绍如何使用WebGL绘制三维图形，并特别关注如何创建一个简单的立方体模型。此外，我们还...
webgl学习笔记初学记录00
10-15
它是WebGL学习笔记的重点，特别是在初学者阶段。WebGL的核心是光栅化引擎，它能够根据程序员编写的代码在GPU上绘制点、线和三角形，进而构建复杂的3D场景。 在WebGL中，所有图形渲染都是通过GPU来执行的，这需要...
10.2学习
2401_87363162的博客
10-02 1183
​ Spring AOP就是基于动态代理的，如果要代理的对象，实现了某个接⼝，那么Spring AOP会使⽤JDKProxy，去创建代理对象，⽽对于没有实现接⼝的对象，就⽆法使⽤ JDK Proxy 去进⾏代理了，这时候Spring AOP会使⽤基于asm框架字节流的Cglib动态代理 ，这时候Spring AOP会使⽤ Cglib ⽣成⼀个被代理对象的⼦类来作为代理。每个线程中都有一个自己的ThreadLocalMap类对象，可以将线程自己的对象保持到其中，各管各的，线程可以正确的访问到自己的对象。
jmeter学习（7）beanshell
最新发布
daxiashangxian的博客
10-06 424
打开日志选项，beanshell的log可以在日志中查看log.info("deviceId"）举例：获取返回数据中的字段。
关于懒惰学习与渴求学习的一份介绍
2301_79096986的博客
10-04 1217
在这篇文章中，我将介绍些懒惰学习与渴求学习的算法例子，会介绍其概念、优缺点以及其python的运用。
每日学习一个数据结构-默克尔树（Merkle Tree）
wendao76的专栏
10-06 1264
默克尔树（Merkle Tree），也称为哈希树，是一种二叉树结构，广泛应用于数据验证和完整性检查。它在区块链技术中尤为常见，但也有其他应用场景。默克尔树通过层次化的哈希结构，提供了高效、安全的数据完整性验证机制。它在区块链、分布式系统、网络安全等多个领域都有广泛的应用。理解默克尔树的工作原理和应用场景，有助于在实际开发中选择合适的工具和技术。希望这些解释对你有所帮助！如果有任何具体的问题或需要进一步的解释，请随时提问。
学习webgl推荐什么
04-01
作为AI语言模型，我无法推荐具体的学习资源，但是以下是一些可以考虑的学习webgl的方法： 1. 在线课程： Coursera、Udemy、edX、Khan Academy等网站都提供了丰富的在线课程，可以帮助你学习WebGL。 2. 图书： 有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值