WebGL学习之路

最新推荐文章于 2024-08-25 21:00:29 发布
最新推荐文章于 2024-08-25 21:00:29 发布
阅读量5.4k 收藏 15
点赞数 1
文章标签： 程序人生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/neuromancerr/article/details/124026345
版权

在这里记录一下个人的WebGL学习过程

    作为GIS开发工程师四年，技术栈和项目经验都有了一定积累，感觉到了一个瓶颈。经过一些讨论和思考，认为可以向两个方向发力，后端方向的空间大数据处理，前端方向的三维。后端方向苦于以往接触的都是面向政府单位的项目，数据量和并发量都不大，后端能力也比较薄弱，所以先学习前端方向的三维开发。
    GIS领域的三维开发有两个方向，一种基于桌面端三维引擎如UE、unity，另一种基于WebGL。游戏引擎的表现力优秀，和建模软件兼容优秀，不需要客户机太高的计算资源，但是学习成本较高。基于WebGL有一些封装的三维库如threejs，cesium，mapboxgl，上手难度低一些，但深度使用还是会碰壁，所以决定从基础起步学习WebGL，与其碰到问题再抓耳挠腮不如从头学起。
    目前计划是先看《交互式计算机图形学：基于WebGL的自顶向下方法（第七版）》，补一下图形学的理论，了解下WebGL的底层知识，然后跟着WebGL Fundamentals这个网站仔细过一下API，跟着The Book of Shaders过一下着色器，没事在shadertoy上看看。
    目标是能根据三维坐标点数据实现体渲染。——2022.04.07

