Webgl

【三维世界】高性能图形渲染技术——WebGL你有了解多少？

目录WebGL概述WebGL的优势使用文本编辑器开发三维应用轻松发布三维图形程序充分利用浏览器的功能学习和使用WebGL很简单WebGL的起源OpenGL、OpenGLES1.1//2.0/3.0和WebGL
山楂树の·2023-09-22 00:22

WebGL 选中一个表面

目录选中一个表面示例程序（PickFace.js）代码详解示例效果选中一个表面WebGL选中物体_山楂树の的博客-CSDN博客可以使用同样的方法来选中物体的某一个表面。
山楂树の·2023-09-22 00:52

WebGL 常用术语整理

目录Aα混合（alphablending）α值（alphavalue）环境光（ambientlight）连接（attach）attribute变量（attributevariable）B绑定（bind）缓冲区（buffer）缓冲区对象（bufferobject）C画布（canvas）裁剪（clipping）颜色缓冲区（colorbuffer）列主序（columnmajor）完整性（complete
山楂树の·2023-09-22 00:52

WebGL HUD（平视显示器）

目录HUD（平视显示器）如何实现HUD示例程序（HUD.html）示例程序（HUD.js）代码详解在网页文字上方显示三维物体代码详解HUD（平视显示器）平视显示器（headupdisplay）简称HUD，最早用于飞机驾驶。平视显示器将一些重要信息投射到飞机驾驶舱前方的一块玻璃上，飞行员能够将外界的影像和这些重要信息融合在一起，而不用频繁低头观察仪表盘。三维图形程序，尤其是游戏，也经常在三维场景上叠
山楂树の·2023-09-22 00:20

WebGL笔记: 2D和WebGL坐标系对比和不同的画图方式, 程序对象通信，顶点着色器，片元着色器

WebGL坐标系canvas2d画布和webgl画布使用的坐标系都是二维直角坐标系，但它们坐标原点、y轴的坐标方向，坐标基底都不一样canvas2d坐标系的原点在左上角,x轴朝右，y轴朝下1个单位的宽就是一个像素的宽
Wang's Blog·2023-09-21 23:32

WebGL中JS与GLSL ES 语言通信，着色器间的数据传输示例：js控制绘制点位

