首页
首页
BOT
沸点
课程
直播
活动
AI刷题
NEW
商城
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
慕斯不想说话
掘友等级
web前端开发
|
百度
web前端,webgis,三维可视化
获得徽章 0
动态
文章
专栏
沸点
收藏集
关注
作品
赞
20
文章 20
沸点 0
赞
20
返回
|
搜索文章
最新
热门
WebGl之α融合和深度测试
GPU的渲染管线有各种功能单元,通过执行gl.enable函数可以开启。gl.enable可以传入不同的值来开启相应的功能,gl.enable()的参数对应的功能模块。
WebGL纹理贴图之图片拉伸及彩色图转灰度图
图片拉伸的原理本质上是旋转顶点坐标。彩色图转灰度图本质上是改变纹理的颜色。顶点着色器代码 将顶点坐标绕x,y轴分别旋转,就可以实现图片拉伸的效果。
WebGL之多个纹理贴图
可以给一个面添加多个问题,并且还能然纹理动起来。这个demo是在纹理贴图和纹理动画的基础上修改的。修改的代码如下所示
立方体的纹理贴图及鼠标控制运动
该demo实例是在前面立方体的纹理贴图的基础上修改的。不过这里用到了一些别人写好的库。库文件都放在我的github里面,有需要的可以自行下载。所以这里就只列出了跟立方体的纹理贴图demo不一样的地方。
WebGL立方体的纹理贴图
立方体有六个面,六个面都需要添加纹理。同时为了显示立方体的三维效果,我们还需要旋转一下立方体。这里的难点还是在于顶点数据的构建。
WebGL之纹理动画
在前端我们可以使通过改变dom的样式来实现dom的动画效果。在WebGL中我们同样可以实现动画效果。通过改变纹理坐标我们也可以实现纹理贴图的动画效果。
WebGL之纹理贴图
就是将 png、jpg 等格式图片显示在 WebGL 三维场景中。 在着色器中图片的坐标称为纹理坐标,图片称为纹理图像,图片上的一个像素称为纹素,一个纹素就是一个 `RGB` 或者`RGBA`值。
WebGL如何绘制一个圆
本文是通过三角形扇来绘制一个圆的,通过绘制足够多的三角扇使得三角扇使得外弧变得圆滑,从而达到圆的效果。通过颜色插值来实现圆的渐变色。
WebGL创建鼠标事件控制的旋转立方体
通过鼠标事件,来控制立方体的旋转。通过鼠标点击事件来控制立方体是否旋转,通过键盘键码值来控制立方体的运动方向。
WebGL立方体的绘制及旋转
下边准备了线立方体和面立方体的实现方式。他们的主要不同点也是在于数据构造和绘制方式上。绘制立方体个人感觉你要学会自己自己去构造立方体所需要的数据。明白为什么么要构造出这种数据格式。
下一页
个人成就
文章被点赞
420
文章被阅读
85,864
掘力值
2,964
关注了
50
关注者
149
收藏集
18
关注标签
42
加入于
2018-10-24