基于WebGL/Threejs技术的BIM模型轻量化之图元合并
伴随着互联网的发展，从桌面端走向Web端、移动端必然的趋势。互联网技术的兴起极大地改变了我们的娱乐、生活和生产方式。尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化。随着WebGL标准被广泛接受，出现了许多基于HTML5的开源三维引擎，如threejs、scenejs等。尤其t...
WebGL on iOS8 终于等到了这一天
WWDC2014刚结束，这次的大会是名符其实的开发者大会，更贴切的应该说的确是一次软件开发者的大会，对于OSX和iOS的更多功能特性让人兴奋，Swift新语言促成了如上图片但我更感兴趣的是WebGL终于官方的在OSX和iOS上得到了支持，这篇《A first look at what iOS8 me...
快速开发 HTML5 WebGL 的 3D 斜面拖拽生成模型
前言3D 场景中的面不只有水平面这一个，空间是由无数个面组成的，所以我们有可能会在任意一个面上放置物体，而空间中的面如何确定呢？我们知道，空间中的面可以由一个点和一条法线组成。这个 Demo 左侧为面板，从面板中拖动物体到右侧的 3D 场景中，当然，我鼠标拖动到的位置就是物体放置的点，但是这次我们的...
webgl 的空间变换（下）：空间变换
在网上看了很多关于在三维世界中怎么把一个顶点经过一步步变化，最终呈现在我们的屏幕上的。其实很多博客或者书籍已经讲的很清楚了，那为什么我还要特别再写一次博客来阐述自己观点呢？（这里只针对那些学习webgl时，想彻底了解清楚空间过程的同学而言）因为在我一开始对三维不是很懂的情况下，看了很多书和博客，觉得...
webgl之3d动画
之前的几篇文章都是静态的，而这里主要介绍如何使物体动起来，并且学会使用性能监视器来监测性能。而如果要让物体动起来，实际上我们是有两种方法的，第一种是让物体真的动起来，另外一种是让摄像机动起来这样物体相对来说也就动起来了。另外，实际上在让物体动起来的过程中，我们是不断通过调用 renderer.ren...
Unity5和WebGL移植指南的一些总结
对于手游开发者来说，更新版本往往意味着非常复杂的过程，你需要根据反馈做更新、测试、提交然后等待审核，而由于不需要客户端依赖，页游往往是快速测试游戏版本的最佳途径，很多人可能都知道Unity 5可以再不用Unity Web Player的情况下把手游移植到页游平台测试，再加上谷歌决定放弃对NPAPI的...
Javascript高级编程学习笔记（95）—— WebGL(1) 类型化数组
WebGLwebgl 是针对 canvas 的 3D上下文，与其它Web技术不同，WebGL并非是W3C制定的标准，而是由 Khronos Group 制定的。类型化数组WebGL所涉及的复杂运算需要提前知道数值的精度，但是标准的 JS 无法支持这一诉求。因此WebGL引入了类型化数组这一概念，类型...
WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记（1）webgl介绍WebGL是一种3D绘图协议，它把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。WebGL技...
一个基于WebGL的仿真3D水池有逼真的水波纹效果
最近在研究WebGL，看到国外很多高手做的很多超炫的3D效果，无比羡慕。忍不住把效果趴下来研究，下面介绍一个逼真的游泳池中浮动小球的效果。效果非常绚丽，功能强大。示例可切换观察水池的视角，不同视角考虑到了光线从不同角度折射和反射的影响，所以波纹效果极其逼真。先介绍下WebGLWebGL是一种3D绘图...
基于HTML5的WebGL设计汉诺塔3D游戏
在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏。http://hightopo.com/demo/hanoi_20151106/index.html汉诺塔的游戏规则及递归算法分析请参考http://en.wikipedia.org/wiki/Tower...
webgl 系列 —— 初识 WebGL
初识 WebGL什么是 WebGLwebgl 在支持 canvas 的浏览器中进行 2d 或 3d 渲染。webgl 程序除了有 Html、javascript，还需要加入着色器语言（GLSL ES）。WebGL 使得网页在支持 HTML <canvas> 标签的浏览器中，不需要使用任何...
【虚拟仿真】Unity3D打包WEBGL实现全屏切换
推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。 一、前言 今天实现Unity3D打包WEBGL后实现按钮点击全屏和退出 全屏的实现。 二、实现 2-1、搭建场景...
解决webgl使用canvas.toDataURL()没有内容的问题
转的，记录一下，我还没有验证。这个问题很好解决，就是在获取webgl对象的时候，多传入一个{preserveDrawingBuffer: true}，然后在使用canvas.toDataURL()获取就能够获取到了。 案例：var canvas = document.getElementById("...
WebGPU 毫无疑问会在未来取代 WebGL
近日，OSCHINA 和 Gitee 联合发布了《2022 中国开源开发者报告》。该报告由” 前沿开源技术领域解读 “ ” 中国开源创业观察 2022“，以及” 开发者画像分析 “ 三个章节组成。 在 “前沿开源技术领域解读” 部分，多位在其领域有所建树的一线开发者和开源商业化公...
基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控
前言智慧楼宇和人们的生活息息相关，楼宇智能化程度的提高，会极大程度的改善人们的生活品质，在当前工业互联网大背景下受到很大关注。目前智慧楼宇可视化监控的主要优点包括:智慧化 -- 智慧楼宇是一个生态系统，像人一样拥有感知能力、自我判断能力以及控制能力。绿色化 -- 绿色建筑在耗能、产能以及能源管理方面...
基于 WebGL 3D 的 HTML5 档案馆可视化管理系统
前言档案管理系统是通过建立统一的标准以规范整个文件管理，包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台，主要实现档案流水化采集功能。为企事业单位的档案现代化管理，提供完整的解决方案，档案管理系统既可以自成系统，为用户提供完整的档案管理和网络查询功能，也可以与本单位的OA办公自动化和DP...
WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记（5）点击查看demo演示Demo地址：https://nsytsqdtn.github.io/demo/360/360简单网格材质 MeshNormalMaterialMeshNormalMaterial是一种不受渲染时使用的颜色影响的材质，它只与自己...
基于 HTML5 WebGL 的 3D 工控裙房系统
前言工业物联网在中国的发展如火如荼，网络基础设施建设，以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇。中国工业物联网企业目前呈现两种发展形式并存状况：一方面是大型通讯、IT企业的布局；一方面是传统工业软件和工业网络企业自发地延伸，由产品提供商发展为方案供应商。什么叫做裙房？裙房是指附属于主...
WebGL入门教程(一)-初识webgl
一、WebGL和传统网页的区别：普通网页组成成分：HTML、JavaScript；WebGL网页组成成分：HTML5、JavaScript和GLSL ES(着色器语言 OpenGL ES)；二、WebGL采用H5中的<canvas>元素来定义绘图区域，然后通过JavaScript内嵌GL...
HTML学习总结（四）【canvas绘图、WebGL、SVG】
一、Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 Java...