【WebGL 第14页

webgl智慧楼宇发光效果算法系列之高斯模糊

如果使用过PS之类的图像处理软件，相信对于模糊滤镜不会陌生，图像处理软件提供了众多的模糊算法。高斯模糊是其中的一种。在我们的智慧楼宇的项目中，要求对楼宇实现楼宇发光的效果。比如如下图所示的简单楼宇效果：building.gif楼宇发光效果需要用的算法之一就是高斯模糊。高斯模糊简介高斯模糊算法是计算机图形学领域中一种使用广泛的技术,是一种图像空间效果，用于对图像进行模糊处理，创建原始图像的柔和模糊版

ITman彪叔·2023-10-07 04:23

3D孪生场景SDK：Viwer 孪生世界

NSDT编辑器简化了WebGL3D应用的开发，完全兼容Three.JS生态。同时为了满足用户自定义业务的需求，NSDT编辑器还封装了基于three.js的SDK，用户可以在自己的应用中嵌

ygtu2018·2023-10-07 04:23

three.js后处理

通常在电影制作中使用这种技术，但我们也可以在WebGL中使用。

seeooco·2023-10-06 22:43

用WEBGL来画封闭多边形，然后拉伸为3D模型

目前很多浏览器原生支持WEBGL,只要你的代码在浏览其中打开，不用服务器，就可以看到你画的模型了。目前我做了一个非常简单的画图工具，先画2D图形（结束画图按‘c'键），画好后直接拉伸成立体图形。

水滴与鱼·2023-10-06 10:20

[Review]To be coder(2011.08.01~2013.05.23-WebGL-ing)

其实编程是一件非常有意思的事情，像造物主可以创造万物一样，每一个程序员都可以创造一片属于自己的世界。这就是我喜欢编程的原因，很简单，自由。以下内容回记录汪海的编程生活，因为比较懒的原因，所以写的比较简单，其中坎坷曲折，一言难尽。再回头看以前写的代码，敲的程序，却也别有一番滋味。个人兴趣飘忽无常，所以有些都没有深入学习，以后有时间再慢慢补上吧。JAVA因为大一的课程安排，一开始接触的很多东西都是和J

iteye_19603·2023-10-05 21:10

【Unity】3D贪吃蛇游戏制作/WebGL本地测试及项目部署

本文是Unity3D贪吃蛇游戏从制作到部署的相关细节项目开源代码：https://github.com/zstar1003/3D_Snake试玩链接：http://xdxsb.top/Snake_Game_3D效果预览：试玩链接中的内容会和该效果图略有不同，后面会详细说明。游戏规则经典贪吃蛇游戏：蛇身随着吃食物的增加不断变长，通过A/D或方向键←→控制方向，蛇头撞在蛇身上或四周墙壁会导致游戏失败。

zstar-_·2023-10-05 21:38

Coding and Paper Letter（四十五）

gempy2.Tangram是一个JavaScript库，用于使用WebGL在Web浏览器中实时渲染2D和3D地图。tangram3.R语言包gdalcube

胖胖雕·2023-10-05 09:18

WebGL-3D地图大俯仰角的雾化处理

以下内容转载自掘金文章《WebGL-3D地图大俯仰角的雾化处理》作者：多多洛爱学习链接：https://juejin.im/post/5db2a58a51882559ee62dfba来源：掘金著作权归作者所有

_bugMaker·2023-10-05 06:14

在2023年使用Unity2021从Built-in升级到Urp可行么

因为最近在做WEbgl平台，所以某些不可抗力原因，需要使用Unity2021开发，又由于不可明说原因，想用Urp，怎么办？

avi9111·2023-10-05 04:14

WebGL基础学习

WebGL工作原理step1：createvertexDatastep2：createbufferandloadvertexDatatobufferconstbuffer=gl.createBuffer

Coding_Life·2023-10-03 18:59

WebGPU 入门：绘制一个三角形

WebGPU的出现就是为了取代WebGL的，因为后者的API实在有些过时，无法利用好现代GP

前端西瓜哥·2023-10-03 12:48

基于Threejs实现glb三维模型的预览

言归正传，使用threejs进行三维模型展示，通常需要依赖以下组件：Threejs+OrbitControls+GLTFLoader+WebGL以上组件可以从threejs的官网获取，下载后的目录如下所示

夜郎king·2023-10-03 00:47

WebGL-学习笔记（三）

