腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

代码编写世界

专栏作者

188

文章

310226

阅读量

29

订阅数

QtWebEngine性能问题

qt 网站 opengl api webgl

Qt的Qt WebEngine模块是基于Chromium项目，但是本人在使用QWebEngineView进行Web端的三维渲染（WebGL）时，经过测试发现性能比不上Chrome。查阅了一些资料，记录一下对这个问题的尝试。

2022-05-07

1.8K0

WebGL或OpenGL关于模型视图投影变换的设置技巧

opengl webgl api html

看了不少的关于WebGL/OpenGL的资料，笔者发现这些资料在讲解图形变换的时候都讲了很多的原理，然后举出一个特别简单的实例(坐标是1.0，0.5的那种)来讲解。确实一看就懂，但用到实际的场景之中就一脸懵逼了（比如地形的三维坐标都是很大的数字）。所以笔者这里结合一个具体的实例，总结下WebGL/OpenGL中，关于模型变换、视图变换、投影变换的设置技巧。

2022-05-05

9040

Cesium渲染一帧中用到的图形技术

本文通过追溯Cesium的Scene.render，解释了Cesium 1.9如何使用其WebGL渲染器渲染每一帧。在Scene.render中放置一个断点，运行一个Cesium应用，然后继续。

2020-12-29

2.9K0

three.js中帧缓存的使用

缓存 webgl 渲染 javascript

在网上查阅了一下three.js关于帧缓存的使用，感觉很多都是关于three.js中后处理通道的使用的。后处理通道确实使用FBO实现的，但其实我就是想获取某个时刻的渲染结果作为纹理，没必要在动态渲染中进行后处理。真正实现这个功能的是WebGLRenderTarget这个类，这是一个渲染目标的缓冲区，可以装载到WebGLRenderer中进行渲染，再从WebGLRenderTarget获取纹理对象。

2020-06-22

4.1K0

three.js中场景模糊、纹理失真的问题

javascript webgl

在three.js场景中，有时会遇到场景模糊，纹理失真的现象，似乎three.js并没有用到纹理图片应有的分辨率。可以通过相关设置来解决这个问题。

2020-06-16

6.5K0

three.js中的矩阵变换(模型视图投影变换)

对象存储 javascript 图像处理编程算法 webgl

我在《WebGL简易教程(五)：图形变换(模型、视图、投影变换)》这篇博文里详细讲解了OpenGL\WebGL关于绘制场景的图形变换过程，并推导了相应的模型变换矩阵、视图变换矩阵以及投影变换矩阵。这里我就通过three.js这个图形引擎，验证一下其推导是否正确，顺便学习下three.js是如何进行图形变换的。

2020-05-08

5.8K0

Cesium案例解析(四)——3DModels模型加载

图像处理 webgl

Cesium自带的3D Models示例，展示了如何加载glTF格式三维模型数据。glTF是为WebGL量身定制的数据格式，在网络环境下有自己的优点。可以在Cesium的源码包中找到一些该类型的数据。

2020-02-24

4K0

WebGL简易教程(十五)：加载gltf模型

编程算法 webgl json

一般来说，图形渲染总是需要从磁盘数据开始，最终保存到磁盘数据中，保存这种数据的就是3D模型文件。3D模型文件一般会把顶点、索引、纹理、材质等等信息都保存起来，方便下次直接读取。3D模型文件格式一般是与图形渲染工作强关联的，了解3D模型文件格式的组成，有助于进一步了解图形渲染的流程。

2020-02-14

4.3K1

WebGL简易教程(十四)：阴影

缓存 webgl 渲染编程算法

所谓阴影，就是物体在光照下向背光处投下影子的现象，使用阴影技术能提升图形渲染的真实感。实现阴影的思路很简单:

2019-12-10

1.6K0

WebGL简易教程(十三)：帧缓存对象(离屏渲染)

webgl 渲染缓存

事物是普遍联系的。为了达到更加真实的渲染效果，很多时候需要利用被渲染物体在其他状态下的中间渲染结果，处理到最终显示的渲染场景中。这种中间渲染结果，就保存在帧缓冲区对象（framebuffer object，简称FBO）中，用来替代颜色缓冲区或深度缓存区。由于其结果并不直接被显示出来，所以这种技术也被称为离屏绘制（offscreen drawing）。

2019-12-02

2.5K0

WebGL简易教程(十二)：包围球与投影

在之前的教程中，都是通过物体的包围盒来设置模型视图投影矩阵（MVP矩阵），来确定物体合适的位置的。但是在很多情况下，使用包围盒并不方便计算，可以利用包围盒再生成一个包围球，利用包围球来设置MVP矩阵。

2019-11-12

8410

WebGL简易教程(十一)：纹理

webgl 编程算法

