vue
XTfighting
这个作者很懒,什么都没留下…
展开
-
Vue与WebGL结合--逐片元光照
本文主要讲述Vue与WebGL结合并实现逐片元光照。文中部分代码源自《WebGL编程指南》代码如下<template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas> </div></template><s...原创 2020-04-20 22:56:35 · 443 阅读 · 0 评论 -
Vue与WebGL结合--MVP矩阵
本文主要介绍MVP矩阵,MVP矩阵实际上是由模型矩阵、视图矩阵以及投影矩阵组合而成,主要用于调整模型位置、观察模型位置以及相机投影信息。文中部分代码源自《WebGL编程指南》。代码如下:<template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas...原创 2020-04-11 23:36:07 · 841 阅读 · 2 评论 -
Vue与WebGL结合--多重纹理
本文在上篇文章的基础上利用Vue与WebGL结合添加多重纹理。文中部分代码和资源源自《WebGL编程指南》。代码如下:<template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas> </div></template...原创 2020-04-10 23:36:13 · 411 阅读 · 0 评论 -
Vue与WebGL结合--纹理
本文介绍vue与WebGL结合给四边形添加纹理,文中部分代码及图片源自《WebGL编程指南》。代码如下:<template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas> </div></template>&l...原创 2020-04-09 22:57:44 · 1119 阅读 · 0 评论 -
Vue与WebGL结合--绘制彩色点和三角形
上篇文章中的点的颜色都为红色,其中的颜色变量直接在片元着色器中设置完成。本文介绍将颜色数据与点的坐标数据一起传入着色器中进行点的颜色设置,需要用到varying类型变量。本文部分代码源自《WebGL编程指南》。代码如下:<template> <div> <canvas ref="myglCanvas" width="400" height="40...原创 2020-04-04 09:39:30 · 458 阅读 · 0 评论 -
Vue与WebGL结合--绘制不同大小的点
本文将点的尺寸变量传入顶点着色器,并将顶点坐标和尺寸数据存放在同一个缓冲区中进行渲染,达到绘制不同大小的点的目的,本文部分代码源自《WebGL编程指南》。代码如下:<template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas> <...原创 2020-04-03 22:46:16 · 422 阅读 · 0 评论 -
《WebGL编程指南》学习--绘制点
从事三维GIS很长时间了,一直都是做Cesium二次开发,但是基本不了解其底层原理。我深知自己还达不到看懂Cesium源码源码的水平,因此还得从基础做起,因此开始学习《WebGL编程指南》一书,并记录本人的心得体会。文中部分代码及截图源自《WebGL编程指南》。绘制一个点1、html文件中的代码:<body onload="main()"> <canvas i...原创 2020-03-19 11:42:54 · 286 阅读 · 0 评论 -
Vue与WebGL结合
本文将WebGL与当前前端比较火的Vue框架进行初步结合,以备后续项目开发需要。部分代码源自https://blog.csdn.net/GISuuser/article/details/82224057以及《WebGL编程指南》。大家可以自己百度搜索vue的安装配置。这里仅介绍本项目的开发过程。1、创建vue工程在cmd窗口中输入vue init webpackvueproject,...原创 2020-03-28 20:14:15 · 10407 阅读 · 1 评论 -
WebGL与Vue结合连续绘制点
本文主要介绍《WebGL编程指南》中连续绘制点功能的学习,并将代码改造在Vue框架中运行。部分代码源自https://blog.csdn.net/GISuuser/article/details/82224057以及《WebGL编程指南》。1、在src/components中新建canvas.vue文件。2、代码如下:<template> <div> ...原创 2020-03-28 20:46:24 · 418 阅读 · 0 评论 -
WebGL与Vue结合连续绘制彩色点
本文在上篇文章的基础上,将连续绘制的点改为随机的彩色点。直接上代码。<template> <div> <canvas ref="myglCanvas" @mousedown="clickCanvas($event)" width="400" height="400"></canvas> </div></tem...原创 2020-03-28 20:51:21 · 287 阅读 · 0 评论 -
Vue与WebGL结合绘制三角形
本文主要介绍Vue与WebGL结合绘制三角形,这里用到新的知识点--缓冲区。本文部分代码源自《WebGL编程指南》。这里创建了一个initBuffer的函数,用于操作缓冲区。代码如下<template> <div> <canvas ref="myglCanvas" @mousedown="clickCanvas($event)" width="4...原创 2020-04-02 23:13:24 · 688 阅读 · 0 评论 -
Vue与WebGL结合---旋转平移矩阵
本文在上文的基础上加上旋转平移矩阵,以达到对图像进行基本的旋转平移操作的目的。文中部分代码源自《WebGL编程指南》代码如下:<template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas> </div></templ...原创 2020-04-02 23:17:36 · 687 阅读 · 0 评论