js改变点位，动态传值attributevec4a_Position;voidmain(){//点位gl_Position=a_Position;//尺寸gl_PointSize=50.0;}voidmain(){gl_FragColor=vec4(1,1,0,1);}import{initShaders}from"./utils.js";constcanvas=document.querySel
Wang's Blog·2023-09-21 23:32

WebGL笔记：设置画布底色，从样式中解析颜色并设置画布底色，设置动态画布底色

document.querySelector("#canvas");//设置宽高canvas.width=200;canvas.height=200;//获取gl三维画笔constgl=canvas.getContext("webgl
Wang's Blog·2023-09-21 23:59

GLSL-WebGL着色器语言语法详解

GLSL的注释语法和JS一样，变量名规则也和JS一样，不能使用关键字，保留字，不能以gl_、webgl_或webgl开头。运算符基本也和JS一样，++–+=&&||还有三元运算符都支持。
天外天-亮·2023-09-21 23:47

three.js制作全景图_“飞行员”的制作：使用Three.js动画制作基本的3D场景

Viewdemo查看演示DownloadSource下载源Today,wearegoingtocreateasimple3DflyingplaneusingThree.js,a3DlibrarythatmakesWebGLsimpler.WebGLisaprettyunknownworldformanydevelopersbecauseofthecomplexityand
culiao9310·2023-09-21 21:22

SuperMap iClient3D for WebGL教程（Entity）-EllipsoidGraphics

在上一篇文章里面，介绍了椭圆实体EllipseGraphics，这一篇我们来看看EllipsoidGraphics椭球体，同样的我们先看看下面这张图，了解EllipsoidGraphics有哪些属性，分别是干什么用的；EllipsoidGraphics关于fill，show，shadows以及distanceDisplayCondition等属性，就不做说明了，大家可以查看前一篇文章，主要说明下椭
ayiyayiyo·2023-09-21 14:29

WebAR ｜ 关于WebGL标准

AIRX三次方•帮助年轻人获得适应未来社会的新技术能力专注AR+VR+Unity+Unreal+CV+AI方向WebGL是HTML5canvas元素的扩展，现已广泛用于开发需要3D可视化的Web应用程序
三次方·2023-09-20 21:00

【前端知识】Three 学习日志（八）—— 全屏渲染

设置全屏渲染constwidth=window.innerWidth;//窗口宽度constheight=window.innerHeight;//窗口高度constrenderer=newTHREE.WebGLRenderer
前端Outman·2023-09-20 16:16

【前端实习生入职】之-threejs实现可拖动立体框

已经有一段时间没有更新了，这段时间匆匆忙忙来到北京实习，从一个南方的前端在校学生到北方来生活实习，一切都在慢慢适应当中，来公司之前就了解到这家公司是做自动驾驶以及ai方面的，到公司后果不其然疯狂学习threejs，webGL
joey不熬夜·2023-09-20 16:48

Threejs 的前世今生及基本概念

其中一种就是通过WebGL在网页中绘制高性能的3D图形。OpenGL,WebGL到Three.jsOpenG
向日葵·2023-09-20 15:45

Three.js 基础

其中一种就是通过WebGL在网页中绘制高性能的3D图形。OpenGL,WebGL到Three.jsOpenGL大概许多人都有所
ccessl·2023-09-20 15:15

【ThreeJS】基础教学 创建一个立方体

-场景搭建-ThingJS开发者社区讲THREE很难学，这是误导，其实是很简单的；就拿他文章里的代码，全部注释一遍给大家参考吧；three.jswebgl-geometry-cube//引入three库
Ning+·2023-09-20 15:15

ThreeJS-3D教学一基础场景创建

它建立在WebGL技术之上，并提供了丰富的功能和工具，使开发者可以轻松地构建令人惊叹的3D可视化效果。
天外天-亮·2023-09-20 15:45

unity 发布WebGL 读取TXT 遇到的问题

路径问题//stringpath=Path.Combine(Application.streamingAssetsPath,"data.txt");//unityEditor，webgl端都可以读取//
乱七八糟的笔记·2023-09-20 10:02

Unity WebGL 编译 报错: emcc2: error: ‘*‘ failed: [WinError 2] ϵͳ�Ҳ���ָ�����ļ���解决办法

导出路径不能有中文系统名(win)含有中文,修改环境变量Temp和Tmp,如下图:真正的原因:杀毒软件删除了部分wasm相关文件,如:错误日志BuildingLibrary\Bee\artifacts\WebGL
Dekiven·2023-09-19 14:23

ThreeJs 基础入门

使用它可以让我们更加直观的了解webgl的世界。
了无_数据科学·2023-09-19 07:58

Unity减少发布打包文件的体积——获取精灵图片的信息限制它的大小

一、起因一个工程，打包成webGL且压缩成zip文件后，接近400M，后来把大的精灵图片设置最大尺寸，降低大小后，再次发布，zip文件缩减到250M二、如何一键获得工程里面的精灵图片信息三、获取精灵图片信息
dzj2021·2023-09-19 04:05

webgl_gpgpu_birds 样例分析

webgl_gpgpu_birds是一个three.js的官方样例，这个例子模拟了鸟群的运动，是一个群组动画，并且动画的帧率也很高；鸟群的运动很自然，非常值得研究。
从杰·2023-09-19 03:04

three.js webgl_nodes_materials_instance_uniform 例子分析

在three.js的官方例子中webgl_nodes_materials_instance_uniform可以看到场景中有一个格子背景，一个环绕运动的点光源，12个颜色各异的球体网格。
从杰·2023-09-19 03:33

threeJs 样例，webgl2_volume_perlin的修改

官方例子webgl2_volume_perlin.html,把perlin噪音绘制出来了，可以直观感受perlin噪音的图像形状。原例子支持立方体，我把立方体改为了球形。
从杰·2023-09-19 03:32

SuperMap iClient for WebGL加载HDR格式的环境光贴图

.hdr->.ktx）三、HDR格式的环境光贴图加载3.1关键代码3.2效果展示前言在三维渲染效果要求越来越逼真的大环境下，超图不负众望，最新SuperMapiClient3D11i(2023)forWebGL
supermapsupport·2023-09-18 12:17

2023/09/17

j2.git删除所有stash或指定stashgitstashdrop[可选stash名]3.vue在函数默认参数后增加新参数4.gitpush添加“-u”参数5.vscode快捷输入符号$的使用6.WebGL
搜捕鸟了·2023-09-18 10:04

threejs的使用

threejs介绍：Three.js是一款基于WebGL的JavaScript3D库，用于创建和渲染3D图形场景。
简宁909·2023-09-18 09:05

WebGL光照介绍——平行光、环境光下的漫反射

目录光照原理光源类型平行光点光源环境光反射类型漫反射漫反射光颜色计算公式环境反射环境反射光颜色表面的反射光颜色（漫反射和环境反射同时存在时）计算公式平行光下的漫反射根据光线和法线方向计算入射角θ（以便求两者点积：cosθ）归一化法线：表面的朝向一个表面具有两个法向量平面的法向量唯一示例代码——平行光漫反射（LightedCube.js）示例效果代码详解顶点着色器部分JavaScript程序部分环境
山楂树の·2023-09-18 05:06

WebGL 根据模型矩阵的逆转置矩阵计算运动物体的光照效果

目录前言坐标变换引起法向量变化变化规律：魔法矩阵：逆转置矩阵逆转置矩阵的用法总结Matrix4对象的setInverseOf、transpose方法规范（以完成逆转置矩阵）示例代码（LightedTranslatedRotatedCube.js）代码详解示例效果前言场景中的物体运动，观察者的视角也很可能会改变，物体平移、缩放、旋转都可以用坐标变换来表示。显然，物体的运动会改变每个表面的法向量，从而
山楂树の·2023-09-18 05:33

Web端如何快速展现超大场景的三维模型3DTiles格式

以下是一些常见的在Web端快速展现超大场景的三维模型3DTiles格式的方法：1、平台的选择基于CesiumJS：CesiumJS是一个基于WebGL的开源JavaScript库，支持加载和渲染3DTiles
3D探路人·2023-09-17 11:22

腾讯地图 Javascript API使用之地图自定义标记

腾讯位置服务JavaScriptAPI是由JavaScript语言开发的地图应用编程接口，在此基础上腾讯位置服务推出了其升级版JavaScriptAPIGL，其基于WebGL实现的高性能三维渲染引擎而封装的一套
_bugMaker·2023-09-17 01:25

WebGL 正确处理对象前后的关系——隐藏面消除（深度测试）/ 深度冲突

目录前言验证WebGL处理对象前后关系的规则——后绘制的图形覆盖先绘制的图形隐藏面消除（深度测试）开启隐藏面消除功能，需要遵循以下两步：1.开启隐藏面消除功能。
山楂树の·2023-09-17 00:15

WebGL 从0到1绘制一个立方体

目录前言组成立方体的面、三角形、顶点坐标和顶点颜色通过顶点索引绘制物体gl.drawElements(mode,count,type,offset)函数规范示例程序彩色立方体（HelloCube.js）代码详解向缓冲区中写入顶点的坐标、颜色与索引gl.ELEMENT_ARRAY_BUFFER绑定顶点索引数据目标gl.drawElements（）详解示例效果为立方体的每个表面指定颜色组成立方体的面、
山楂树の·2023-09-17 00:15

WebGL模型视图投影矩阵

WebGL透视投影_山楂树の的博客-CSDN博客中的PerspectiveView代码一个问题是，我们用了一大段枯燥的代码来定义所有顶点和颜色的数据。
山楂树の·2023-09-17 00:15

WebGL正射投影

目录可视范围（正射类型）可视空间正射投影的盒状可视空间的工作原理盒状可视空间定义盒状可视空间Matrix4.setOrtho（）按键控制near、far编辑示例效果示例代码代码详解修改near和far值通过右方向键增大near的值通过下方向键减小far的值修改近裁截面宽高导致物体“变形”宽高缩小一半，保持宽高比宽高缩小一半，高度不变，改变宽高比可视范围（正射类型）虽然你可以将三维物体放在三维空间中
山楂树の·2023-09-17 00:14

unity webgl开发踩坑——从开发、发布到优化

目录前言环境unitywebgl的一些注意点videoplayer修改——》VideoPlayerWebGL插件text修改——解决不能显示汉字问题制作、读取ab包unityaudioclip减小建议减小包体全过程记录
xiaoLongww·2023-09-15 23:48

使用Chrome开发工具调试Canvas

不管你是使用2D还是WebGL，任何用过的人都知道很难调试，使用Canvas通常需要长长的难以跟踪的调用列表functiondraw(){context.clearRect(0,0,258,258);context.fillStyle
叁弦·2023-09-15 20:04

实时渲染新技术能给业主带来哪些价值？点量云

目前在数字孪生三维可视化项目领域，本地部署和Webgl方案是使用比较多的。本地部署方案，根据项目的需要配备几台高性能电脑，在电脑上安装相应的三维可视化模型即可，通常使用的频率不是很高。
点量云实时渲染-小芹·2023-09-15 18:47

轻松上手Three.js：JavaScript 3D库指南

与WebGL不同，开发人员在使用Three.js进行开发时，无须掌握高深的图形学知识，只需使用少量JavaScript代码即可创建出一个3D场景。
衍生星球·2023-09-15 07:05

ThreeJS – 如何提升three.js的渲染效果

1THREE.WebGLRenderer的参数设置THREE.WebGLRenderer对象的参数设置非常影响渲染效果要想获得比较好的渲染效果，对THREE.WebGLRenderer可进行以下参数设置
奇怪的点·2023-09-14 14:59

Mars3D认识与理解

Mars3d三维可视化平台是火星科技(opensnewwindow)http://marsgis.cn/研发的一款基于WebGL技术实现的三维客户端开发平台，基于Cesium（CesiumJS–Cesiumhttps
棉棉11111111111·2023-09-12 12:23

跨平台游戏引擎 Axmol-2.0.0 正式发布

下载https://github.com/axmolengine/axmol/releases/tag/v2.0.0更新日志添加实验性的WebAssembly构建支持(WebGL2.0)，由@nowasm
一线灵·2023-09-12 08:18

WebGL 视图矩阵、模型视图矩阵

目录立方体由三角形构成视点和视线视点、观察目标点和上方向视点：观察目标点：上方向：在WebGL中，观察者的默认状态应该是这样的：视图矩阵程序（LookAtTriangles.js）实际上，“根据自定义的观察者状态
山楂树の·2023-09-12 05:54

HT for Web (Hightopo) 使用心得（1）- 基本概念

HTforWeb，通常简称为HT，这是一个基于JavaScript开发的WebGL引擎。可用于2D/
图扑数字孪生·2023-09-11 14:46

GitHub上的WebGL库调研

1.three.js  star:32.9K  更新速率：频繁  这个无需多说，当下最流行的WebGL库，轻量级，容易使用，很多webgl库都是基于它来构建。
sky.....·2023-09-11 13:45

Cesium学习笔记

Cesium使用WebGL来进行硬件加速图形化；跨平台；跨浏览器；实现真正的动态数据进行可视化。Cesium基于Apache开源协议，支持商业和非商业免费使用。
sky.....·2023-09-11 13:44

webgl与webgpu比较

绘制流程webgl无论是操作着色器，还是操作VBO，亦或者是创建一些Buffer、Texture对象，基本上都得通过gl变量一条一条函数地走过程，顺序是非常讲究的。
sky.....·2023-09-11 13:10

HT for Web (Hightopo) 使用心得（1）- 基本概念

HTforWeb，通常简称为HT，这是一个基于JavaScript开发的WebGL引擎。可用于2D/
图扑可视化·2023-09-11 12:02

uniapp微信小程序加载spine动画

目录1.XMLHttpRequest封装spine-webgl小程序适配修改加载动画1.XMLHttpRequest封装functionXMLHttpRequest(){this.config={};}
selectJiun·2023-09-11 09:25

WebGL 纹理——在矩形表面贴上图像

目录WebGL要进行纹理映射，需遵循以下四步：1.准备好映射到几何图形上的纹理图像。2.为几何图形配置纹理映射方式。3.加载纹理图像，对其进行一些配置，以在WebGL中使用它。
山楂树の·2023-09-11 06:10
上一页 12 13 14 15 16 17 18 19 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他