[js] webgl 初探 - 绘制三角形
摘要：1. webgl 概念挺多的， 顶点着色器、片段着色器， 坐标2. 绘制前期准备工作好多目前看的比较好的教材： https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial参考学习：http://blog.csdn.n...
【WebGL】《WebGL编程指南》读书笔记——第2章
一、前言最近看了《WebGL编程指南》这本书，发现还是很有意思的，故每章阅读后做个笔记。二、正文Example1：在canvas中绘制2D矩形<!DOCTYPE html><html lang="en"> <head> <meta charset="...
openlayers6实现webgl点图层渲染效果(附源码下载)
前言：openlayers6推出来的有一段时间，推出来的新特性见：https://github.com/openlayers/openlayers/releases/该版本的主要功能是能够组合具有不同渲染器类型的图层。以前，地图只使用一种渲染策略，并且地图中的所有图层都必须实施该策略。现在，可以使用...
Hook踩坑记：React Hook react-unity-webgl
自公司前后分离上手React以来，一个坑一个坑的踩，Class的全生命周期云里雾里，还么屡明白，就抱上了Hook的大腿不松手，确实爽到飞起。修改到Hook的过程基本比较顺畅，直接少了三分之一的代码，组件更容易封装，调试更方便，诸多优点在此不再赘述，已有各路大佬纷纷评价，此处贴上中文官方地址：Reac...
Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题
Html5 中获取镜像图像 - 解决 WebGL 中纹理倒置问题太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es)本文遵循“署名-非商业用途-保持一致”创作公用协议转载请保留此句：太阳火神的漂亮人生 - 本博客专注于 敏捷开发及移动和物联设备研究：iOS、Andr...
基于HTML5和WebGL的3D网络拓扑结构图
现在，3D模型已经用于各种不同的领域。在医疗行业使用它们制作器官的精确模型；电影行业将它们用于活动的人物、物体以及现实电影；视频游戏产业将它们作为计算机与视频游戏中的资源；在科学领域将它们作为化合物的精确模型；建筑业将它们用来展示提议的建筑物或者风景表现；工程界将它们用于设计新设备、交通工具、结构以...
HTML5 学习总结（四）——canvas绘图、WebGL、SVG
一、Canvascanvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScr...
WebGL 与 WebGPU 比对[1] 前奏
目录1 为什么是 WebGPU 而不是 WebGL 3.0显卡驱动图形 API 的简单年表WebGL 能运行在各个浏览器的原因WebGPU 的名称由来2 与 WebGL 比较编码风格OpenGL 的编码风格CPU 负载问题WebGPU 的装配式编码风格厨子戏法3 多线程与强大的通用计算（GPGPU）...
webgl画个点
function main(){ var canvas = document.getElementById("webgl"); var gl = getWebGLContext(canvas) if (!gl){ console.log("Fail to get We...
Javascript高级编程学习笔记（97）—— WebGL(3) WebGL上下文(1)
WebGL上下文在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成制定完成后名字就会改为简单的 "webgl"如果浏览器不支持,那么在获取webgl上下文的时候浏览器会返回 null 所以在使用前需要检测返回值基本的获取...
分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试，所以一直没有更新我的博客，今天刚把我的期末作业完成了，心情澎湃，所以晚上不管怎么样，我也要写一篇博客纪念一下我上课都没有听，还是通过强大的度娘完成了我的作业的经历。（当然作业不是百度来的，我只是百度了一些示例代码的意思，怎么用！算了，越解释万一越黑呢！哈哈O(∩_∩)O哈哈...
基于 HTML5 WebGL 的 3D 仪表数据监控
工控仪表重点发展基于现场总线技术的主控系统装置及智能化仪表、特种和专用自动化仪表；全面扩大服务领域，推进仪器仪表系统的数字化、智能化、网络化，完成 自动化仪表从模拟技术向数字技术的转变；推进具有自主版权自动化软件的商品化。在实际应用中，我觉得能够通过操作 JSON 文件来操作 3D 上的场景变化是非...
初识webgl--我的webgl学习第一课（基于threeJs）
一，我为什么要学习webgl一个偶然的机会，在和朋友的聊天过程中，听说了webgl，也许过去也看到过，但是没有特别在意过。原来，JavaScript也可以很好的渲染并在网页上显示三维动画，不用借助插件，听起来是一个很棒的事情。大学的时候，计算机老师让我们课后学习3Dmax，种种原因，并没有听老师的话...
通过 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）
我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）》主要讲解了如何搭建一个实时数据通讯服务器，客户端与服务端是如何通讯的，相信通过上一篇的讲解，再配合上数据库的数据储存，我们就可以实现一个简易版的 Web 聊天工具了，有空的朋友可以自己尝试下实现，那么我们今天...
基于 HTML5 的 WebGL 3D 智能楼宇监控系统
前言智能监控的领域已经涉及到了各大领域，工控、电信、电力、轨道交通、航天航空等等，为了减少人员的消耗，监控系统必不可少。之前我写过一篇 2D 的智能地铁监控系统广受好评，突然觉得，既然 2D 的这么受欢迎，那么 3D 的需求量肯定也是非常大的，3D 毕竟比 2D 来说还是更直观一些，于是有了这个例子...
基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）
我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）》主要讲解了如何搭建一个实时数据通讯服务器，客户端与服务端是如何通讯的，相信通过上一篇的讲解，再配合上数据库的数据储存，我们就可以实现一个简易版的 Web 聊天工具了，有空的朋友可以自己尝试下实现，那么我们今天...
HT for Web自定义3D模型的WebGL应用
有不少朋友询问《HTML5 Web 客户端五种离线存储方式汇总》文章例子的3D表计模型是如何生成的，这个例子是通过导入3dmax设计好的表计模型，然后通过obj格式导入到HT for Web系统中进行控制，这种方式特别适合复杂模型的应用场景，但对于监控系统的很多应用其实并不需要专业的美工使用专业的3...
八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】
HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only achieve extraordinary web animation by using Flash ...
从IE6到IE11上运行WebGL 3D遇到的各种坑
这篇《基于HTML5的电信网管3D机房监控应用》基于WebGL技术的应用让少同学对HTML5 3D的应用产生了兴趣和信心，但有不少网友私信询问WebGL如何运行在老的IE678910浏览器的问题，毕竟作为企业应用，用户的机器运行着各式各样的办公及业务系统，有PB/Delphi之类的老CS应用，有安装...
基于 HTML5 WebGL 的 3D “弹力”布局
分子力(molecular force)，又称分子间作用力、范得瓦耳斯力，是指分子间的相互作用。当二分子相距较远时，主要表现为吸引力，这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化而引起的相互作用；当二分子非常接近时，则排斥力成为主要的，这是由于各分子的外层电子云开始重叠而产生的...