webgl-图形非矩阵旋转

这篇具有很好参考价值的文章主要介绍了webgl-图形非矩阵旋转。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

知识拓展

webgl-图形非矩阵旋转

由(x1,y1)旋转β角度到(x2,y2)

根据圆极坐标方程

x1 = r*cosα

y1 = r*sinα

可得

x2 =r*cos(α + β)= r*cosα*cosβ - r*sinα*sinβ,因为x1 = r*cosα,y1 = r*sinα,所以x2 = x1*cosβ -y1*sinβ

y2 = r*sin(α + β) = r*sinα*cosβ + r*cosα*sinβ,因为x1 = r*cosα,y1 = r*sinα,所以y2 = y1* cosβ + x1*sinβ

因此

(x1,y1)旋转β角度到(x1*cosβ -y1*sinβ, y1* cosβ + x1*sinβ)

关键代码

//创建顶点资源和像素资源(颜色)

let vertexSource = `

attribute vec2 a_position;

attribute float cosB;

attribute float sinB;

void main() {

  float x1 = a_position.x;

  float y1 = a_position.y;

  float x2 = x1*cosB - y1*sinB;

  float y2 = x1*sinB + y1*cosB;

  gl_Position = vec4(x2, y2, 0.0, 1.0);

  gl_PointSize = 10.0;

}

`

html

<!DOCTYPE html>

<head>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

    </style>

</head>

<body>

    <canvas id = 'webgl'>

        您的浏览器不支持HTML5,请更换浏览器

    </canvas>

    <script src="./main.js"></script>

</body>

main.js

let canvas = document.getElementById('webgl')

canvas.width = window.innerWidth

canvas.height = window.innerHeight

let radio = window.innerWidth/window.innerHeight;

let ctx = canvas.getContext('webgl')

//创建顶点资源和像素资源(颜色)

let vertexSource = `

attribute vec2 a_position;

attribute float cosB;

attribute float sinB;

void main() {

  float x1 = a_position.x;

  float y1 = a_position.y;

  float x2 = x1*cosB - y1*sinB;

  float y2 = x1*sinB + y1*cosB;

  gl_Position = vec4(x2, y2, 0.0, 1.0);

  gl_PointSize = 10.0;

}

`

let fragmentSource = `

precision mediump float;

void main (){

  gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);

}

`

if (initShader(ctx, vertexSource, fragmentSource)) {

    //画三角形

    let vertexs = [

        //   x     y    R    G    B

        -0.5, 0.0, 1.0, 0.0, 0.0, //第一个点的信息

        0.5, 0.0, 0.0, 1.0, 0.0, //第二个点的信息

        0.0, 0.5, 0.0, 0.0, 1.0,//第三个点的信息

    ]

    let float32Array = new Float32Array(vertexs)

    //创建buffer

    let buffer = ctx.createBuffer()

    //绑定buffer

    ctx.bindBuffer(ctx.ARRAY_BUFFER, buffer)

    //往buffer中填充值,并指定数据用途

    ctx.bufferData(ctx.ARRAY_BUFFER, float32Array, ctx.STATIC_DRAW)

    //获取vertexShader指定变量内存

    let a_Position = ctx.getAttribLocation(ctx.program, "a_position")

    //指定每两个数组元素为一个点

    /*

     * 当数组元素不需进行分割拆分的时候最后两位可以指定为0,0

     *

     *

     */

    ctx.vertexAttribPointer(

        a_Position, //location: vertex Shader里面的attributes变量的location

        2, ctx.FLOAT, //size: attribute变量的长度 vec2长度2 vec3长度3

        false, //normalized: 正交化 true或false  , [1, 2] => [1/根号5, 2/根号5]

        5 * float32Array.BYTES_PER_ELEMENT, //stride: 每个点的信息所占的BYTES

        0 //offset: 每个点的信息,从第几个BYTES开始数

    )

    ctx.enableVertexAttribArray(a_Position);

    // ctx.drawArrays(ctx.TRIANGLE_FAN, 0, 3)


 

    let angle = 0

    function render(){

        angle++

        let cosB = ctx.getAttribLocation(ctx.program, "cosB")

        let sinB = ctx.getAttribLocation(ctx.program, "sinB")

        ctx.vertexAttrib1f(cosB, Math.cos(angle/180 * Math.PI))

        ctx.vertexAttrib1f(sinB, Math.sin(angle/180 * Math.PI))

        ctx.drawArrays(ctx.TRIANGLE_FAN, 0, 3)

      window.requestAnimationFrame(render)

    }

    render()

}


 

//创建顶点阴影和像素阴影

function createShader(ctx, type, source) {

    //创建shader

    let shader = ctx.createShader(type)

    //绑定

    ctx.shaderSource(shader, source)

    //编译shader

    ctx.compileShader(shader)

    //获取编译结果

    let compiler = ctx.getShaderParameter(shader, ctx.COMPILE_STATUS)

    if (compiler) {

        return shader

    } else {

        let log = ctx.getShaderInfoLog(shader)

        console.log("compile shaders error", log)

        //删除异常的shader,防止内存泄露

        ctx.deleteShader(shader)

        return null

    }

}

