WEBGL - 技术教程文章
javascript – WebGL使用深度图绘制2D图像以实现伪3D效果【代码】
我正在学习WebGL,在WebGLFundamentals页面的帮助下完成了这一点,这帮助我了解缓冲区,着色器和所有这些东西是如何工作的.但现在我想达到一定的效果,我在这里看到：https://tympanus.net/Tutorials/HeatDistortionEffect/index3.html 我知道如何制作热变形效果,我想要达到的效果是图像上的深度.这个演示有一个教程,但它并没有真正解释如何做到这一点,它说我必须有一个灰度图,其中白色部分是最接近的,黑色部分是最重要的.但我真的不明...
WebGL与Canvas的显存与内存使用分析
随笔～ 分析一下两者的内存使用。 按2048为基准，进行相关测试，现在移动设备基本都达到这个分辨率。 <canvas id="canvas" height="2048" width="2048"></canvas> Canvas模式 如果是纯使用Canvas渲染，不涉及到WebGL,内存占用还是比较好计算的。 假设图片也是512大小，图片占用5125124= 1M。 Canvas宽高是2048，占用2048 * 2048 * 4 = 8MB 。 JavaScript堆栈占用看创建对象的情况而定，这里忽略不计。 最终整体的内存占用为9MB+。 ...
UnityWebGL 场景资源、预制体资源、分配内存大小、压缩格式与打包的包体大小关系（实测）。【图】
前言 1，网上的信息大多比较零散，我只知道这些内容是有关系的，并不清楚具体的差别大小。所以我就用最笨的方法进行了很多次打包，把各种情况做一个对比，一次搞清楚。那样就能知道到底从哪个方向优化比较好。 2，因为打包出的webgl文件中，主要数据是与buid文件夹中的“项目.data..unityweb“的文件相关的，所以以下主要对比此文件的大小变化 3，本文主要对这两个地方进行改动一，空场景的数据 场景无资源 无文件资源 内存大小 压...
各位前辈，有没有学习WebGL方面的经验愿意分享？【图】
每个人在学习中或多或少都有自己的思考，自己想使用WebGL来做一个网络三维地球模型，知乎比百度知道更专业，这里仅希望前辈们能提供一些经验，并无优劣之分！提前说声谢谢~~回复内容： 楼上有推荐WebGL编程指南 这本书,确实不错,我也买了一本.建议买一本,大致的通读一遍,自己尝试把里面的代码改写练习下,大致知道一些webgl的底层知识.然后,建议不要想自己直接用底层的代码完全建立,而是去使用three.js,你会发现轻快好省见效快.直接...
javascript-用于WebGL开发的GLGE,SceneJS或WebGLU？
我希望通过WebGL进行一些开发,主要用于演示和导航目的(例如显示带有导航功能的房屋) 我想知道是否有人有使用这些库的经验,哪个学习曲线最快,并且社区发展迅速？解决方法:我对@mrdoob的THREE仅有一点经验,尽管仍处于开发阶段,这很容易理解,并且该项目中正在进行很多活动.自从我使用它已经有一段时间了,所以现在它可能会更加成熟.
基于HTML5的WebGL设计汉诺塔3D游戏_PHP教程【图】
基于HTML5的WebGL设计汉诺塔3D游戏在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏。http://hightopo.com/demo/hanoi_20151106/index.html汉诺塔的游戏规则及递归算法分析请参考http://en.wikipedia.org/wiki/Tower_of_Hanoi。知道了汉诺塔的规则和算法，现在就开始创建元素。用HT for Web（http://www.hightopo.com）现有的3D模板创建底盘和3根柱子不是问题，问题是要创建若干个中空的圆盘。一开始的想法是...
基于HTML5的WebGL结合Box2DJS物理引擎应用_PHP教程【图】
基于HTML5的WebGL结合Box2DJS物理引擎应用上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，最终例子效果：http://hightopo.com/demo/box2djs/ht-box2d-demo.htmlBox2D最早是Erin Catto在GDC大会上的一个展示例子，后来不断完善成C++的开源物理引擎库，...
图解WebGL和Three.js工作原理和流程【图】
本篇文章给大家分享的内容是图解WebGL和Three.js工作原理和流程，有着一定的参考价值，有需要的朋友可以参考一下一、我们讲什么？我们讲两个东西：1、WebGL背后的工作原理是什么？2、以Three.js为例，讲述框架在背后扮演什么样的角色？ 二、我们为什么要了解原理？我们假定你对WebGL已经有一定了解，或者用Three.js做过了一些东西，这个时候，你可能碰到了这样一些问题：1、很多东西还是做不出来，甚至没有任何思路；2、碰到bug无法...
实例详解jQuery和HTML5实现WebGL高性能烟花绽放动画效果【图】
本文主要介绍了jQuery+HTML5实现WebGL高性能烟花绽放动画效果,可实现烟花升空爆炸的绚丽动画效果,完成以后非常好看，希望能帮助到大家掌握jQuery和HTML5实现WebGL高性能烟花绽放动画效果。运行效果：完整代码如下：<!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backg...
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)_javascript技巧【图】
本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法。分享给大家供大家参考，具体如下： 这篇主要记录WebGL的一些基本要点，顺便也学习下如何使用FBO与环境贴图。先看下效果图(需要支持WebGL，Chrome,火狐，IE11)。主要实现过程如下，先用FBO输出当前环境在立方体纹理中，再画出当前立方体，最后画球，并且把FBO关联的纹理贴在这个球面上。 开始WebGL时，最好有些OpenGL基础，在前面讲Obj完善与MD2时，大家可能已经发现了，因为着...
WebGL three.js学习笔记之阴影与实现物体的动画效果【图】
实现物体的旋转、跳动以及场景阴影的开启与优化 本程序将创建一个场景，并实现物体的动画效果 运行的结果如图：运行结果 完整代码如下：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Three.js</title><script src="../../../Import/three.js"></script><script src="../../../Import/stats.js"></script><script src="../../../Import/Setting.js"></script><script src="../../../Import/OrbitControls....
HTML5的WebGL3D档案馆图书可视化管理系统的实现【图】
本篇文章给大家带来的内容是关于HTML5的WebGL3D档案馆图书可视化管理系统的实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。前言档案管理系统是通过建立统一的标准以规范整个文件管理，包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台，主要实现档案流水化采集功能。为企事业单位的档案现代化管理，提供完整的解决方案，档案管理系统既可以自成系统，为用户提供完整的档案管理和网络查询功能...
基于HTML5WebGL实现的3D机房【图】
这篇文章主要介绍了基于HTML5 WebGL的3D机房的示例的相关资料，内容挺不错的，现在分享给大家，也给大家做个参考。前言用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了，这篇文章的主要目的是说明一下，3D 机房中的 eye 和 center 的问题，刚好在项目中用上了，好生思考了一番，最终觉得这个例子最符合我的要求，就拿来作为记录。效果图这个 3D 机房的 Demo 做的还不错，比较美观，基础的交互也都满足，接下来看看怎么实现。代码...
WebGL怎样操作json与echarts图表【图】
这次给大家带来WebGL怎样操作json与echarts图表，WebGL操作json与echarts图表的注意事项有哪些，下面就是实战案例，一起来看一下。突然有个想法，如果能把一些用到不同的知识点放到同一个界面上，并且放到一个盒子里，这样我如果要看什么东西就可以很直接显示出来，而且这个盒子一定要能打开。我用HT实现了我的想法，代码一百多行，这么少的代码能实现这种效果我觉得还是牛的。先来看看效果图：这个例子最基础的就是最外层的盒子了...
HTML5WebGL实现的3D机房示例【图】
用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了，这篇文章的主要目的是说明一下，3D 机房中的 eye 和 center 的问题，刚好在项目中用上了，好生思考了一番，最终觉得这个例子最符合我的要求，就拿来作为记录。效果图这个 3D 机房的 Demo 做的还不错，比较美观，基础的交互也都满足，接下来看看怎么实现。代码生成定义类首先从 index.html 中调用的 js 路径顺序一个一个打开对应的 js，server.js 中自定义了一个 Editor.Server 类...
HTML5WebGL打印3D机房【图】
这次给大家带来HTML5 WebGL打印3D机房，HTML5 WebGL打印3D机房的注意事项有哪些，下面就是实战案例，一起来看一下。前言用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了，这篇文章的主要目的是说明一下，3D 机房中的 eye 和 center 的问题，刚好在项目中用上了，好生思考了一番，最终觉得这个例子最符合我的要求，就拿来作为记录。效果图这个 3D 机房的 Demo 做的还不错，比较美观，基础的交互也都满足，接下来看看怎么实现。代码...
用H5的WebGL如何在同一个界面做出json和echarts图表
这次给大家带来用H5的WebGL如何在同一个界面做出json和echarts图表，用H5的WebGL在同一个界面做出json和echarts图表的注意事项有哪些，下面就是实战案例，一起来看一下。突然有个想法，如果能把一些用到不同的知识点放到同一个界面上，并且放到一个盒子里，这样我如果要看什么东西就可以很直接显示出来，而且这个盒子一定要能打开。我用HT实现了我的想法，代码一百多行，这么少的代码能实现这种效果我觉得还是牛的。这个例子最基础...
基于Babylonjs自制WebGL3D模型编辑器【图】
一、总述 当代WebGL编程所使用的3D模型大多是从3DsMax模型或Blender模型转化而来，这种工作模式比较适合3D设计师和3D程序员分工配合的场景。但对于单兵作战的WebGL爱好者来讲这种模式过于沉重：且不说转化插件本身存在的各种bug严重降低了转化的成功率，光是为了生成一个简单的模型就需要系统的学习3DsMax或Blender的使用方法就让人感觉得不偿失。 基于以上考虑，我计划编写一个基于Babylonjs的简单WebGL模型编辑器，供自己...
详细介绍基于HTML5的WebGL技术构建3D场景的图文代码（一）【图】
今天和大家分享的是 3D 系列之 3D 预定义模型。HT for Web 提供了多种基础类型供用户建模使用，不同于传统的 3D 建模方式，HT 的建模核心都是基于 API 的接口方式，通过 HT 预定义的图元类型和参数接口，进行设置达到三维模型的构建。接下来我们就来谈谈预定义的 3D 模型及参数设置。HT 预定义的 3D 模型有：box、sphere、cone、torus、cylinder、star、rect、roundRect、triangle、tightTriangle、parallelogram 和 trapezoid 这十...
opengl/webgl可以部分重绘吗？
我是webgl的初学者，在学习过程中发现教程中讲解 webgl 动画的时候，基本都是清除屏幕，然后应用变换，重新绘制这样的过程来达到动起来的效果。 但是我想，如果在一个非常复杂的场景中，只有一个很小的部分在移动，那么是否可以只绘制这很小的一部分不用全部的重新绘制呢？回复内容： 实践上通常没太大意义。因为对于一个典型的3D场景，很多影响是全局的。比如一个物体的投影，很可能投到离得很远的另一个物体上。再比如运动模糊、...
WebGL2.0标准的发展和普及如何？【图】
如题，WebGL2.0目前的标准发展到了什么样的程度？相较于WebGL1.0将会有哪些大的功能的增加？目前是否有主流浏览器对其进行了支持？如果没有，预计什么时候WebGL2.0会被大部分主流浏览器所支持？回复内容： 碰巧做了一个WebGL 2 Samples Pack项目，内容是简单直接的展示WebGL2新特性的例程，适合学习WebGL2 新特性的用法。Github链接在此：GitHub - WebGLSamples/WebGL2Samples: Short and easy to understand samples demonstratin...
到2013年底，WebGL能发展到什么程度？【图】
回复内容： 我觉得取决于 browser vendor 和开发者的支持度。 Web app 的优势是一个固定值（不用开发复杂的 installer 和 auto-updater 了，但是仅此而已）。所以对越复杂的 app 来说，Web 的优势就越边缘化。3D 应用的开发无疑是最复杂的。所以我可以说：3D app 的开发团队不缺这点写 installer 和 auto-updater 的人手。 第二，Web 的优势领域是 HTML 和 OS 标准都成熟的部分。而标准不成熟的部分就惨了。在 HTML 不成熟的...
通过HTML5和WebGL来制作2D游戏【图】
Istrolid是一款采用诸多web新技术的HTML5游戏。游戏的作者treeform分别使用webGL、WebSocket、AudioContext和作者自制的响应式HTML框架来渲染图形、创建网络连接、播放音频和设计UI。另外，他还使用了Electron来将游戏打包成Windows和Mac的桌面应用程序。笔者这次给大家分享一下 Istrolid作者的游戏开发心得。 2D WebGL 在使用openGL和WebGL引擎时，开发者通常会创建多个网格和纹理对象。但是Istrolid的 作者却有着自己独特...
HTML5之WebGL3D概述(下)—借助类库开发及框架介绍_html5教程技巧【图】
前面我们看到了使用原生的WebGL API开发是多么的累，正因为如此，大量的WebGL框架被开发出来。使用这些框架，你可以快速创建需要的3D场景。这些框架不同程度的封装了创建3D场景的各种要素，例如场景，相机、模型、光照、材质等等；使用这些封装起来的对象，就可以很简单的创建需要的3D场景，这样你就只需要把更多精力放在逻辑方面就可以了。目前并没有哪一个具有能压倒其他框架的优势，选择什么样的框，还是看个人喜好吧，不过选择...
HTML5之WebGL3D概述(上)—WebGL原生开发开启网页3D渲染新时代_html5教程技巧
WebGL开启了网页3D渲染的新时代，它允许在canvas中直接渲染3D的内容，而不借助任何插件。WebGL同canvas 2D的API一样，都是通过脚本操纵对象，所以步骤也是基本相似：准备工作上下文，准备数据，在canvas中绘制对象并渲染。与2D不同的就是3D涉及的知识更多了，例如世界、光线、纹理、相机、矩阵等专业知识。WebGL有一个很好的中文教程，就是下面使用参考中的第一个链接，所以这里不再班门弄斧，后面的内容只是简单的总结一下学习的内...
图形程序接口知多少 | OpenGL、OpenCL、Vulkan、OpenGL ES、WebGL、Metal、Directx【图】
计算机图形程序接口 | Graphics API 对于普通的电脑玩家来说这是一个不重要的东西，但对于游戏开发、玩游戏做三维的人来说，这部分知识可能会常常被提及，尤其是涉及到游戏相关的。计算机图形程序接口是一套可编程的开放标准，3D\2D 都需要这部分底层的 API 支持。如果你是一名游戏开发者，没有借助图形 API 来开发游戏的话，这意味着你的游戏想要调用系统硬件（GPU）的时候，这部分的程序需要自己独立开发，这无疑是增加了游戏开发...
WebGL编程笔记3：纹理图片texture【图】
HTML部分<script type="text/javascript" src="gl-matrix.js"></script> <canvas id="myCanvas" width="400" height="400" style="border: 1px solid red"></canvas> JavaScript部分以下两点若不注意texture2D有可能取不到值，一片黑色。老的显卡只支持图片尺寸为2的n次幂的纹理图片。 TEXTURE_MAG_FILTER和TEXTURE_MIN_FILTER参数需要制定。 const vertex = `attribute vec3 v3Position;uniform mat4 u_matrix;attribute vec2 i...
javascript-移动设备上的Cordova中的3D WebGL
有没有办法在移动设备上的Cordova中使用WebGL？如果没有,是否有移动替代方案？ 我想要支持ios,主要是因为android crosswalk已经支持webgl.解决方法:是iOS8及其WebView上的WebGL支持.因此所有基于Cordova / PhoneGap的应用程序也将正常运行. 好人：http://www.sencha.com/blog/apple-shows-love-for-html5-with-ios-8 还有这些：http://blog.ludei.com/webgl-ios-8-safari-webview/ http://toucharcade.com/2014/09/18/ios-8-webgl-...
javascript-iOS WebGL纹理渲染中的缺陷【代码】
使用three.js库对WebGL纹理渲染进行此简单测试：// Canvas dimensionscanvasW = Math.floor(0.9*window.innerWidth); canvasH = Math.floor(0.75*canvasW); cAR = canvasW / canvasH; canvasWrapper = document.getElementById('canvasWrapper'); canvasWrapper.style.width=canvasW+'px'; canvasWrapper.style.height=canvasH+'px';// Rendererrenderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(wi...
javascript-如何在webgl中获得像素化效果？【代码】
我想在webgl中模拟像atari或commodore这样的旧PC低分辨率的效果,是否可以绘制图像,然后如何使像素变大？ 我是webgl的新手,应该如何开始这种效果？ 我发现this有马赛克效果,但是它使用three.js,我想在没有框架的情况下进行.解决方法:有很多方法可以做到这一点.最简单的方法是通过将其附加到帧缓冲区来渲染为低分辨率的纹理,然后将纹理过滤设置为NEAREST将该纹理渲染到画布上. 这是一个样本.它使用的不是框架而是TWGL,只是使WebGL不再...