WebGL

WebGL drawing failure after mouse click

由 家住魔仙堡 提交于 2020-01-07 03:58:47
问题 I have a helper method drawRect(p1, p2) that draws a rectangle (in orthographic projection). The code works fine if I do this: function webGLStart() { // initialization code gl.clear(gl.COLOR_BUFFER_BIT); gl.uniformMatrix4fv(shaderProgram.pMatrixLoc, false, pMatrix); drawRect(new Point(10, 10), new Point(50, 50)); } Now suppose I want to render a new rectangle after every mouse click. So I cleared the canvas, set up the projection matrix and moved the drawRect call in mouse down handler. And

基于 HTML5 WebGL 的地铁站 3D 可视化系统

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

基于 HTML5 WebGL 的民航客机飞行监控系统

由 大兔子大兔子 提交于 2020-01-07 01:08:18
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前些日子出差，在飞机上看到头顶的监控面板，除了播放电视剧和广告之外，还会时不时的切换到一个飞机航行的监控系统，不过整个监控系统让人感到有一点点的简陋，所以我就突发奇想制作了一个采用 HT for Web 的升级版监控系统，demo 的效果还行，发出来大家相互学习下。 demo (https://www.hightopo.com/demo/flight-monitor/) 实现过程 云中穿行效果 为了达到飞机云中穿行的效果，最开始我遇到的问题是飞机飞行的层次感，也就通常所说的透视效果，这里我采用的是云通道和云背景以不同的速度流动，制造一种飞行的透视效果。 云我采用的是贴图的方式呈现的，但是仅仅是贴图会遮挡天空和飞机，非常影响飞机飞行的观感，所以我开启了相应图元的 transparent 和 opacity ，云背景和云通道设置不同的透明度，不仅增加了层次感，还会让人产生云朵从眼前飘过的错觉。 云通道采用的是 ht.Polyline 类型，通道缩放拉大了 Y 轴的比例，使云通道有更大的纵向空间，设置 reverse.flip 背拷贝使云通道内部也显示出贴图，仿佛让飞机置身于云海中穿梭；云背景采用 ht.Node 类型，只设置一个面显示充当云背景。 整体的云流动效果采用 offset 偏移实现

从0开发3D引擎（二）：准备预备知识

由 纵然是瞬间 提交于 2020-01-07 00:11:18
大家好，本文介绍了开发3D引擎需要的预备知识，给出了相关的资源。 上一篇博文 从0开发3D引擎（一）：开篇 了解Web 3D Web 3D的历史-WebGL 目前Web 3D是基于WebGL这个Web端3D API的，它的版本历史为： （图来自于 WebGPU 开发状态与计划 ） （注：OpenGL是桌面端的3D API，OpenGL ES是移动端的3D API） 2007年，发布OpenGL ES 2.0 OpenGL ES 2.0引入了可编程着色器，增加了顶点着色器和片段着色器。 2011年，基于OpenGL ES 2.0，发布WebGL 1.0 WebGL 1.0的发布和各大浏览器的支持，意味着Web 3D时代的来临。随后各种Web 3D开源引擎（如three.js、babylon.js等）以及Web 3D商业化方案（如playcanvas）陆续出现，使得Web 3D应用开发变得越来越简单。 2012年，发布了OpenGL ES 3.0；2014年和2015年分别发布了OpenGL ES 3.1和3.2 移动端3D API继续增强，升级内容如上图（“WebGL版本演示”）所示。 2017年，基于OpenGL ES 3.0，发布了WebGL 2.0 WebGL 2.0完全兼容WebGL 1.0，进行了很多增强：如支持3D纹理、UBO等 Apple不支持WebGL 2.0的

WebGL/Three.js深度学习课程详解

由 六月ゝ 毕业季﹏ 提交于 2020-01-06 16:55:43
课程介绍: 适用于对WebGL、Three.js等3D技术感兴趣，却不知道如何入门的同学， 课程带领大家深入理解WebGL的原理。 课程目录: ├─01-基础部分 │ 01-WebGL与three.js的基础、与opengl的关系.mp4 │ 02-编写第一个three.js程序.mp4 │ 03-three.js程序框架，绘制一条直线.mp4 │ 04-三维世界的组成(点、线).mp4 │ 05-坐标系的秘密（世界坐标、本地坐标）.mp4 │ 06-three.js让场景动起来的两种方法.mp4 │ 07-帧循环、游戏循环、渲染循环需要知道的深入意义.mp4 │ 08-three.js（WebGL）相机的工作原理，适用于任何一种3D编程方法.mp4 │ 09-正投影和透视投影相机的实践.mp4 │ 10-深入浅出WebGL中相机的三个向量参数.mp4 │ 13-光的初体验环境光.mp4 │ 14-光的初体验环境光2.mp4 │ 15-光的初体验点光源.mp4 │ 16-纹理一种让模型美丽的特殊技能.mp4 │ 17-纹理基础篇:three.js为物体加上皮肤，让世界还原真实.mp4 │ 18-纹理基础篇:纹理的重复与纹理的回环以及纹理偏移.mp4 │ 19-自定义绘制一个彩色三角形，了解geometry的结构.mp4 │ 20-geometry中face及face中的值的介绍

Extra Space in WebGL Despite Same Dimension

由 为君一笑 提交于 2020-01-06 16:17:24
问题 In short, I am rendering a 2D image on a quad that fills the viewport. In Firefox it looks fine, but Chrome has a 1px spacing on the right and bottom. What I did was set the dimension of the canvas and viewport to the size of the image. Am I doing anything wrong? Here's my code in case you want to see it. function initShaders() { var fragmentShader = getShader(gl, "shader-fs"); var vertexShader = getShader(gl, "shader-vs"); //create the program shaderProgram = gl.createProgram(); gl

Is it possible to get the actual value of a vertex?

由 前提是你 提交于 2020-01-06 16:05:05
问题 I was trying to recover some vertex data from vertex shader, but I haven't found any relevant information about this on the internet. I'm using the vertex shader to calculate my vertex positions using the GPU, but I need to get the results for the logic of my application in Javascript. Is there a possible way to do this without calculating it in Javascript too? 回答1: In WebGL2 you can use transform feedback (as Pauli suggests) and you can read back the data with getBufferSubData although

Is it possible to get the actual value of a vertex?

由 不想你离开。 提交于 2020-01-06 16:04:11
问题 I was trying to recover some vertex data from vertex shader, but I haven't found any relevant information about this on the internet. I'm using the vertex shader to calculate my vertex positions using the GPU, but I need to get the results for the logic of my application in Javascript. Is there a possible way to do this without calculating it in Javascript too? 回答1: In WebGL2 you can use transform feedback (as Pauli suggests) and you can read back the data with getBufferSubData although

webGL 绘制图形

由 亡梦爱人 提交于 2020-01-06 15:27:54
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>webGL绘制图形</title> </head> <body> <canvas id="cvs" width="200" height="200" style="border: 1px solid red;"> 你的浏览器不支持canvas元素 </canvas> <script> // 获取画布 var cvs = document.querySelector('#cvs') // 获取元素的上下文对象 var gl = cvs.getContext('webgl') // 设置绘制图形的填充颜色 gl.clearColor(1.0, 0.0, 0.4, 1.0) // 调用缓存中的值填充图形 gl.clear(gl.COLOR_BUFFER_BIT) </script> </body> </html> 来源： https://www.cnblogs.com/liea/p/12152149

Alpha rendering difference between OpenGL and WebGL

由 十年热恋 提交于 2020-01-06 11:47:43
问题 I'm rendering the same scene using the same exact C++ code, once to native OpenGL on windows and once using Emscripten to WebGL. Everything in the scene looks exactly the same, except when I'm rendering something with alpha != 1.0. The difference looks like this: The blue cube color is (0.0, 0.0, 1.0, 0.5) The shader used for rendering the cube does nothing except draw the color. On the right is how it looks with OpenGL and is the expected result, just blue with half transparency. On the left
订阅 WebGL