ICode9

前言 使用webgl开发三维应用的时候，经常会发现三维场景加载比较慢，往往需要等待挺长时间，这样用户的体验就很不友好。 造成加载慢的原因，主要是三维应用涉及到的资源文件会特别多，这些资源文件主要是模型及其图片，往往这些模型和图片都会比较大。 为了加快三维场景的加快速度，可以使用Ind

文章目录 1 为什么是 WebGPU 而不是 WebGL 3.0 显卡驱动 图形 API 的简单年表 WebGL 能运行在各个浏览器的原因 WebGPU 的名称由来 2 与 WebGL 比较编码风格 OpenGL 的编码风格 CPU 负载问题 WebGPU 的装配式编码风格 厨子戏法 3 多线程与强大的通用计算（GPGPU）能力

最近遇到一个问题，百思不得其解，最后发现是自己的操作流程出了问题，最后乱逛在这个技术专题里面找到了正确且详细的操作流程，然后问题得以解决。 遇到问题最大的原因是知识面广度不行，有的东西你没见过你是真的想不出的呀

基本三角形构建矩形 们知道，一个矩形其实可以由两个共线的三角形组成，即 V0, V1, V2, V3，其中 V0 -> V1 -> V2 代表三角形A，V0 -> V2 -> V3代表三角形B。 默认情况下，WebGL 会认为顶点顺序为逆时针时代表正面，反之则是背面，区分正面、背面的目的在于，如果开启了背面剔除功能的话，背面是不

目录 引子 正文 基于 CPU 的风场可视化 OpenGL 基础 获取风场数据 基于 GPU 移动粒子 绘制粒子 绘制粒子轨迹 风场插值查找 GPU 上的伪随机生成器 下一步是什么？ 参考资料 引子 对风场可视化的效果感兴趣，搜资料的时候发现这篇文章，读了后觉得翻译一下以便再次查阅。 原文：How I

目录 引子 帧缓冲区对象 示例 观察及思考 参考资料 引子 在看 How I built a wind map with WebGL 的时候，里面用到了 framebuffer ，就去查了下资料单独尝试了一下。 Origin My GitHub 帧缓冲区对象 WebGL 有一个能力是将渲染结果作为纹理使用，使用到的就是帧缓冲区对象（frameb

Why WebGL / Why GPU?现代的图像系统The PipelineGPUWebGL & OpenGL关系 WebGL绘图步骤创建WebGL上下文创建WebGL Program（The Shaders）将数据存到缓冲区中（Data to Frame Buffer）读取缓冲区数据到GPU（Frame Buffer to GPU）输出结果（Output） WebGL太复杂？其他方式canvas 2DMesh.js

目录 引子 关于透明 α 混合 参考资料 引子 JavaScript WebGL 使用图片疑惑点中提到两张图片叠加，默认情况下，即使有透明的区域也不会透过看到。现在就来看这个透明的处理。 Origin My GitHub 关于透明 说到透明，在颜色编码中由 Alpha 通道负责，透明度存储方式有： Premultiplie

目录1 为什么是 WebGPU 而不是 WebGL 3.0显卡驱动图形 API 的简单年表WebGL 能运行在各个浏览器的原因WebGPU 的名称由来2 与 WebGL 比较编码风格OpenGL 的编码风格CPU 负载问题WebGPU 的装配式编码风格厨子戏法3 多线程与强大的通用计算（GPGPU）能力WebWorker 多线程通用计算（GPGPU）4

以前没做过Unity web版本，第一次做，在编辑器下调试得好好的，前后端登录对接都没问题，理所当然的以为发布出来就万事大吉。谁知道发布出来才是噩梦的开始。好家伙，直接登录不了。看输出日志居然是unknown error，这下可把我整懵了。后来通过查看网页版的运行日志才知道是浏览器跨域不能

目录 引子 为什么纹理坐标取几个点就可以获取图片内容？ 纹理坐标跟顶点坐标一定要一一对应？ 激活纹理和绑定纹理目标的顺序是否有要求？ 相同位置多个纹理会怎么样？ 参考资料 引子 JavaScript WebGL 使用图片之后产生了一些疑问。 Origin My GitHub 为什么纹理坐标取几个点就可

WebGL是什么？ - 简书改革开发40年以来，世界日新月异，无论从生活到精神上都有了颠覆性的变化，曾经教授还是教书的，砖家还叫专家，太阳还不叫日，菊花还是一种花，老王还没那么多，Web还只需要做IE，...https://www.jianshu.com/p/fd4bbf7d09b6 改革开发40年以来，世界日新月异，无论从生活到精神上

