Laya引擎支持WebGL和canvas两种渲染方式，可以在引擎初始化时选择渲染方式Laya.init(width,height,WebGL);//WebGL模式Laya.init(width,height);//canvas默认为canvas模式canvas是一个H5标签，作用是在网页上画图，但是只支持2D，不支持3D。WebGL是一种3D绘图标准，WebGL支持3D，且性能优于canvas。所以现在能用WebGL的都用WebGL,有些项目用canvas是因为部分手机不支持WebGL。.
转载
2021-08-12 14:21:47
2850阅读
原作者杉本雅広(doxas)，文章中假设有我的额外说明，我会加上［lufy：］。另外。鄙人webgl研究还不够深入，一些专业词语，假设翻译有误，欢迎大家指正。必须准备的东西上次介绍了3D画图的基础知识。讲了一下由Z坐标的不同决定的两种坐标系。以及坐标变换的种类。这一次，说一说实际WebGL画图的时候必须准备的东西。首先，HTML。javascript相关的基础知识就不解释了。假设，有不明确的单词或
转载
2015-07-17 08:18:00
76阅读
01PART什么是渲染渲染这个词汇对于各位同学都是不陌生的，不同职能的同学又有不同的理解，对于美术同学来说，渲染是一种技法，对于文案同学来说，渲染是写文章时对气氛的描绘，那么，计算机图形学中，什么是渲染呢。图形学中其实用Render要比渲染更加的贴切，渲染是Render的一种翻译，其实用绘制要更加的清晰，计算机图形学中的渲染，本质是通过计算机程序从2D/3D模型(或者统称为场景文件的模型)中绘制成
webgl系列：webgl基础网站分享
转载
2022-09-27 16:18:05
636阅读
首先什么是webgl？webgl是一个光栅化引擎，绘制点，线和三角形。什么是顶点着色器和片段着色器？webgl是运行在GPU中的，需要提供能够在GPU上运行的代码，即顶点着色器和片段着色器，每一对组合称为一个着色程序program，顶点着色器计算定点位置，片段着色器计算图元中像素的颜色值。着色器怎么获取数据？属性Attributes和缓冲，通常包括位置，法向量，纹理坐标，顶点颜...
原创
2022-08-05 15:27:36
155阅读
参考文章：https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-fundamentals.html#toc着色器We着色程序）。两种着色器每对
原创
2022-08-18 09:17:32
312阅读
，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系...
转载
2022-11-02 15:33:17
242阅读
WebGLRenderer 是 Three.js 中的一个渲染器，用于将 3D 场景通过 WebGL 渲染到 HTML 元素上。它主要负责将 3D 对象、材质、光照等转换为可在浏览器中显示的 2D 图像。WebGLRenderer( parameters : Object )
parameters - (可选) 该对象的属性定义了渲染器的行为。也可以完全不传参数。在所有情况下，当缺少参数
子流程依赖：渲染流程的子流程会自动进行图像布局变换。这一变换过程由子流程的依赖所决定。子流程的依赖包括子流程之间的内存和执行的依赖关系。虽然我们现在只使用了一个子流程，但子流程执行之前和子流程执行之后 的操作也被算作隐含的子流程。在渲染流程开始和结束时会自动进行图像布局变换，但在渲染流程开始时进行的自动变换的时机和我们的需求不符，变换发生在管线开始时，但那时我们可能还没有获取到交换链图像。有两种方
转载
2024-10-25 14:16:58
148阅读
7.2.3渲染到纹理 渲染到纹理的实现手段：直接复制帧缓存（Frame Buffer）中的像素；使用像素缓存设备；使用帧缓存对象（Frame Buffer Object，FBO）定义一种不参与显示的，由应用程序创建的帧缓存，称之为帧缓存对象（FBO）。7.3视景器相机节点解决了高效地实现三维世界向二维窗口的变换；图形设备确立了相机拍摄的内容与某个图形窗口或像素缓存设备的对应关系；那么视景
转载
2024-06-11 21:58:33
97阅读
1.离屏渲染使用场景：1.游戏中的小地图； 2.画中画场景； 3.游戏中观战模式的多场景场合； 4.镜像场景——比如汽车游戏当中的倒车镜，采用的就是离屏渲染技术，在倒车镜上安装一个摄像机，把摄像机渲染的数据保存到FBO（Frame Buffer Object帧缓冲区），再从FBO提取生成纹理进行贴图到倒车镜；2.与实时渲染的优缺点比较：离屏渲染： 1.在变化的场景下，因为离屏渲染需要创建一个新的缓
转载
2024-05-24 23:25:51
337阅读
介绍从基础理论开始学习 WebGL，稳！这有一系列教程，从 WebGL 的基本理论讲起。 它们不像大多数其他教程那样改编自旧的 OpenGL 文章。 它们去旧迎新，丢弃一些过时的思想，让你彻底了解 WebGL 的工作原理。如果你对 WebGL2 感兴趣可以到这里看看 webgl2fundamentals.org理论基础基础概念WebGL 基础概念WebGL 工作原理We
转载
2022-08-18 09:16:00
279阅读
点赞
一，index.html<body>
<script id="vertex-shader-2d" type="notjs">
attribute vec2 a_position;
attribute vec2 a_texCoord;
uniform vec2 u_resolution;
uniform vec2 u_translation;
unifo
原创
精选
2024-01-22 21:21:06
557阅读
一， index.html<body>
<script id="vertex-shader-2d" type="notjs">
attribute vec2 a_position;
attribute vec2 a_texCoord;
uniform vec2 u_resolution;
uniform vec2 u_translation;
unif
原创
精选
2024-01-24 21:42:12
663阅读
Yuv420P格式在安防视频中非常常见，因为H264或者H265解码之后，就是这种格式。YUV定义了三个分量：“Y”表示明亮度（Luminance或Luma）也就是灰度值。U和V表示色度。即我们的Yuv420P会保存3种分量的数据。这里以一个4*4的图像为例，其保存的方式。Y0Y1Y2Y3Y4Y5Y6Y7Y8Y9Y10Y11Y12Y13Y14Y15U
原创
2021-09-22 10:19:44
10000+阅读
前言：(十分重要)上节文章中，跟大家分享了一下如何入门 webgl 并在画布上绘制一个点。诚然，我们看到的流程是十分繁琐的。这里想说明的一点是，webgl 基础很类似于 JavaScript 基础。在学习 JavaScript 的时候如果直接上手 jquery、vue、react、angular…… 想必之后的天花板会非常非常低。因为学习曲线决定了上手难度，而基础决定了天花板高度。学习 webgl
转载
2021-01-15 17:32:23
664阅读
2评论
一 基础概念
1. 关于canvas 、 webgl 、 skia 、canvasKit
ctx.getContext('2d ' / 'webgl ' / 'webgl2')；
类型 2d 、webgl、webgl2 有什么不同？
canvas2d 主要的性能问题就在于，绘制中间对象没法缓存，以及部分能力需要 CPU 计算这两点上。 而 canvaskit 在提供了类似 canvas 2d 的
原创
2023-11-23 10:33:07
317阅读
一， index.html二， shader.js/**
* 加载图片
* @param imageName
* @param pork
* @param callback
*/
function loadImage(imageName, pork, callback) {
const image = new Image();
image.src = "http://127.0.0.
原创
2024-01-19 21:09:33
476阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> /* 移除边界 */
原创
2022-08-05 16:00:49
97阅读
一，index.html二，shader.js/**
* 加载图片
* @param imageName
* @param pork
* @param callback
*/
function loadImage(imageName, pork, callback) {
const image = new Image();
image.src = "http://127.0.0.1:
原创
2024-01-18 22:00:01
695阅读