function createProgram(ctx, vertexShader, fragmentShader) {

    //创建program

    let program = ctx.createProgram()

    if (!program) {

        return null

    }

    //点资源和像素资源合并

    ctx.attachShader(program, vertexShader)

    ctx.attachShader(program, fragmentShader)

    ctx.linkProgram(program)

    //获取linked的结果

    let linked = ctx.getProgramParameter(program, ctx.LINK_STATUS)

    if (linked) {

        return program

    } else {

        //获取link错误信息

        let log = ctx.getProgramInfoLog(program)

        console.log("link program error", log)

        //删除防止内存泄漏

        ctx.delete(program)

        ctx.deleteShader(vertexShader)

        ctx.deleteShader(fragmentShader)

        return null

    }

}

function initShader(ctx, vertexSource, fragmentSource) {

    let vertexShader = createShader(ctx, ctx.VERTEX_SHADER, vertexSource)

    let fragmentShader = createShader(ctx, ctx.FRAGMENT_SHADER, fragmentSource)

    let program = createProgram(ctx, vertexShader, fragmentShader)

    if (program) {

        ctx.useProgram(program)

        //挂载到ctx

        ctx.program = program

        return true

    } else {

        return false

    }

}

效果图

webgl-图形非矩阵旋转文章来源地址https://www.toymoban.com/news/detail-429698.html

到了这里,关于webgl-图形非矩阵旋转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 图像旋转角度计算并旋转

    使用两张测试图片如下:   对于lena的图像测试结果如下:   另一张测试图片结果如下:    也可以使用下面代码进行测试: lena结果如下: 美女图片测试结果: 说明: 以上代码仅仅是讲解介绍了图像旋转的计算及矫正原理,实际上准确度受不同图像的影响较大,不过里面使用的相

    2024年01月25日
    浏览(45)
  • Qt/C++音视频开发63-设置视频旋转角度/支持0-90-180-270度旋转/自定义旋转角度

    设置旋转角度,相对来说是一个比较小众的需求,如果视频本身带了旋转角度,则解码播放的时候本身就会旋转到对应的角度显示,比如手机上拍摄的视频一般是旋转了90度的,如果该视频文件放到电脑上打开,一些早期的播放器可能播放的时候是躺着的,因为早期播放器设

    2024年02月02日
    浏览(55)
  • 【数理知识】求刚体旋转矩阵和平移矩阵,已知 N>=3 个点在前后时刻的坐标,且这 N>=3 点间距离始终不变代表一个刚体

    序号 内容 1 【数理知识】自由度 degree of freedom 及自由度的计算方法 2 【数理知识】刚体 rigid body 及刚体的运动 3 【数理知识】刚体基本运动,平动,转动 4 【数理知识】向量数乘,内积,外积,matlab代码实现 5 【数理知识】最小二乘法,从线性回归出发,数值举例并用最小

    2024年02月13日
    浏览(43)
  • 【数理知识】三维空间旋转矩阵的欧拉角表示法,四元数表示法,两者之间的转换,Matlab 代码实现

    序号 内容 1 【数理知识】自由度 degree of freedom 及自由度的计算方法 2 【数理知识】刚体 rigid body 及刚体的运动 3 【数理知识】刚体基本运动,平动,转动 4 【数理知识】向量数乘,内积,外积,matlab代码实现 5 【数理知识】最小二乘法,从线性回归出发,数值举例并用最小

    2024年02月12日
    浏览(51)
  • Python实现图像旋转到指定角度

    Python实现图像旋转到指定角度 在日常的图像处理中,我们有时需要将一张图片旋转到指定的角度,从而达到预期的效果。本文将介绍如何使用Python实现图像的旋转,并给出代码实现。 首先,我们需要导入必要的库:OpenCV和NumPy。其中,OpenCV用来读取图片和进行图像处理,Nu

    2024年02月08日
    浏览(61)
  • C# PaddleInference 图片旋转角度检测

    目录 效果 项目 代码 下载    VS2022+.net4.8+ OpenCvSharp4+Sdcb.PaddleInference using OpenCvSharp; using Sdcb.PaddleInference; using Sdcb.PaddleInference.Native; using System; using System.Drawing; using System.Globalization; using System.Linq; using System.Runtime.InteropServices; using System.Text; using System.Windows.Forms; namespace PaddleInfe

    2024年02月13日
    浏览(43)
  • C# RotationDetector 图片旋转角度检测

    目录 效果 项目 代码 下载  VS2022+.net4.8+ OpenCvSharp4+Sdcb.RotationDetector using OpenCvSharp; using Sdcb.RotationDetector; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace RotationDetector_图片旋转角

    2024年02月12日
    浏览(48)
  • React Native元素旋转一定的角度

    参考链接: https://reactnative.cn/docs/transforms https://chat.xutongbao.top/

    2024年02月14日
    浏览(35)
  • Android多张图片rotation旋转角度叠加/重叠堆放

    Android大图片之缩略图,以及对原图按照指定宽高裁剪成缩略图-CSDN博客 文章浏览阅读5.3k次。《Android大图片之变换缩略图,以及对原始大图片按照指定宽、高裁剪成缩略图》在Android的ImageView加载图像资源过程中,出于性能和内存开销的需要,有时候需要把一个原始的超大

    2024年02月07日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包