HTML5在线教程和技术博客

  • WebGL入门教程 - 高光计算模型

    现实物体在光源的照射下,会出现吸收和反射。物体的颜色主要由漫反射决定,但局部高光效果则主要由镜面反射来决定。从表面反射出的光线与入射角成相等但相反的角度,称为“镜面反射”。如果镜面反射光线直接进入相机,就好像相机直接看到光源一样,即使它已经从物体上反弹出来。相机看到的是光源的光,而不是物体的颜色。如...

    阅读全文 收藏 评论 (1) 阅读 (237) 2019-08-09 18:06:06  
  • 构建一个面向对象的webgl渲染引擎的总体思考

    WebGL渲染引擎主流的有three.js和babylon.js,如果我们要自己实现一个类似的引擎,该如何设计实现呢?基本上我们可以分解为以下5个部分:webgl渲染部分的封装可渲染实例的抽象光照和相机场景和资源管理常用的图形运算库其中第1部分主要是整合绘制方面的一些...

    阅读全文 收藏 评论 (0) 阅读 (314) 2019-07-19 18:25:30  
  • 体积光原理及WebGL实现

    体积光(或叫上帝之光)在自然界中是十分常见的现象,如太阳光从云隙中透过时产生的云隙光,森林中阳光从树叶中穿过产生的光柱。如果我们要在网页三维场景中模拟这种光效,需要深入了解大气物理模型和光散射原理。大气物理模型物体与其观察者之间存在着复杂的介质,比如太阳光到达我们眼睛是穿过了厚厚的大气层,大气层里面...

    阅读全文 收藏 评论 (1) 阅读 (330) 2019-07-16 17:43:36  
  • webgl glsl程序出错: Loop index cannot be compared with non-constant expression

    出现错误的代码如下:#ifdef>GL_ES precision>mediump>float; #endif //>our>texture uniform>sampler2D>u_image; //>the>texCoords>passed>in>from>the>vertex>shader. varying>vec2>v_texCoord; uniform>float>u_glowRange; void>main() { >>>>vec4>color>=>vec4(0,0,0,0); >>>>for(>float>j>=>1.0;>j...

    阅读全文 收藏 评论 (0) 阅读 (254) 2019-07-12 20:40:31  
  • WebGL光照基础知识:光学现象基本概念

    用webgl着色器来实现光照特效,本质上是一个对物理学特性使用计算机进行近似模拟的方法和过程。所以我们需要理解光线传播的几个基本概念及其区别:反射、衍射、散射以及透射、折射散射是由于介质中存在的微小粒子(异质体)或者分子对光的作用,使光束偏离原来的传播...

    阅读全文 收藏 评论 (0) 阅读 (418) 2019-05-05 00:11:11  
  • WebGL基础知识 - GLSL和着色器(Shader)

    在本站的WebGL入门教程中,提到绘制管道中有两个着色器,一个是vertex shader(顶点着色器)和一个fragment shader(片段着色器)。本章简介这两个着色器的具体使用。每个着色器本质上就是一个函数,有特定的输入和输出。着色器函数被串联到同一个着色器程序中。Vertex Shader顶点着色器的功能是把原始顶点数据变换到裁减空...

    阅读全文 收藏 评论 (0) 阅读 (1645) 2019-04-29 18:26:12  
  • 3D感知和建模关键硬件技术:双目、3D结构光和TOF

    无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决这样的产业瓶颈。而自动3D建模的一个技术前提是需要设备(如手机或专业的3D扫描仪)能够有效(高精度且快速)感知3D景深。这就引出了本文的主...

    阅读全文 收藏 评论 (0) 阅读 (868) 2019-02-28 14:28:08  
  • OpenGL/WebGL顶点坐标变换过程简介

    世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何变换之前的初始位置和方向所在的坐标系,也就是当前绘图坐标系;该坐标系不固定且仅对该对象适用;默认情况下,该坐标系与世界坐标系重合;当用函数glTranslatef...

    阅读全文 收藏 评论 (3) 阅读 (1822) 2018-11-19 18:03:15  
  • 增强现实引擎ARToolKit工作原理简介

    ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;>B. 强用力的摄像头/相机标定支持(摄像头/相机标定需要确定中心点坐标(光心)、摄像机实际焦距(fx=α∗f,fy=β∗f)(fx=α∗f,fy=β∗f)与镜头畸变参数(取决于...

    阅读全文 收藏 评论 (0) 阅读 (1790) 2018-11-19 17:46:47