![](https://img-blog.csdnimg.cn/20200402101204493.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
webgl
文章平均质量分 89
webgl
from_the_star
sorry,本人回复消息不及时,因工作繁忙很少上线。
展开
-
WebGL绘制如何进行优化?
很久之前写的笔记才贴出来,在某次面试之后,面试官问: 100万个模型绘制 ,很卡,你会怎么优化?我查询的大部分资料都是OpenGL的(太久了,没留下地址),所以我会根据自己的经验,说明下WebGL怎么做。影响性能的因素CPU过多的draw call(就是调用了drawElements或者是drawArrays函数,GPU就会根据渲染状态(例如材质、纹理、着色器等)和所有输入的顶点数据来进行计算,最终输出到屏幕)复杂的脚本或是物理模拟GPU顶点处理过多的顶点过多的逐顶点计算原创 2020-11-17 11:45:46 · 1286 阅读 · 0 评论 -
Three.js的渲染过程
主要基于WebGLRendere类的render方法开展,需要读者有基本的计算机图形知识,比如计算机图形管线(实时渲染管线)之类的。在Three.js的渲染中,大概可以分为以下几步:清空当前帧缓冲区,更新MVP矩阵;将物体分为透明和不透明两类,按照离摄像机从近到远排序(也可在Object3D单独设置renderOrder);根据灯光信息,阴影计算,如果有开启平面裁剪就对进行剪裁;开始逐个渲染物体,按以下顺序,背景、不透明物体、透明物体;渲染前后还有两个类似于生命周期的回调函数,scene.on原创 2020-11-02 20:32:59 · 3927 阅读 · 1 评论 -
OpenGL如何将像素点的窗口空间坐标转换为世界坐标?
坐标变换的流程我们探讨的其实就是输入的顶点怎么变换为像素点的坐标(也就是窗口空间坐标),具体矩阵怎么求得感兴趣可以看下这篇文章。从物体空间到世界空间的变换是通过乘以基本变换矩阵(模型矩阵ModelMatrix)来实现的。从世界空间到摄像机空间的变换是通过乘以视图矩阵(ViewMatrix)来实现的、从摄像机空间到剪裁空间的变换是通过乘以投影矩阵(ProjectMatrix)来完成的,根据需求的不同可以选用正交投影或透视投影的相关变换矩阵。乘以投影矩阵后,任何一个点的坐标[x, y, z, w]原创 2020-07-15 17:55:02 · 4436 阅读 · 20 评论 -
计算机图形管线(实时渲染管线)
在计算机图形学中,计算机图形管线(渲染管线 或简称 图形管线)是一个概念模型,它描述了图形系统将 3D场景渲染到2D屏幕所需执行的步骤 。一旦创建了3D模型(例如在视频游戏或任何其他3D计算机动画中),图形管道就是将3D模型转换为计算机显示内容的过程。因为此操作所需的步骤取决于所使用的软件和硬件以及所需的显示特性,所以没有适用于所有情况的通用图形管线。顶点着色器(可编程),将顶点数组的点逐个传入顶点着色器进行处理,比如说旋转、视图透视投影转换等,再输出顶点数据几何着色器(可编程).原创 2020-07-06 01:08:05 · 1028 阅读 · 0 评论 -
ThreeJS(WebGL)如何使用UV坐标贴图,实现UV旋转偏移?
ThreeJS是WebGL的一种前端框架,UV坐标的原理是一样的。前置知识WebGL纹理如果对WebGL有兴趣,可以去看WebGL贴材质这篇文章简单了解下。纹理坐标系统uv其实就是纹理坐标,因为xyz已经被顶点坐标占用了,所以uvw就用来表示纹理坐标。它时候贴图影射到模型表面的依据,把表面的点与平面上的像素对应起来,一般取值在0~1;u:图片在显示器水平的坐标v:垂直方向w:垂直于显示器表面一般情况只是在表面贴图,就涉及不到w,所以常称为uv。ThreeJS纹理贴图使用纹理对象贴图T原创 2020-06-07 00:33:06 · 7568 阅读 · 2 评论 -
WebGL(四)初入三维世界
在说完矩阵相关的知识后,就可以进入三维世界了。三维世界有两个很基本的东西:相机:正交相机就是 正交投影矩阵 * 视图矩阵 * 物体顶点透视相机就是 透视投影矩阵 * 视图矩阵 * 物体顶点三维物体:本文就说正方形的绘制,三维物体都是由三角形组成的,两个三角形组成一个面,六个面组成一个正方体,相信大家都知道了。本文相关的代码在链接的ch7文件夹。正方体绘制采用另外一种绘制方式gl...原创 2020-04-22 13:58:24 · 219 阅读 · 0 评论 -
WebGL(四)三维世界的重要矩阵
三维世界与二维世界最大的区别就是有深度,也就是Z轴。但在计算机上,我们还是把三维世界场景绘制到二维的屏幕上。本节代码在链接的ch07文件夹,矩阵相关的在lib文件夹中的cuon-matrix.js。如何将三维世界上的物体投影到二维屏幕?这里的处理用到三个矩阵转换:模型矩阵:用来移动、旋转、拉伸物体。具体矩阵使用方式看这里。视图矩阵:获取在视点也就是相机位置观察到的场景。投影矩阵:将三...原创 2020-04-21 18:29:54 · 896 阅读 · 0 评论 -
WebGL(三)学会贴纹理
本节代码在链接的ch05文件夹MultiTexture.js(贴了两张纹理)重点在片元着色器,还有initTextures函数// MultiTexture.js (c) 2012 matsuda and kanda// Vertex shader programvar VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'attr...原创 2020-04-02 16:53:38 · 902 阅读 · 0 评论 -
WebGL(二)基本几何图元绘制
本节代码在链接的ch03文件夹HelloTriangle.js// HelloTriangle.js (c) 2012 matsuda// Vertex shader programvar VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'void main() {\n' + ' gl_Position = a_Positi...原创 2020-04-02 15:18:42 · 853 阅读 · 0 评论 -
WebGL(一)从最简单的代码认识WebGL
本节代码在链接的ch02文件夹index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>Draw a point (1)</title> </head> <body on...原创 2020-04-02 13:32:51 · 555 阅读 · 0 评论