ICode9

精准搜索请尝试: 精确搜索
  • 几种将将虚幻引擎内容流送到多个平台的推流方案比较2022-09-09 19:05:01

    将虚幻引擎内容流送到多个平台,比较 HTML5、WebGL 和像素流送、Raystreaming。 简介 在开发联网用户体验时,如何共享内容始终影响着协作、生产和发布中的关键决策。假如用户在消费并与共享内容进行交互时会使用个人电脑、平板电脑、智能手机等各类设备,那么就会面临一个关键问题:如何

  • WebGL压缩纹理实践2022-09-07 08:32:52

    0x01 本文将讲述压缩纹理在实际项目中的使用的案例。最近的一个项目是这样的:项目由于涉及到的建筑物特别多,大概有近40栋的建筑,而每一栋建筑物,又有10层楼,每层楼里面又有很多的设备。这就导致我们需要使用到大量的贴图。在实际的项目过程中,我们的客户的电脑会经常遇到webgl崩溃的情

  • unity打包webgl2022-08-22 12:02:04

    tip:本文unity使用2021版本 选择文件->生成设置,如图1所示; 图1: 弹出“构建设置对话框”,如图2所示; 点击图中2位置中的“添加已打开场景”按钮,添加需要打包的场景。 点击图中1位置平台列表,选中WebGL。 选择图中3位置的“玩家设置”按钮,打开“项目设置对话框”,如图3所示; 找到图3中1位

  • webgl丢失上下文2022-08-21 01:32:14

    webgl丢失上下文 一、原理   WebGL使用了计算机的图形硬件,而这部分资源是被操作系统管理,由包括浏览器在内的多个应用程序共享。如果一个程序接管了图形硬件,或者操作系统进入休眠,浏览器就会失去使用这些资源的权力,并导致存储在硬件中的数据丢失。在这种情况下,WebGL绘图上下文就会

  • Filed Play:简介2022-08-15 09:01:22

    目录 引子 What? How this project works? Float packing 参考资料 引子 在尝试数学函数可视化的时候,发现了一个有趣的库 Field Play ,对 README 中的说明进行部分翻译记录,做个初步了解。 Origin My GitHub What? 让我们为网格上的每个点指定一个向量 (1, 0) 。这意味着我们

  • 基于webgl(threejs)的路面编辑2022-08-11 18:01:56

    楔子 在很多应用中,特别是一些园区类的应用。 都需要对园区的地面 环境进行展示,路面就是地面的一部分。 通常的做法是,都是建模的时候把相关的元素都建好,然后导入到展示系统中进行展示。 不过有些情况下,可能建模并不太方便,所以三维编辑器可以直接进行简单的路面编辑显得挺有必要。

  • JavaScript WebGL 绘制顺序2022-08-08 09:05:20

    引子 在 JavaScript WebGL 三维相关概念中尝试一些效果的时候,又碰到了新问题,就去查了资料,自己尝试后总结下。 Origin My GitHub 绘制顺序 之前二维绘制顺序并没有产生明显的不好效果,现在绘制三维影响就比较大了。 先看看二维相同一套顶点不同顺序的效果: 二维面顺序示例 1 二维

  • WebGL进阶(3)环境遮挡图与强度2022-08-03 14:35:25

    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.TextureLo

  • unity 发布webGL,shader丢失解决方法2022-07-18 16:02:47

    自定义的 Shader 都要加入到Always Included Shaders中。防止打包之后丢失shader。 【注意事项】 Always Included Shaders:Edit 》 Proejct Settings 》 Graphics 》 Always Included Shaders  

  • 使用Shapefile-js读取shp文件并使用WebGL绘制2022-07-17 00:33:01

    1. 引言 坐标数据是空间数据文件的核心,空间数据的数据量往往是很大的。数据可视化是GIS的一个核心应用,绘制海量的坐标数据始终是一个考验设备性能的难题,使用GPU进行绘制可有效减少CPU的负载,提升绘制时的速度 shapefile是空间数据文件常用的格式,Shapefile-js提供了编写简单的JavaSc

  • 球体的顶点与索引创建方法----以WebGL为例2022-07-09 11:38:07

    上图,左图为一个球体的三维图,其中一个圆面以θ角(范围为[0,PI])的方式确定,该圆面在x-z坐标平面投影如右图,其中圆面上任意一点又由α确定(范围为[0,2PI])。 假定该球体半径为r,那么球面任意一点均可以用r,θ,α唯一确定,确定关系如下: x=rsinθcosα;y=rcosθ;z=rsinθsinα。 那么,可以将θ,α

  • WebGL 矩形2022-06-22 22:32:27

    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 用于大数据,室内设计,衣服等立体的2022-06-22 22:01:51

    调用的render,每次调用render就是一次渲染,如果用interval("fn",ms)就可以实现动画。 建议不卡顿,那么每秒30~60次, 间隔33~17ms之间   一  初识 倒叙: 最终的是调用: //1. body元素中插入canvas对象 document.body.appendChild(renderer.domElement); //2. new出来的对象 setSize

  • WebGL 理论基础 - 二维矩阵2022-05-29 14:05:17

    此文上接一系列文章,先从基础概念开始,上一篇是物体缩放。 之前的三篇文章讲了如何对二维物体进行平移,旋转,和 缩放。每种变换都改变了着色器并且这些变换还受先后顺序影响。在前例中我们先缩放,再旋转,最后平移,如果执行顺序不同结果也不同。 例如这是缩放 2, 1 ,旋转30度,然后平移 100,

  • WebGL 理论基础 - 二维平移2022-05-29 14:04:49

    在学习三维之前让我们先看一看二维,还请见谅。这个主题对有些人来说可能过于简单,但还是准备在几篇文章中加以阐述。 此文上接WebGL 基础概念,没读的建议先看那里。 平移就是普通意义的“移动”物体。用第一篇文章中的代码,你可以改变传递给 setRectangle() 的值,移动矩形的位置。这里

  • ArcGIS api for Javascript要素标识的一点说明2022-05-20 02:31:44

    项目中的地图采用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 w

  • Cesium DrawCommand [1] 不谈地球 画个三角形2022-04-28 18:02:31

    目录0. 前言0.1. 源码中的 DrawCommand1. 创建1.1. 构成要素 - VertexArray1.2. 构成要素 - ShaderProgram1.3. 构成要素 - WebGL 的统一值1.4. 渲染状态对象 - RenderState1.5. 其它构成因子① 绘制的通道类型 - Pass② 绘制的图元类型 - WebGL 绘制常数③ 离屏绘制容器 - Frameb

  • webgl2022-04-24 19:00:50

    https://dev.opera.com/articles/introduction-to-webgl-part-1/

  • CesiumJS 2022^ 原理[2] 渲染架构之三维物体 - 创建并执行指令2022-04-11 12:34:25

    目录回顾预备知识:指令预备知识:通道1. 生成并执行指令1.1. Primitive 生成指令1.2. Context 对象负责执行 WebGL 底层代码2. 多段视锥体技术3. 指令对象的转移筛选可见集4. 本篇总结 回顾 书接上文,Scene.js 模块内的 render 函数会将控制权交给 WebGL,执行 CesiumJS 自己封装的指令

  • 【笔记】WebGL编程指南学习(4)2022-03-20 22:35:28

    WebGL编程指南学习(4) 4. 最后一块拼图 在学会处理顶点,包括处理顶点的坐标、Javascript和WebGL管线的数据通信、坐标变换之后,还需要处理顶点的其他数据——如颜色等。此外,还需要处理将图像(或纹理)映射到图形或三维对象表面上。这就是WebGL的最后一块拼图。 将顶点的其他(非坐标)数

  • WebGL 与 WebGPU比对[5] - 渲染计算的过程2022-02-28 03:31:06

    目录1. WebGL1.1. 使用 WebGLProgram 表示一个计算过程1.2. WebGL 没有通道 API2. WebGPU2.1. 使用 Pipeline 组装管线中各个阶段2.2. 使用 PassEncoder 调度管线内的行为2.3. 使用 CommandEncoder 编码多个通道2.4. PassEncoder 和 Pipeline 的关系3. 总结 前两篇文章介绍了 Web

  • WebGL 与 WebGPU比对[4] - Uniform2022-02-19 03:31:06

    目录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(五)变换与坐标系统2022-02-09 20:02:09

    1.变换 为了深入了解变换,我们首先要在讨论矩阵之前回顾一下最基础的数学背景知识. 1.1 向量 向量有一个方向和大小. 向量标量运算 向量加减运算 对应的直观表示加法: 直观表示减法: 向量长度 使用勾股定理即可 向量点乘 两个向量的点乘也叫向量的内积、数量积,对两个

  • 玩转WebGL(六)漫反射光照2022-02-09 19:59:43

    现实世界的光照是极其复杂的,因此WebGL的光照仅仅使用了简化的模型并基于对现实的估计来进行模拟,光照模型都是基于我们对光的物理特性的理解。 颜色 根据物理知识,不透明物体的颜色是根据其反射的色光决定的。比如树叶反射绿光,就显示绿色。如果物体反射所有的色光,就显示白色。

  • 玩转WebGL(九)纹理贴花2022-02-09 19:59:14

    纹理单元 上节中通过采样器(Sampler)将纹理对象传给片段着色器 uniform sampler2D u_Sampler; GLSL内建的texture函数来采样纹理的颜色,它第一个参数是纹理采样器,第二个参数是对应的纹理坐标。输出的是纹理的(插值)纹理坐标上的(过滤后的)颜色。 sampler2D是个uniform变量,为了

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有