GIS小虫
关注
WebGL技术学习之路
多多
07-05 4647
相比其他前端技术，WebGL最大的特点的就是学习曲线异常之陡，入门感觉比较难。另外在这方面的资料也非常少，一部分因为该技术出现的时间还比较晚，另外它和OpenGL这样成熟的技术类似，很多人熟悉了OpenGL之后并不再需要单独介绍WebGL。这里沉淀了目前LBS-WEB所积累下来的WebGL资源，供大家学习。 如何学习 这里给大家一些学习方法和经验： 找一本入门书籍开始阅读，作者最
webgl学习路线_WebGL：WebAssembly和功能路线图
culiao6493的博客
09-13 1281
webgl学习路线 昨天，来自Google ， Microsoft和Mozilla (Chrome，Edge和Firefox的制造商)的工程师宣布，他们正在开发一种称为WebAssembly的跨浏览器新技术。 这是非常令人振奋的消息，因为这将极大地改善Unity WebGL的体验。 (Yesterday, engineers fromGoogle, Microsoft and Mozilla (...
GIS WebGL 学习路径
椰子的职场成长记录
11-18 795
1. 前端基础 a. HTML (10 days: 21/11/08-21/11/17https://www.codecademy.com/learn/learn-html) b. CSS (21/11/18-https://www.codecademy.com/learn/learn-css) c. JavaScript 2.
学习WebGl基础知识（一）
最新发布
weixin_45231569的博客
08-25 768
学习WebGl基础知识（一）
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 入门
liubangbo的专栏
07-06 3686
webgl 是在网页上绘制和渲染三维图形的技术，可以让用户与其进行交互。我们之前学过的div+css、canvas 2d 都是专注于二维图形的，它们虽然也能模拟一部分三维效果，但它们和webgl 比起来，那就是玩具枪和AK47的差别。综上所述，webgl 绘图好麻烦啊！麻烦不是不学的理由，因为后面还有three.js 为你排忧解难。那我们为啥不直接学习three.js 呢？那是因为three.js 若是只想画个旋转的立方体还好，若是要深入学习，实现复杂的模型交互逻辑，就必须要有webgl 基础了。
webgl学习之路（三）——透视投影矩阵的推导过程
mmmMMM12345的博客
07-01 1078
关于透视投影矩阵的讲解，网上有不少教程，但是有一点大家基本上都没有讲清楚：就是z轴坐标（这里的Z轴相当于景深）的推导过程，基本上是一笔带过。 下面先从头开始讲推导过程，再慢慢说Z轴的推导过程。 透视投影如下图： 透视投影的过程如下：所观察的物体在一个半截面的方锥形中，设坐标为P，将P投影到近截面上，坐标为P’；如下图： 推导P'很简单，就是几何概念相似三角形，推导过程如下图： 大家注意，P’处的Z'坐标就是从视点O到近截面的距离。 但是大家可以考虑这样一个问题：那所有的物体在近截面的
WebGL学习教程之Three.js学习笔记(第一篇)
10-17
Three.js是一个js的开源框架，它把webgl的所有东西都封装好了，我们不再需要去了解webgl那些比较麻烦的细节，直接在此框架上进行开发，既方便，又快捷，而且很容易就能学习,感兴趣的朋友跟随小编一起看看吧
WebGL学习颜色与纹理
04-01
### WebGL学习颜色与纹理 #### 一、理解Varying变量的作用 在WebGL中，顶点着色器(Vertex Shader)和片段着色器(Fragment Shader)之间通过Varying变量进行通信。当我们想要为每个顶点指定不同的颜色时，就需要用到...
我的webgl学习之路（一）
七岁
05-01 5061
 我的webgl学习之路 （一） 做项目中偶然需要移动端3d展示，所以学习了threejs;但是有着各种限制，还有就是项目要达到好的效果肯定是需要后期处理等等，所以展开了我学习webgl之路，我刚开始毫无目的的看了很多关于webgl的博客，但是我总感觉有种没学懂的感觉，并且观看不同的资料我有着不同的感受与理解；所以我觉得，从头一步一步的来是很有必要的；综合我所有的感受，然后在从新复习一遍，尽量能从...
HTML5 WEBGL入门学习资料（整套）
01-02
HTML5 WEBGL入门学习资料（整套）
Webgl学习系列-Webgl 入门
wjsn520的博客
03-28 551
第二章 Webgl 入门。
WebGL学习笔记（一）
weixin_33971977的博客
01-27 175
作者：朱金灿来源：http://blog.csdn.net/clever101（一）WebGL是什么？ WebGL是一门在网页上显示三维图形的技术，你可以把它理解为把OpenGL从C/S端搬到了B/S端。因此它也就继承了OpenGL的跨平台的优势，同时它是以js程序的形式表现出来的，因此比起OpenGL程序多了一个优势：一次编写的代码满足目前所有的设备，包括PC、平...
webgl学习（一）
zhujiarunm的博客
06-08 514
第一次知道webgl是因为项目需要，老板让我去看看webgl。打开网站一堆英文表示看不懂，心累。意外发现了threejs，它是一个基于webgl的库，封装了一些3D渲染需求中重要的工具方法与渲染循环。这都没啥，重要的是他太炫了。在浏览器上直接搞3d，不需要你搭建什么环境也不需要你引入什么库。只要你的浏览器支持webgl就行。这要求很低了吧，感觉瞬间上来了。真香~ 上网买了一本《webgl编程指南》开始了痛并快乐的学习。所以本文的代码很多都可以从书上找到的。 先搞一个入门的例子，清空缓冲区...
webGl学习
手动滑稽你爸爸
07-31 153
开个新坑,不知道能不能做完 学习地址:mdn地址 浏览器支持范围:支持范围 首先是创建一个容器,与canvas的canvas.getContext('2d')相似 let canvas = document.getElementById('myCanvas'); let gl = canvas.getContext('webgl');
webGL 学习
似水流年，举重若轻
01-13 372
1
WebGL学习
jxjaqian的博客
08-22 321
WebGL学习（四） 运用鼠标控件对stl文件的查看 想要实现鼠标滑动，可旋转查看物体。从网上找到两种可实现的库，一个是OrbitControls.js，一个是TrackballControls.js，两者的共同点都是均能通过控制鼠标对场景物体进行查看，不同的是TrackballControls.js模拟的是球体转动，OrbitControls.js我也说不太来是怎样一种转动，知识点还没有...
学习webgl推荐什么
04-01
作为AI语言模型，我无法推荐具体的学习资源，但是以下是一些可以考虑的学习webgl的方法： 1. 在线课程： Coursera、Udemy、edX、Khan Academy等网站都提供了丰富的在线课程，可以帮助你学习WebGL。 2. 图书： 有...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值