-
HTML、JavaScript和GLSL编码规范
HTML编码规范
- 始终将文档类型声明为文档中的第一行:>&!doctype>html&p&div&p...>&/p&br>/&div>class="..."&div>class="..."&div>class="..."> >>&meta>charset="UTF-8">> >>&titleSyntax>and>Coding>Style&/title &/head&!-->This>is>a>com...
-
WebXR基本概念和应用程序开发简介
XR是VR,AR和MR的统称，VR,AR是从感官体验的角度来区分的，
VR是用户借助外设输入输出（头戴、手柄、体感、运动感知等软硬件系统）来和纯虚拟场景的交互体验，AR也是用户借助外设来体验额外的虚拟内容，区别是虚拟内容是叠加在真实世界上，其方式可以是通过透射或者视频叠加。WebXR是基于网页的XR应用程序，可以用来支持... -
WebGL入门教程 - 高光计算模型
现实物体在光源的照射下，会出现吸收和反射。物体的颜色主要由漫反射决定，但局部高光效果则主要由镜面反射来决定。从表面反射出的光线与入射角成相等但相反的角度，称为“镜面反射”。如果镜面反射光线直接进入相机，就好像相机直接看到光源一样，即使它已经从物体上反弹出来。相机看到的是光源的光，而不是物体的颜色。如...
-
如何构建一个面向对象的webgl渲染引擎
WebGL渲染引擎主流的有three.js和babylon.js，如果我们要自己实现一个类似的引擎，该如何设计实现呢？基本上我们可以分解为以下5个部分：webgl渲染部分的封装可渲染实例的抽象光照和相机场景和资源管理常用的图形运算库其中第1部分主要是整合绘制方面的一些...
-
体积光原理及WebGL实现
体积光（或叫上帝之光）在自然界中是十分常见的现象，如太阳光从云隙中透过时产生的云隙光，森林中阳光从树叶中穿过产生的光柱。如果我们要在网页三维场景中模拟这种光效，需要深入了解大气物理模型和光散射原理。大气物理模型物体与其观察者之间存在着复杂的介质，比如太阳光到达我们眼睛是穿过了厚厚的大气层，大气层里面...
-
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...
-
WebGL光照基础知识：光学现象基本概念
用webgl着色器来实现光照特效，本质上是一个对物理学特性使用计算机进行近似模拟的方法和过程。所以我们需要理解光线传播的几个基本概念及其区别：反射、衍射、散射以及透射、折射。散射是由于介质中存在的微小粒子（异质体）或者分子对光的作用，使光束偏离原来的传播...
-
WebGL基础知识 - GLSL和着色器（Shader）
在本站的WebGL入门教程中，提到绘制管道中有两个着色器，一个是vertex shader（顶点着色器）和一个fragment shader（片段着色器）。本章简介这两个着色器的具体使用。每个着色器本质上就是一个函数，有特定的输入和输出。着色器函数被串联到同一个着色器程序中。Vertex Shader顶点着色器的功能是把原始顶点数据变换到裁减空...
-
计算WebGL中的uniforms变量使用数
在使用Three.js为人体模型加载皮肤材料时，启用了skinning:true的参数。有时候会导致GL编译错误，提示“too many uniforms”。下面的文章有助于理解错误原因和检测uniforms的使用情况。For a recent consulting project I was attempting to render some fairly complex skeletal animations in WebGL on Firefox and Chrom...
-
纹理基础知识和过滤模式详解
1、 为什么在纹理采样时需要texture filter（纹理过滤）。
我们的纹理是要贴到三维图形表面的，而三维图形上的pixel中心和纹理上的texel中心并不一至（pixel不一定对应texture上的采样中心texel），大小也不一定一至。当纹理大于三维图形表面时，导至一个像素被映射到许多纹理像素上;当维理小于三维图形表面时，许多个...
© TechBrood Co. All rights reserved. 沪ICP备14011478号