在之前的之前的教程《WebGL简易教程(九)：综合实例：地形的绘制》中，绘制了一个带颜色的地形场景。地形的颜色是根据高程赋予的RGB值，通过不同的颜色来表示地形的起伏，这是表达地形渲染的一种方式。除此之外，还可以将拍摄得到的数字影像，贴到地形上面，得到更逼真的地形效果。这就要用到我们这一章的新知识——纹理了。

2019-10-18

1K0

WebGL简易教程(六)：第一个三维示例(使用模型视图投影变换)

webgl html javascript

在上一篇教程《WebGL简易教程(五)：图形变换(模型、视图、投影变换)》中，详细讲解了OpenGL\WebGL关于绘制场景的模型变换、视图变换以及投影变换的过程。不过那篇教程是纯理论知识，这里就具体结合一个实际的例子，进一步理解WebGL中是如何通过图形变换让一个真正的三维场景显示出来。

2019-10-08

6260

WebGL简易教程(七)：绘制一个矩形体

编程算法 webgl

在上一篇教程《WebGL简易教程(六)：第一个三维示例(使用模型视图投影变换)》中，通过使用模型视图投影变换，绘制了一组由远及近的三角形。但是这个示例还是太简单了，这几个三角形的坐标仍然是-1到1之间的坐标，无论如何都是很容易设置参数的，可能并不能很深入的理解模型视图投影变换。

2019-10-08

1.6K0

WebGL简易教程(五)：图形变换(模型、视图、投影变换)

webgl opengl 对象存储 api

通过之前的教程，对WebGL中可编程渲染管线的流程有了一定的认识。但是只有前面的知识还不足以绘制真正的三维场景，可以发现之前我们绘制的点、三角形的坐标都是[-1,1]之间，Z值的坐标都是采用的默认0值，而一般的三维场景都是很复杂的三维坐标。为了在二维视图中绘制复杂的三维场景，需要进行相应的的图形变换；这一篇教程，就是详细讲解WebGL的图形变换的过程，这个过程同样也适合OpenGL/OpenGL ES，甚至其他3D图形接口。

2019-10-08

2.6K0

WebGL简易教程(四)：颜色

编程算法 webgl

在上一篇教程《WebGL简易教程(三)：绘制一个三角形(缓冲区对象)》中，通过使用缓冲区对象(buffer object)来向顶点着色器传送数据。那么，如果这些数据（与顶点相关的数据，如法向量、颜色等）需要继续传送到片元着色器该怎么办呢？

2019-09-29

8560

WebGL简易教程(三)：绘制一个三角形(缓冲区对象)

webgl 编程算法 javascript html

在上一篇教程《WebGL简易教程(二)：向着色器传输数据》中，通过向着色器(shader)传输数据，改变了绘制点的大小和颜色。之前的例子只能绘制一个点，如果需要绘制如三角形、矩形或者立方体等稍微复杂的图形，需要怎么做呢？这个时候就需要一种很方便的机制——缓冲区对象（buffer object）。

2019-09-11

9170

WebGL的颜色渲染-渲染一张DEM(数字高程模型)

webgl html javascript 编程算法渲染

通过WebGL，可以渲染生成DEM(数字高程模型)。DEM(数字高程模型)是网格点组成的模型，每个点都有x，y，z值；x，y根据一定的间距组成网格状，同时根据z值的高低来选定每个点的颜色RGB。通过这个例子可以熟悉WebGL颜色渲染的过程。

2019-08-13

1.2K0

WebGL简易教程(二)：向着色器传输数据

webgl https 编程算法网络安全

在上一篇教程《WebGL简易教程(一)：第一个简单示例》中，通过一个绘制点的例子，对WebGL中的可编程渲染管线有了个基本的认识。在之前绘制点的例子中，点的位置，点的大小，点的颜色，都是固定写在着色器中的，这样的程序是缺乏可扩展性的。

2019-08-13

6750

WebGL简易教程(一)：第一个简单示例

webgl opengl api canvas html

不得不说现在三维图形渲染技术更新换代实在是太快,OpenGL很多资料还没来得及学习就已经有点落伍了。NeHe的学习教程还有之前用的《OpenGL编程指南》第七版（也就是红宝书）都非常好，可惜它们都是从固定管线开始讲起的;而现在可编程管线的技术已经是非常常见的基础技术了。后来我还看过《OpenGL编程指南》第八版（白皮书），这本教程是从可编程管线（着色器）开始讲起的，看的时候就觉得没有前面的基础打底，显得非常的晦涩，远不如红宝书易懂。羞愧的说，我已经多次入门失败了。

2019-08-13

1.6K0

点击加载更多

社区活动

RAG七天入门训练营

鹅厂大牛手把手带你上手实战，赢鹅厂证书、公仔好礼！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态