webgl
csdn_xpw
目前就职于BAT
展开
-
webgl学习笔记一-绘图单点
写在前面 WebGl(全称:Web Graphics Library : web图形库) 是基于OpenGL ES 2.0的3D绘图协议。 WebGL完美地解决了现有的Web交互式三维动画的两个问题:第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件支持;第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。 绘图原创 2017-08-31 21:43:24 · 489 阅读 · 0 评论 -
webgl学习笔记三-平移旋转缩放
写在前面建议先阅读下前面我的两篇文章。webgl学习笔记一-绘图单点webgl学习笔记二-绘图多点 平移1、关键点说明顶点着色器需要加上 uniform vec4 u_Translation, 存储平移的坐标矢量。顶点坐标位置 : gl_Position = a_Position + u_Translation平移API : gl.uniform4f(u_Transla原创 2017-09-05 00:22:01 · 691 阅读 · 0 评论 -
webgl学习笔记四-动画
写在前面建议先阅读下前面我的三篇文章。webgl学习笔记一-绘图单点webgl学习笔记二-绘图多点webgl学习笔记三-平移旋转缩放 下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘正方形,并且每次重绘时轻微地改变其角度。 demo吊下胃口html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2017-09-05 00:23:41 · 329 阅读 · 0 评论 -
webgl学习笔记五-纹理
写在前面建议先阅读下前面我的三篇文章。webgl学习笔记一-绘图单点webgl学习笔记二-绘图多点webgl学习笔记三-平移旋转缩放术语 : 纹理 :图像图形装配区域 :顶点着色器顶点坐标信息装配图形 : 片元着色器装配光栅化 :显示在屏幕上的三角形是由片元(像素)组成的,所以还需要将图形转化为片元,这个过程被称为光栅化。纹理图像:映射的这个图像称为纹理图像纹素 : 组成纹理图像的像素原创 2017-09-05 00:24:57 · 401 阅读 · 0 评论 -
webgl学习笔记二-绘图多点
写在前面建议先看下第一篇webgl学习笔记一第一篇文章,介绍了如何用webgl绘图一个点。接下来本文介绍的是如何绘制多个点。形成一个面。webgl提供了一种很方便的机制,即缓冲区对象,可以一次性地向着色器传入多个顶点的数据。缓存区对象是webgl系统的一块内存区域。 绘制多个点的流程这里重点介绍缓冲区对象使用步骤创建缓冲区对象gl.createBuffer()绑定缓冲区对象gl.bi原创 2017-09-02 12:47:51 · 534 阅读 · 0 评论 -
WebGL高级进阶之路-滤镜grayscale实现
前言WebGL比较核心的两大着色器, 顶点着色器、片元着色器, 它俩肩负重任。顶点着色器负责顶点的坐标位置、大小定义, 片元着色器负责颜色效果。先看看我们要实现的效果, 开下胃(奸笑~~)HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body><div style="float:原创 2017-09-22 00:08:11 · 1560 阅读 · 0 评论