webGL

基于webgl(threejs)的路面编辑

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

flyfox1982

图扑 Web 可视化引擎在仿真分析领域的应用

图扑软件是基于 WebGL 的三维可视化引擎,在 WebGL 基础上封装了基本的三维模型创建、呈现的 API。同时还封装了丰富的数学运算库,涵盖多维变换,几何计算等。 ... »

xhload3d

webgl之绘图要点

  3D世界是由点组成的,两个点组成一条直线,而三个点就可以组成一个三角形,通过三角形就可以组成任意形状的物体,而这种组成的物体我们称为Mesh模型,接着Mesh模型加上纹理就组成了真实的3D世界。下面我们就逐一介绍。     零、坐标系   在Three.js中,默认使用的就是右手坐标系,即将手掌伸开平行于X轴,然后屈掌使得四指平行于y轴,这时大拇指朝向与z轴相同就是右手坐标系,否则,就是左手坐 »

深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效果,你需要有一个兼容WebGL的现代浏览器(最好是Chrome/FireFox/Safari/Edge/IE11+)。 本文的在线演示结果和代码请点击这里:Three.js贴图实例。 什么是贴图(Texture Mapping) »

通过 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(二)

我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)》主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配合上数据库的数据储存,我们就可以实现一个简易版的 Web 聊天工具了,有空的朋友可以自己尝试下实现,那么我们今天的主要内容真的是实现 WebGL 3D 拓扑图实时数据通讯了,请大家接着往下看。   有了前面的知 »

有关于OpenGL、OpenGL ES、WebGL的小结

转自原文 有关于OpenGL、OpenGL ES、WebGL的小结   OpenGL(全写Open Graphics Library)是个定义了一个跨编程语言、跨平台的编程接口的规格,它用于三维图西象(二维的亦可)。OpenGL是个专业的图形程序接口,是一个功能强大,调用方便的底层图形库。   关于其他的介绍我就不说了。这边我说一下有OpenGL的资源网站:   OpenGL官网:http:/ »

WebGL学习(1) - 三角形

原文地址:WebGL学习(1) - 三角形 还记得第一次看到canvas的粒子特效的时候,真的把我给惊艳到了,原来在浏览器也能做出这么棒的效果。结合《HTML5 Canvas核心技术》和网上的教程,经过半年断断续续的学习,对canvas的学习终于完结,对常用的canvas特效基本能做到信手拈来的。 众所周知,canvas是2D绘图技术,虽然可以通过坐标变换,位置计算也能做到3D的效果。但3D场景数 »

HTML5 学习总结(四)——canvas绘图、WebGL、SVG

目录 一、Canvas 1.1、创建canvas元素 1.2、画线 1.3、绘制矩形 1.4、绘制圆弧 1.5、绘制图像 1.6、绘制文字 1.7、随机颜色与简单动画 二、WebGL 2.1、HTML5游戏开发 2.2.1、Cocos2D-HTML5 2.2.2、Egret(白鹭引擎) 三、SVG 3.1、SVG Hello Wrold 3.2、多种引入SVG的方法 3.3、画直线 »

搭建一个typescript下的webgl写代码环境。

一、准备工作安装软件: 1、安装代码编辑器 vscode  官网地址:https://code.visualstudio.com/ 软件下载地址:https://code.visualstudio.com/Download   2、安装nodejs 官网地址:https://nodejs.org 软件下载地址:https://code.visualstudio.com/Download   二、给 »

基于HTML5的WebGL实现的2D3D迷宫小游戏

为了实现一个基于HTML5的场景小游戏,我采用了HT for Web来实现,短短200行代码,我就能实现用“第一人称”来操作前进后退上下左右,并且实现了碰撞检测。 先来看下实现的效果: http://hightopo.com/guide/guide/core/3d/ht-3d-guide.html#ref_collision 或者http://v.youku.com/v_show/id_XMzA5 »

理解WebKit和Chromium: WebGL及其实现

转载请注明原文地址:http://blog.csdn.net/milado_nju/article/details/7293065 # WebGL及在WebKit和Chromium中的实现 ## 概述 前面章节介绍了Canvas2D,同时也介绍了在canvas中同样也可以绘制3D图形,也就是Canvas3D或者称为WebGL。同Canvas2D不一样的是,WebGL标准草案不是由W3C来起草的,而 »

【WebGL】2.基础概念

引入Three.js <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script src="https://raw.github.com/mrdoob/three.js/master/build »

Professional.WebGL.Programming-Chapter 2(高级WebGL编程——第二章)

(目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/3508251.html) 这一章主要通过创建一个三角形的例子说明WebGL基本的用法,以下是书中例子的效果图:     创建一个基本的WebGL应用需要以下的步骤: 1.Write some basic HTML code that include »

webGl中实现clipplane

参考:调用glClipPlane()函数所执行的裁剪是在视觉坐标中完成的,而不是在裁剪坐标中进行的https://blog.csdn.net/shengwenj/article/details/51019299 使用framgentshader在webGl中实现裁剪 https://***.com/questions/22628186/glclipplane-is-there- »

基于WebGL的三维的物联网平台技术

  参加工作三年了,从一个搞调试的民工进阶为程序员,收获还是有那么一点的.慢慢讲一些.   去年在网上发现了https://hightopo.com/cn-index.html图扑软件的基于WebGL的三维javascript库,感觉是那种想要的效果,支持三维,效果酷炫,使用简便,无需插件.   但是发现是商业软件,问了厂家开发授权很贵,十几万一套.   那这个方案不能用蛤.   软件特色 »