WebGL

I am trying to create a simple rectangle with a .mp4 video as texture. As per three.js documentation( http://threejs.org/docs/#Reference/Textures/Texture ) this should be straight forward. When I am putting link of video, all I am getting is a black colored box with no texture on it. I have tested code by replacing video with a jpg image and it works fine. Can someone please explain me what I am doing wrong. I have already seen the examples in which video is played by first linking it to a video element and then copy the frames on a canvas. I want to try the direct way as mentioned in the

前言 随着城市规模的扩大，传统的方式很难彻底地展示城市的全貌，但随着 3D 技术的应用，出现了 3D 城市群的方式以动态，交互式地把城市全貌呈现出来。配合智能城市系统，通过 Web 可视化的方式，使得城市管理者可以更及时地了解交通情况，城市消防，电力管理等方面的运行情况，做出处理。 本 demo 使用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案，传统的 智慧楼宇/楼宇自动化/楼宇安防/智慧园区 常会采用 BIM（建筑信息模型 Building information modeling）软件，如 Autodesk 的 Revit 或 Bentley 这类建筑和工程软件，但这些 BIM 建模模型的数据往往过于庞大臃肿，绝大部分细节信息对楼宇自控意义不大，反而影响拖累了行业 Web SCADA 或 Web 组态监控的趋势，所以我们采用以 Hightopo 的 HT for Web 产品轻量化 HTML5/WebGL 建模的方案，实现快速建模、运行时轻量化到甚至手机终端浏览器即可 3D 可视化运维的良好效果。 demo 地址： 智慧城市 预览图： 代码实现 加载 3d 场景 新建一个 3d 场景，并加入到页面中。 const g3d = new ht.graph3d.Graph3dView(); const dm3d = g3d.dm(); g3d

前言 工业互联网，物联网，可视化等名词在我们现在信息化的大背景下已经是耳熟能详，日常生活的交通，出行，吃穿等可能都可以用信息化的方式来为我们表达，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该 3D 场景从正面展示了一个地铁站的现实场景，包括地铁的实时运行情况，地铁上下行情况，视频监控，烟雾报警，电梯运行情况等等，帮助我们直观的了解当前的地铁站。 系统中为了帮助用户更直观友好的浏览当前地铁站，提供了三种交互模式： 第一人称模式 -- 操作就类似行人或车在行进的效果，可以通过键盘鼠标控制前进后退。 自动巡检模式 -- 该模式下用户不需要任何操作，场景自动前进后退来巡查当前地铁站的场景。 鼠标操作模式 -- 左键旋转场景，右键平移场景。 本篇文章通过对地铁站可视化场景的搭建，动画代码的实现，交互模式的原理解析，以及主要功能点的实现进行阐述，帮助我们了解如何使用 HT 实现一个简单的地铁站可视化。 预览地址： 基于 HTML5 WebGL 的地铁站 3D 可视化系统 http://www.hightopo.com/demo/ht-subway/ 界面简介及效果预览 地铁运行效果 地铁从站外开到站内的效果为透明度逐渐增加，速度逐渐降低。 漫游效果

前言 随着城市规模的扩大，传统的方式很难彻底地展示城市的全貌，但随着 3D 技术的应用，出现了 3D 城市群的方式以动态，交互式地把城市全貌呈现出来。配合智能城市系统，通过 Web 可视化的方式，使得城市管理者可以更及时地了解交通情况，城市消防，电力管理等方面的运行情况，做出处理。 本 demo 使用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案，传统的 智慧楼宇/楼宇自动化/楼宇安防/智慧园区 常会采用 BIM（建筑信息模型 Building information modeling）软件，如 Autodesk 的 Revit 或 Bentley 这类建筑和工程软件，但这些 BIM 建模模型的数据往往过于庞大臃肿，绝大部分细节信息对楼宇自控意义不大，反而影响拖累了行业 Web SCADA 或 Web 组态监控的趋势，所以我们采用以 Hightopo 的 HT for Web 产品轻量化 HTML5/WebGL 建模的方案，实现快速建模、运行时轻量化到甚至手机终端浏览器即可 3D 可视化运维的良好效果。 demo 地址： 预览图： 代码实现 加载 3d 场景 新建一个 3d 场景，并加入到页面中。 const g3d = new ht.graph3d.Graph3dView(); const dm3d = g3d.dm(); g3d.addToDOM();

Is it possible to achieve an transparency effect where fragments with alpha lower than 0.5 are discarded and fragments with alpha higher than 0.5 are rendered rendered opaque? From what I've read, glEnable(GL_ALPHA_TEST); glAlphaFunc(GL_GREATER, 0.5); would be what I'm looking for but unfortunately, AlphaFunction is not defined in WebGL. Is there a workaround? My problem is, that transparent fragments write into the depth buffer and thus prevent farther fragments from beeing rendered: alpha_error http://gebackene-ente.at/nudelsalat/sonstiges/pointcloud_alphaerror.jpg Sorting is not an option

I'm learing three.js and I faced a z-fighting problem. There are two plane object, one is blue and the other is pink. And I set the positions using the flowing codes: plane1.position.set(0,0,0.0001); plane2.position.set(0,0,0); Is there any solution in three.js to fix all the z-fighting problem in a big scene? I ask this problem because I'm working on render a BIM(Building Information Model, which is .ifc format) on the web. And the model itself have so much faces which are so closed to each other. And it cause so much z-fighting problems as you can see: Is three.js provide this kind of method

I'm using Three.js to draw 3D models onto a webgl canvas renderer above simple DOM elements, and I need to do collision detection between them. My currently working method is to use renderer.domElement.toDataURL(), load this as an imageData object then draw this onto a separate 2D canvas context, then pull the getImageData() pixel array and iterate through using this awesome pixel collision function . This is incredibly slow, and pulls my frame rate down to a nearly unplayable ~5-8 FPS. Without running this hit detection I get about 40-50 FPS. My best guess is that the slowdown is the

I've been following a couple of tutorials on html5rocks, and I managed to make a javascript program which displays ONE image on a canvas using webGL. I have posted the code I have for this below. The problem is, it seems there is nobody out there who shows you how to draw more than ONE object in webGL. I've never worked directly with webGL before, so it's not very intuitive for me. How can I modify this code to draw each object in the imageObjectArray ? (notice that now I'm just drawing imageObjectArray[0] . function render(canvas, contextGL, imageObjectArray) { vertexShader =

In the following code, I render some cubes and light them with a PointLight and AmbientLight. However the AmbientLight when set to 0xffffff changes the colour of the sides to white, no matter their assigned colours. Strangely, the point light is working as expected. How can I make the ambient light behave like the point light, in that it shouldn't wash out the face colours, simply illuminate them? I.e. so setting ambient light to 0xffffff would be equivalent to having multiple point lights at full intensity around the object. $(function(){ var camera, scene, renderer; var airplane; var