![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webgl
宁长风
白天coder,晚上reader
展开
-
webgl坐标系和canvas2d坐标系转换,简单易懂版
webgl坐标系:中心点为(0, 0)canvas 2d坐标系:左上角顶点为(0, 0)当我们需要用到鼠标点击的时候,只能获取到2d的坐标值,通过下面的代码就可以转换,看了好多人转换的代码,写了好多,不知道啥意思,感觉还是我的这个简单明了,有用收藏点赞了~canvas.addEventListener('click', ({clientX, clientY}) => { let w = canvas.offsetWidth / 2, h .原创 2022-03-23 15:47:15 · 496 阅读 · 1 评论 -
webgl怎么画一个三角形
<canvas id="canvas"></canvas><script id="vertexShader" type="x-shader/x-vertex">attribute vec4 v_position;void main(){ gl_Position = v_position; gl_PointSize = 30.0;}</script><script id="fragmentShader" type="x-s.原创 2022-03-22 10:52:12 · 204 阅读 · 0 评论 -
webgl--attribute相关使用
<script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_position;void main() { gl_PointSize = 20.0; gl_Position = a_position;}</script>- attribute 是存储限定符,是专门用于向外部导出与点位相关的对象的,这类似于es6模板语法中export 。- vec4 是变量类型,vec4是4维矢.原创 2022-03-18 16:37:57 · 624 阅读 · 0 评论