目录 引子 设置颜色 效果 动态自定义示例 参考资料 引子 JavaScript WebGL 绘制一个面之后想着可以尝试复杂一点的了，没想到设置颜色的时候又出现问题了。 Origin My GitHub 设置颜色 在之前的示例中，都是设置单一的颜色，但每个顶点都可以拥有各自的颜色信息。 基于绘制三角形

基本数据类型 float 转换 float(4) 4.0 float(true) 1.0 float(false) 0.0 init int(1.0) 1 int(true) 1 int(false) 0 bool bool(0) false bool(1) true 矢量类型 vec2 、vec3、vec4 浮点矢量 vec3 v3 = vec3(1.0, 1.2, 2.0) vec2 v2 = vec2(v3) // 1.0, 1.2 vec4 v4

目录 引子 绘制三角形 执行过程 高清处理 绘制矩形 索引缓冲对象 参考资料 引子 JavaScript WebGL 基础疑惑点之后进行了一些优化，然后尝试绘制常见二维的面。 WebGL 中几何体最终都是由三角形构成，由三角形切入比较合适。 Origin My GitHub 绘制三角形 这是示例，基于绘制一条

目录 一、Three.js：JavaScript 3D WebGL库 二、Babylon.js：Web3D图形引擎 三、Filament：谷歌移动优先的WebGL框架 四、KickJS：Web的开源图形和游戏引擎 五、ClayGL：构建可扩展的Web3D应用程序 六、PlayCanvas：网络游戏和3D图形引擎 七、WebGLStudio.js和Litescene.js：开源Web 3D图形编

一、HTML基础 1.常见浏览器的内核 （1）IE: trident 内核 （2）Firefox：gecko 内核 （3）Safari: webkit 内核 （4）Opera: 以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核 （5）Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发 ) 2.HTML 开头Doctype的作用 html网页声明

1.扫描所有场景，保存并添加到Build Settings中 using System.Collections; using System.Collections.Generic; using System.IO; using UnityEditor; using UnityEngine; using UnityEngine.SceneManagement; public class SceneUtils { #if UNITY_EDITOR public static void

引子 接着 WebGL 基础概念，做一个绘制直线的简单示例。 主要参考以下两篇文章： 绘制一个点 绘制三角形 Origin My GitHub 绘制一条线 下面不会对每个使用的函数进行详细的解释，个人比较喜欢先对整体逻辑有个感觉，实际使用时再按需去查资料。 创建 WebGL 上下文 在基础概念中

目录 引子 绘制一条线 创建 WebGL 上下文 准备顶点数据并缓冲 顶点着色器 片段着色器 着色器程序 绘制 示例 参考资料 引子 接着 WebGL 基础概念，做一个绘制直线的简单示例。 主要参考以下两篇文章： 绘制一个点 绘制三角形 Origin My GitHub 绘制一条线 下面不会

1、动态获取配置文件信息 配置文件一般放在StreamAssets文件夹中，这个文件夹在打包以后会在打包生成的文件夹里，方便以后更改配置信息。在代码中通过Application.streamingAssetsPath获取该文件夹的位置。 我这里配置文件是.ini类型，直接导入插件：Advanced INI Parser就可对该类

1. 下载ThreeJS https://github.com/mrdoob/three.js/archive/master.ziphttps://github.com/mrdoob/three.js/archive/master.zip2. 查看Example         示例真的是十分的详尽,特别的良心.         webgl_loader_3ds.html 加载3ds         webgl_loade

出现以上问题，可能是我们直接打开编写的html进行测试,本地方式加载限制。 解决方法很简单通过浏览器键入地址的方式就可以避免以上错误。    

文章目录 前言一、素材制备1.全景图获取2. 界面中指南针、小地图等元素制备3. 地表箭头制备 二、发布WebGL1.导入资源2.发布第一版WebGL 三. 网页测试总结 前言 本次记录VR看房的一个完整工作流，使用2017.4.4c1版本发布WebGL端，本记录基于B站罗老师和VR看房实习经历编写。

 1. 前端基础         a. HTML (10 days: 21/11/08-21/11/17  https://www.codecademy.com/learn/learn-html )         b. CSS (21/11/18-   https://www.codecademy.com/learn/learn-css )         c. JavaScript  2.