image.png在利用缓冲区并在学会利用mode绘制图形动画以后，继续研究二维图形的颜色渲染以及纹理操作1.颜色渲染1.1利用步进和偏移拆分缓冲区数据利用缓冲区可以一次存储点的多个信息，继续利用这一特性，并在利用vertexAttribPointer()函数的时候，利用上stride和offset两个参数：functionmain(){constcanvas=document.querySele

Patrick浩·2023-10-02 19:29

【笔记】WebGL编程指南学习（4）

WebGL编程指南学习（4）4.最后一块拼图在学会处理顶点，包括处理顶点的坐标、Javascript和WebGL管线的数据通信、坐标变换之后，还需要处理顶点的其他数据——如颜色等。

界明城·2023-10-01 06:11

【笔记】《WebGL编程指南》学习（8）

WebGL编程指南学习（8）漫长的旅行即将到达终点……8.高级技术8.1用鼠标控制物体旋转如何实现物体的旋转？如何旋转物体？

界明城·2023-10-01 06:11

webgl shader学习笔记1

webgl裁剪坐标-NPC坐标（-1-1）-局部坐标或者世界坐标webgl会自动剔除反面，只画正面，逆时针三角形为正面纹理坐标：（2D:TEXTURE_2D3D:TEXTURE_CUBE_MAP）纹理环绕方式

初升的夕阳·2023-10-01 06:11

【《WebGL编程指南》读书笔记-绘制和变换三角形】

时隔三天，我的数据结构知识集又加厚了一点，我也该回到WebGL的学习了。我决定看这本书，一方面的原因是从理解cesium入手，另一方面就是因为这一章。

floating_heart·2023-10-01 06:10

【第二届青训营-寒假前端场】- 「WebGL基础」笔记

WhyWebGL/WhyGPU?

余cos·2023-10-01 06:10

JS笔记：15、16、17章 Canvas、HTML5编程、错误处理

除了具备基本绘图能力的2D上下文，还建议了一个名为WebGL的3D上下文。基本用法：adrawingofsomething.如果不添加任何样式或者不绘制任何图形，在页面中是看不到该元素的。

Gyoung阿广·2023-10-01 06:10

【《WebGL编程指南》读书笔记-光照】

本文为《WebGL编程指南》第八章读书笔记总目录链接：https://blog.csdn.net/floating_heart/article/details/124001572本文包括以下内容：介绍了点光源

floating_heart·2023-10-01 06:40

【《WebGL编程指南》读书笔记-进入三维世界（上）】

了解WebGL可视空间，采用投影矩阵对物体进行投影操作，实现盒状可视空间和正射投影。对于正射投影矩阵的数学原理进行了本书之外的补充说明

floating_heart·2023-10-01 06:39

WebGL笔记：绘制矩形面的几种方式以及封装封装多边形对象来绘制不同图形

绘制矩形面可以绘制的面只有三角面，要绘制矩形面的话，只能用两个三角形去拼1）使用三角带TRIANGLE_STRIP绘制矩形回顾一下之前的规律：第一个三角形：v0>v1>v2第偶数个三角形：以上一个三角形的第二条边+下一个点为基础，以和第二条边相反的方向绘制三角形第奇数个三角形：以上一个三角形的第三条边+下一个点为基础，以和第二条边相反的方向绘制三角形关键顶点绘制数据constvertices=ne

Wang's Blog·2023-10-01 06:09

webgl笔记-3.纹理、帧、深度检测和混合

图形学编程的几个基本问题包括实现颜色、实现纹理、实现光照、实现混合（即透明效果）；这几个问题实际上是一个问题：确定图元（像素）的在屏幕上的颜色。确定图元颜色的过程在顶点着色器和片元着色器中进行：为每一个顶点（注意这里立方体有24个顶点而不是8个）指定一种颜色（并线形内插到每个像元上）以实现颜色；为每个顶点指定从纹理中取色的坐标（并线形内插到每个像元上）以实现纹理；为每个顶点指定光线强度和方向，以此

dayuan5183·2023-10-01 06:09

WebGL笔记：使用鼠标绘制多个线条应用及绘制动感线性星座

使用鼠标绘制多个线条多个线条，肯定不是一笔画过的，而是多次画的线条既然是多线，那就需要有个容器来管理它们1）建立容器对象建立一个lineBox对象，作为承载多边形的容器//lineBox.jsexportdefaultclasslineBox{constructor(gl){this.gl=glthis.children=[]}add(obj){obj.gl=this.glthis.childre

Wang's Blog·2023-10-01 06:39

1.绘制一个点

canvas.getContext('2d')可获取画布的二维绘制对象（CanvasRenderingContext2D）；canvas.getContext('webgl')canvas.getContext

就是那个帕吉·2023-09-30 17:09

unity打包webgl局限及优化建议

->通过IL2CPP技术转换成c++->使用Emscripten编译器进行编译将脚本转换为JavaScript（但不是普通的JS，而是一种叫做asm.js的JavaScript变体）二．Unity打包webgl

weixin_43787178·2023-09-30 16:06

WebGL笔记：绘制多个点，三角形，以及画各种不同的线条，面

绘制多点1）WebGL缓冲区我们在用js定点位的时候，肯定是要建立一份顶点数据的，这份顶点数据是给着色器的，因为着色器需要这份顶点数据绘图然而，我们在js中建立顶点数据，着色器肯定是拿不到的，这是语言不通导致的为了解决这个问题

Wang's Blog·2023-09-30 11:17

webgl一些常用参数的学习

1.逐顶点和逐片元2.uniform变量3.varing变量的作用4.vertexAttribPointer的stride和offset参数（创建一个缓存区保存多种数据：坐标和尺寸）

第一最寂寞·2023-09-30 00:41

Three 之 three.js （webgl）鼠标/手指通过射线移动物体的简单整理封装

Three之three.js（webgl）鼠标/手指通过射线移动物体的简单整理封装目录Three之three.js（webgl）鼠标/手指通过射线移动物体的简单整理封装一、简单介绍二、实现原理三、注意事项四

仙魁XAN·2023-09-29 10:44

WebGL笔记：WebGL中绘制圆点，设定透明度，渲染动画

WebGL绘制圆点基于片元着色器来画圆形片元着色器在屏幕中画图是基于一个个的像素的每次画一个像素时，都会执行片元着色器中的main方法那么，我们就可以从这一堆片元中(n个像素点)找出属于圆形的部分片元的位置叫做

Wang's Blog·2023-09-29 06:40

WebGL 渲染三维图形作为纹理贴到另一个三维物体表面

目录渲染到纹理帧缓冲区对象和渲染缓冲区对象帧缓冲区对象帧缓冲区对象的结构如何实现渲染到纹理示例程序（FramebufferObject.js）创建帧缓冲区对象（gl.createFramebuffer（））gl.createFramebuffer（）规范gl.deleteFramebuffer（）规范创建纹理对象并设置其尺寸和参数创建渲染缓冲区对象（gl.createRenderbuffer（））

山楂树の·2023-09-29 04:59

01.cesium简介

它主要用于展示三维地球，通过WebGL技术来进行硬件加速，只要浏览器支持WebGL它就可以运行。cesi

阿发博客·2023-09-29 02:42

WebGL实现透明物体（α混合）

目录α混合如何实现α混合1.开启混合功能：2.指定混合函数混合函数gl.blendFunc（）函数规范可以指定给src_factor和dst_factor的常量混合后颜色的计算公式加法混合半透明的三角形（LookAtBlendedTriangles.js）示例效果示例代码半透明的三维物体（BlendedCube.js）示例效果示例代码透明与不透明物体共存同时实现隐藏面消除和α混合的5个步骤1.开启

山楂树の·2023-09-28 12:34

WebGL 切换着色器

目录前言如何实现切换着色器1.准备用来绘制单色立方体的着色器2.准备用来绘制纹理立方体的着色器3.调用createProgram（）函数，利用第1步创建出的着色器，创建着色器程序对象4.调用createProgram（）函数，利用第2步创建出的着色器，创建着色器程序对象5.调用gl.useProgram（）函数，指定使用第3步创建出的着色器程序对象。6.通过缓冲区对象向着色器中传入attribut

山楂树の·2023-09-28 12:02

unity 打包web包后出现模型闪烁的问题

原文链接：unity打包web包后出现模型闪面的问题_unitywebgl模型闪烁_一个采集的博客-CSDN博客1.首先检查是否是模型重叠导致的闪面，如果是这种情况，那么让模型之间稍微间隔一些距离2.调整

野区捕龙为宠·2023-09-28 06:33

WebGL笔记：WebGL中的顶点着色器尺寸，颜色的修改

顶点着色器尺寸修改attributevec4a_Position;attributefloata_PointSize;voidmain(){//点位gl_Position=a_Position;//尺寸gl_PointSize=a_PointSize;}voidmain(){gl_FragColor=vec4(1,1,0,1);}//这里的utils.js参考之前博文，不做重复阐述import{i

Wang's Blog·2023-09-28 01:26

Unity3d发布WebGL 部署在IIS

unity3d发布ＷｅｂＧＬ需要安装UnitySetup-WebGL-Support-for-Editor-5.3.4f1.exe在安装Unity3d时需要用UnityDownloadAssistant

Coding小宇·2023-09-27 19:56

片元着色器中绘制点(圆)

片元着色器中绘制点(圆)文章主要讲的是写片元着色器的一些算法(套路),实例代码使用的是shadertoy.所以在unity,webgl1之类的地方代码不一定能直接使用,但思路基本相同.稍作修改即可.uv

苍崎愣子·2023-09-26 22:08

Unity/WebGL打包/跨域问题/简单解决“......has been blocked by CORS policy: ......“

报错原文：AccesstoXMLHttpRequestat'file:///C:/Users/13171/My%20project%20(1)/Test/Build/test.data.gz'fromorigin'null'hasbeenblockedbyCORSpolicy:Crossoriginrequestsareonlysupportedforprotocolschemes:http,da

鬼樱G_Cher·2023-09-26 21:09

Unity发布的WebGL页面应用实现全屏/非全屏切换

Unity发布的WebGL页面应用实现全屏/非全屏切换如果是win浏览器平台，可以通过修改index.html里面，unitydiv的长宽比例实现页面内的全屏。

Lif68·2023-09-26 17:08

WebGL画圆的几种方式

需求：看了一段时间WebGL，现在想画一个圆，方式应该有很多，我现在列出自己练习的几个分析：WebGL只能画点、线、三角形，我现在要画一个圆，基本上就只能靠三角形模拟出来一个下表的图形都是通过三角形来构造的

哈哈地图·2023-09-26 02:39

WebGL学习系列-多边形绘制原理

WebGL几何图形绘制之前的篇章我们通过drawArrays这个api绘制过单个点以及多个点，然而，它的功能不仅仅如此，它也是绘制多边形的基石。先来看下面这张熟悉的图：dra

那个天真的人·2023-09-26 02:39

WebGL编程指南-32 绘制圆形的点

1.demo效果如上图绘制了一个红色圆点2.实现要点2.1绘制原理我们已经知道在绘制图形时有一个光栅化的过程，在光栅化的过程中可以在片元着色器中通过内置变量gl_FragCoord来访问片元的坐标，实际上片元着色器还提供了另一个内置变量来获取当前片元在所属点内的坐标，它就是gl_PointCoord，归纳一下这两个变量片元着色器内置变量（输入）变量类型名称描述vec4gl_FragCoord片元的

搬砖怪·2023-09-26 02:08

WebGL 中绘制文本

“在WebGL中如何绘制文本”是一个我们常见的问题。那么第一件事就是我们要问自己绘制文本的目的何在。现在有一个浏览器，浏览器用来显示文本。所以你的第一个答案应该是如何使用HTML来显示文本。

香濃泡芙·2023-09-26 02:38

webgl第二课-绘制一个点

需要源码可以Q群：828202939或者点击这里希望可以和大家一起学习、一起进步！！纯手打！！书籍是PDF电子档，也在Q群里，所有的课程源代码在我上传的资源里面，本来想设置开源，好像不行！如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，在下会及时修改！！！！！本文开始涉及着色器，开始看不懂没关系，后面博客会详细讲解目前阶段你只要知道用就可以了！代码展示：绘制一个点请使用支

webgl_谷子·2023-09-26 02:37

WebGL绘制变幻光斑

由于WebGL安全方面的限制，本例中用到一张帖图仅能通过相对路径在本域调用，file协议是无法看到下图效果的，仅能看到一片移动的方形。效果图：（图1）类似效果使用Canvas2d绘图也可以实现。

weixin_30564901·2023-09-26 02:07

WebGL入门(三十七)-绘制圆形的点

绘制圆形的点1.demo效果2.实现要点2.1绘制原理2.1绘制实现3.demo代码1.demo效果如上图，绘制出了三个红色的小圆点2.实现要点2.1绘制原理我们已经知道在绘制图形时有一个光栅化的过程，在光栅化的过程中可以在片元着色器中通过内置变量gl_FragCoord来访问片元的坐标，实际上片元着色器还提供了另一个内置变量来获取当前片元在所属点内的坐标，它就是gl_PointCoord，归纳一

点燃火柴·2023-09-26 02:06

使用shader绘制矩形、矩形框、圆形、圆形框（WebGL-Shader开发基础02）

绘制矩形、矩形框、圆形、圆形框1.绘制矩形1.1使用if语句绘制1.2使用step函数绘制1.3使用step函数简化方法绘制1.4使用abs对称思想绘制1.5绘制矩形边框2.绘制圆2.1绘制圆形2.2绘制圆形框3.demo代码1.绘制矩形上一篇文章学习如何绘制线，现在学习如何绘制面，先从绘制矩形开始，其实绘制矩形的思想与绘制线的思想一样，只不过绘制线时限制的区域窄一些，绘制矩形限制的区域宽一些，先