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-图形非矩阵旋转相关推荐

webgl图形平移、缩放、旋转
文章目录前言平移图示代码示例缩放图示代码示例旋转公式推导代码示例总结前言在webgl中将图形进行平移.旋转.缩放的操作称为变换或仿射变换,图形的仿射变换涉及到顶点位置的修改, ...
利用欧拉角旋转正交_张量旋转=矩阵旋转？
最近又开始翻之前的一本流体力学书,Batchelor写的<An Introduction to Fluid Mechanics>,看到介绍流体微团张量部分,写到主轴张量只有正应力没有切应力 ...
洛谷P3933 Chtholly Nota Seniorious 【二分 + 贪心 + 矩阵旋转】
威廉需要调整圣剑的状态,因此他将瑟尼欧尼斯拆分护符,组成了一个nnn行mmm列的矩阵. 每一个护符都有自己的魔力值.现在为了测试圣剑,你需要将这些护符分成 A,B两部分. 要求如下: 圣剑的所有护符, ...
学废了系列 - WebGIS vs WebGL图形编程
前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积攒 ...
matlab因子载荷矩阵正交旋转,因素分析中的矩阵旋转
因素分析中的矩阵旋转因素分析法因素分析是一种统计技术,目的是从众多的可观测的"变量"中,概括和推论少数"因素".用最少数的"因素"来概括 ...
98. 分形之城（分形变换，矩阵旋转）
分形之城题目提交记录讨论题解视频讲解城市的规划在城市建设中是个大问题. 不幸的是,很多城市在开始建设的时候并没有很好的规划,城市规模扩大之后规划不合理的问题就开始显现. 而这座名为 Fra ...
北大OJ百练——4075:矩阵旋转（C语言）
百练的这道题很简单,通过率也达到了86%,所以我也就来贴个代码了...下面是题目: 不过还是说一下我的思路: 这道题对一个新来说,可能是会和矩阵的转置相混淆,这题并不是要我们去求矩阵的转置. 这题,我 ...
cad块炸开软件_CAD软件中将CAD图形定义为旋转动态块的操作技巧
在我们使用浩辰CAD软件绘制CAD图纸的过程中,如果频繁的创建图块,会浪费我们的时间,为了提高绘图速率,可以将CAD图纸中的图形定义为动态块,那怎么在CAD软件中将CAD图形定义为旋转动态块呢?接下来 ...
图形推理1000题及答案解析_判断推理图形推理——区分旋转翻转
点击上面蓝字关注我们区分旋转翻转时针法用来判定两个图形是通过旋转相互得到,还是通过翻转相互得到的. 时针法:在原图形中选取三个点,在待判定图形上标注同样三个点,依同样的次序通过这三个点的路径可以确 ...

webgl-图形非矩阵旋转

webgl-图形非矩阵旋转相关推荐

最新文章

热门文章