首页 > TAG信息列表 > WebGL
几种将将虚幻引擎内容流送到多个平台的推流方案比较
将虚幻引擎内容流送到多个平台，比较 HTML5、WebGL 和像素流送、Raystreaming。 简介 在开发联网用户体验时，如何共享内容始终影响着协作、生产和发布中的关键决策。假如用户在消费并与共享内容进行交互时会使用个人电脑、平板电脑、智能手机等各类设备，那么就会面临一个关键问题：如何WebGL压缩纹理实践
0x01 本文将讲述压缩纹理在实际项目中的使用的案例。最近的一个项目是这样的：项目由于涉及到的建筑物特别多，大概有近40栋的建筑，而每一栋建筑物，又有10层楼，每层楼里面又有很多的设备。这就导致我们需要使用到大量的贴图。在实际的项目过程中，我们的客户的电脑会经常遇到webgl崩溃的情unity打包webgl
tip：本文unity使用2021版本 选择文件->生成设置，如图1所示； 图1： 弹出“构建设置对话框”，如图2所示； 点击图中2位置中的“添加已打开场景”按钮，添加需要打包的场景。 点击图中1位置平台列表，选中WebGL。 选择图中3位置的“玩家设置”按钮，打开“项目设置对话框”，如图3所示； 找到图3中1位webgl丢失上下文
webgl丢失上下文 一、原理 WebGL使用了计算机的图形硬件，而这部分资源是被操作系统管理，由包括浏览器在内的多个应用程序共享。如果一个程序接管了图形硬件，或者操作系统进入休眠，浏览器就会失去使用这些资源的权力，并导致存储在硬件中的数据丢失。在这种情况下，WebGL绘图上下文就会Filed Play：简介
目录 引子 What? How this project works? Float packing 参考资料 引子 在尝试数学函数可视化的时候，发现了一个有趣的库 Field Play ，对 README 中的说明进行部分翻译记录，做个初步了解。 Origin My GitHub What? 让我们为网格上的每个点指定一个向量 (1, 0) 。这意味着我们基于webgl(threejs)的路面编辑
楔子 在很多应用中，特别是一些园区类的应用。 都需要对园区的地面 环境进行展示，路面就是地面的一部分。 通常的做法是，都是建模的时候把相关的元素都建好，然后导入到展示系统中进行展示。 不过有些情况下，可能建模并不太方便，所以三维编辑器可以直接进行简单的路面编辑显得挺有必要。JavaScript WebGL 绘制顺序
引子 在 JavaScript WebGL 三维相关概念中尝试一些效果的时候，又碰到了新问题，就去查了资料，自己尝试后总结下。 Origin My GitHub 绘制顺序 之前二维绘制顺序并没有产生明显的不好效果，现在绘制三维影响就比较大了。 先看看二维相同一套顶点不同顺序的效果： 二维面顺序示例 1 二维WebGL进阶（3）环境遮挡图与强度
const texture = new THREE.TextureLoader().load(require('../assets/images/wenli2.jpg')) const texture_s = new THREE.TextureLoader().load(require('../assets/images/happyface.png')) const texture_ao = new THREE.TextureLounity 发布webGL，shader丢失解决方法
自定义的 Shader 都要加入到Always Included Shaders中。防止打包之后丢失shader。 【注意事项】 Always Included Shaders：Edit 》 Proejct Settings 》 Graphics 》 Always Included Shaders使用Shapefile-js读取shp文件并使用WebGL绘制
1. 引言 坐标数据是空间数据文件的核心，空间数据的数据量往往是很大的。数据可视化是GIS的一个核心应用，绘制海量的坐标数据始终是一个考验设备性能的难题，使用GPU进行绘制可有效减少CPU的负载，提升绘制时的速度 shapefile是空间数据文件常用的格式，Shapefile-js提供了编写简单的JavaSc球体的顶点与索引创建方法----以WebGL为例
上图，左图为一个球体的三维图，其中一个圆面以θ角（范围为[0,PI]）的方式确定，该圆面在x-z坐标平面投影如右图，其中圆面上任意一点又由α确定（范围为[0,2PI]）。 假定该球体半径为r，那么球面任意一点均可以用r，θ，α唯一确定，确定关系如下： x=rsinθcosα；y=rcosθ；z=rsinθsinα。 那么，可以将θ，αWebGL 矩形
shadertoy vec3 Rect(vec2 st, float left, float bottom, float right, float top, float blur ){ vec3 col = vec3(0.); float l = smoothstep(left,left+blur,st.x); float b = smoothstep(bottom,bottom+blur,st.y); float t = smoothstep(top,top+blur,1.-st.THREE webGL:3D 用于大数据，室内设计，衣服等立体的
调用的render，每次调用render就是一次渲染，如果用interval("fn",ms)就可以实现动画。 建议不卡顿，那么每秒30~60次, 间隔33~17ms之间 一 初识 倒叙： 最终的是调用： //1. body元素中插入canvas对象 document.body.appendChild(renderer.domElement); //2. new出来的对象 setSizeWebGL 理论基础 - 二维矩阵
此文上接一系列文章，先从基础概念开始，上一篇是物体缩放。 之前的三篇文章讲了如何对二维物体进行平移，旋转，和 缩放。每种变换都改变了着色器并且这些变换还受先后顺序影响。在前例中我们先缩放，再旋转，最后平移，如果执行顺序不同结果也不同。 例如这是缩放 2, 1 ，旋转30度，然后平移 100,WebGL 理论基础 - 二维平移
在学习三维之前让我们先看一看二维，还请见谅。这个主题对有些人来说可能过于简单，但还是准备在几篇文章中加以阐述。 此文上接WebGL 基础概念，没读的建议先看那里。 平移就是普通意义的“移动”物体。用第一篇文章中的代码，你可以改变传递给 setRectangle() 的值，移动矩形的位置。这里ArcGIS api for Javascript要素标识的一点说明
项目中的地图采用ArcGIS api for Javascript 4.16 发布地图，地图查询后，对查询到的要素进行高亮标识，采用的是feature.symbol（type: "simple-fill"），但总是无法高亮显示，控制台提示Uncaught (in promise) RuntimeError: abort(RuntimeError: abort(both async and sync fetching of the wCesium DrawCommand [1] 不谈地球 画个三角形
目录0. 前言0.1. 源码中的 DrawCommand1. 创建1.1. 构成要素 - VertexArray1.2. 构成要素 - ShaderProgram1.3. 构成要素 - WebGL 的统一值1.4. 渲染状态对象 - RenderState1.5. 其它构成因子① 绘制的通道类型 - Pass② 绘制的图元类型 - WebGL 绘制常数③ 离屏绘制容器 - Framebwebgl
https://dev.opera.com/articles/introduction-to-webgl-part-1/CesiumJS 2022^ 原理[2] 渲染架构之三维物体 - 创建并执行指令
目录回顾预备知识：指令预备知识：通道1. 生成并执行指令1.1. Primitive 生成指令1.2. Context 对象负责执行 WebGL 底层代码2. 多段视锥体技术3. 指令对象的转移筛选可见集4. 本篇总结 回顾 书接上文，Scene.js 模块内的 render 函数会将控制权交给 WebGL，执行 CesiumJS 自己封装的指令【笔记】WebGL编程指南学习（4）
WebGL编程指南学习（4） 4. 最后一块拼图 在学会处理顶点，包括处理顶点的坐标、Javascript和WebGL管线的数据通信、坐标变换之后，还需要处理顶点的其他数据——如颜色等。此外，还需要处理将图像（或纹理）映射到图形或三维对象表面上。这就是WebGL的最后一块拼图。 将顶点的其他（非坐标）数WebGL 与 WebGPU比对[5] - 渲染计算的过程
目录1. WebGL1.1. 使用 WebGLProgram 表示一个计算过程1.2. WebGL 没有通道 API2. WebGPU2.1. 使用 Pipeline 组装管线中各个阶段2.2. 使用 PassEncoder 调度管线内的行为2.3. 使用 CommandEncoder 编码多个通道2.4. PassEncoder 和 Pipeline 的关系3. 总结 前两篇文章介绍了 WebWebGL 与 WebGPU比对[4] - Uniform
目录1. WebGL 1.0 Uniform1.1. 用 WebGLUniformLocation 寻址1.2. 矩阵赋值用 uniformMatrix[234]fv1.3. 标量与向量用 uniform[1234][fi][v]1.4. 传递纹理2. WebGL 2.0 Uniform2.1. 标量/向量/矩阵传值方法扩充2.1. 什么是 UniformBlock 与 UniformBuffer 的创建2.2. 状态绑定2.3玩转WebGL(五)变换与坐标系统
1.变换 为了深入了解变换,我们首先要在讨论矩阵之前回顾一下最基础的数学背景知识. 1.1 向量 向量有一个方向和大小. 向量标量运算 向量加减运算 对应的直观表示加法: 直观表示减法: 向量长度 使用勾股定理即可 向量点乘 两个向量的点乘也叫向量的内积、数量积,对两个玩转WebGL(六)漫反射光照
现实世界的光照是极其复杂的，因此WebGL的光照仅仅使用了简化的模型并基于对现实的估计来进行模拟，光照模型都是基于我们对光的物理特性的理解。 颜色 根据物理知识，不透明物体的颜色是根据其反射的色光决定的。比如树叶反射绿光，就显示绿色。如果物体反射所有的色光，就显示白色。玩转WebGL(九)纹理贴花
纹理单元 上节中通过采样器(Sampler)将纹理对象传给片段着色器 uniform sampler2D u_Sampler; GLSL内建的texture函数来采样纹理的颜色，它第一个参数是纹理采样器，第二个参数是对应的纹理坐标。输出的是纹理的（插值）纹理坐标上的(过滤后的)颜色。 sampler2D是个uniform变量，为了