经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 WebGL

WebGL简易教程(二):向着色器传输数据

目录 1. 概述 2. 示例:绘制一个点(改进版) 1) attribute变量 2) uniform变量 3) varying变量 3...[2019/8/12]

WebGL之物体选择

原文地址: WebGL之物体选择 使用WebGL将图形绘制到画布后,如何与外部进行交互?这其中最关键的就是如何实现物体的选择。比如鼠标点击后判断是否选中了某个图形或图形的某个部分。 本节实现的效果: WebGL选中物体 如何实现选中物体 颜色区分法 《WebGL编程指南》中提出了一个原理很...[2019/5/30]

WebGL学习之HDR与Bloom

什么是HDR HDR (High Dynamic Range,高动态范围),在摄影领域,指的是可以提供更多的动态范围和图像细节的一种技术手段。简单讲就是将不同曝光拍摄出的最佳细节的LDR (低动态范围) 图像合成后,就叫HDR,它能同时反映出场景最暗和最亮部分的细节。为什么需要多张图片?因为目前的...[2019/5/22]

WebGL学习之纹理盒

我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果。但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表立方体的6个面。不像常规的纹理坐标有2个纬度,立方体纹理使用法向量,换句话说三维方向。本节实现的demo请看 天空盒 根据法向...[2019/5/7]

WebGL学习之法线贴图

实际效果请看demo:纹理贴图 为了增加额外细节,提升真实感,我们使用了漫反射贴图和高光贴图,它们都是向三角形进行附加纹理。但是从光的视角来看是表面法线向量使表面被视为平坦光滑的表面。以光照算法的视角考虑的话,只有一件事决定物体的形状,那就是垂直于它的法线向量。砖块表面只有一个法向量,表面完...[2019/5/5]

WebGL半透明物体的绘制

WebGL 中当透明和半透明物体共存时,相关设置不正确的话,物体表面会出现破碎杂乱的断面,非常影响效果,我们接着就来解决这个问题。 完成的展示Demo请看: 半透明物体和透明物体共存 α 混合 让物体实现半透明效果需要用到颜色的α分量。该功能被称为a混合(alpha blending) 或 ...[2019/5/5]

WebGL学习之纹理贴图

WebGL学习之纹理贴图

为了使图形能获得接近于真实物体的材质效果,一般会使用贴图,贴图类型主要包括两种:漫反射贴图和镜面高光贴图。其中漫反射贴图可以同时实现漫反射光和环境光的效果。 实际效果请看demo:纹理贴图 2D纹理 实现贴图就需要用到纹理,常用的纹理格式有:2D纹理,立方体纹理,3D纹理。我们使用最基本的...[2019/4/30]

WebGL学习教程之Three.js学习笔记(第一篇)

webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染。 WebGL技术标准免去了开发网页专用渲染插件的麻烦...[2019/4/26]

WebGL three.js学习笔记之阴影与实现物体的动画效果

实现物体的旋转、跳动以及场景阴影的开启与优化 本程序将创建一个场景,并实现物体的动画效果  运行的结果如图: 运行结果  完整代码如下: <!DOCTYPE html> <html lang="en"> ...[2019/4/26]

WebGl 利用缓冲区对象画多个点

效果: 代码:   1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <...[2019/4/1]

WebGl 利用drawArrays、drawElements画三角形

效果:   代码:   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>We...[2019/4/1]

WebGl 二维纹理贴图(矩形)

效果:   代码:   1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5...[2019/4/1]

WebGl 多缓冲区传递颜色和坐标(矩形)

效果:   代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <...[2019/4/1]

纯Shading Language绘制HTML5时钟

搞个HTML5版的时钟就是我们今天要完成的任务,实现HTML5的时钟绘制一般会采用三种方式,第一种采用CSS的实现方式,例如 http: www.c -tricks.com/example CSS3Clock/ ;第二种采用SVG的实现方式,例如 http: www.c -tricks.com/e...[2018/12/11]

WebGL模型拾取——射线法二

  这篇文章是对射线法raycaster的补充,上一篇文章主要讲的是raycaster射线法拾取模型的原理,而这篇文章着重讲使用射线法要注意的地方。首先我们来看下图。   我来解释一下上图中的originTriangle,这就是Triangle2三角形第一次绘制在空间中的位置,而Triang...[2018/11/19]

WebGL模型拾取——射线法

  今天要把WebGL中一个非常重要的算法记录下来——raycaster射线法拾取模型。首先我们来了解一下为什么要做模型拾取,我们在做webgl场景交互的时候经常要选中场景中的某个模型,比如鼠标拖拽旋转,平移。为了能做到鼠标交互,就首先要能选中场景中的模型对象,这就要用到模型拾取算法,本文仅讨论射...[2018/11/17]

136
2
记录数:16 页数:1/11
加载更多