女王控的博客

前端

163 篇文章

Three.js练手测试

测试一 画 3 个带有反光的立方体 测试二 对 3 个带有反光的立方体做响应式处理,要求满足下面条件 窗口任意大小立方体不会被拉伸 不能出现明显的锯齿(块状化) 支持高分屏 测试三 绘制常见的图元 测试四 太阳,地球,月球模拟 测试五 实现坦克多视角切换 测试六 实现常见的不同材质 测试七 多个纹理加载 测试八 实现过滤和 mipmaps 测试九 重复,偏移,旋转,包裹一个纹理 »

WebGL 零基础入门学习

快速入门 绘制一个点 着色器代码放在 script 标签中 绘制一个矩形 attribute 关键字 声明顶点相关数据的时候需要用到 attribute 关键字,目的是为了 js 可以调用相关的 WebGL API 把顶点相关数据从 js 传递给顶点着色器 attribute 声明的变量。 drawArrays 整体执行顺序 硬件相关 着色器语言编写的程序称为着色器程序(shader program),在 GPU 顶点着色器单元上执行的是顶点着色器程序,在 GPU… »

CSS新世界全新的布局方式

之前,CSS 世界中除受限诸多的表格布局之外是没有专门的布局属性的,随着 Web 应用越来越复杂,显示设备越来越多样,原有的 CSS 特性已经无法满足现代 Web 开发需求了。于是,CSS 定义了很多全新的布局方式,这些新的布局 CSS… »

WebGL 理论基础——二维

WebGL 二维平移 平移就是普通意义的“移动”物体。这里有个例子基于前一个例子。首先我们来定义一些变量存储矩形的平移,宽,高和颜色。 然后定义一个方法重绘所有东西,我们可以在更新变换之后调用这个方法。 在下方的例子中,我添加了一对滑块,当它们值改变时会更新 和 并且调用 drawScene 方法。拖动滑块来平移矩形。 到目前为止还不错!但是想象一下如果对一个更复杂的图形做类似操作怎么办。 假设我们想绘制一个由六个三角形组成的 ‘F… »

WebGL 理论基础——纹理

WebGL 三维纹理 在 WebGL 中如何使用纹理?你可能会从二维图像处理的文章中得到启发,如果我们讲的再深入一点可能更好理解。 首先需要调整着色器以便使用纹理,这里是顶点着色器的修改部分,我们需要传递纹理坐标,在这个例子中直接将它们传到片断着色器中。 在片断着色器中声明一个 sampler2D 类型的全局变量,可以让我们引用一个纹理,然后使用从顶点着色器传入的纹理坐标调用 texture2D 方法,在纹理上找到对应的颜色。 我们需要设置纹理坐标 F 如你所见,我们将图像映射到 F… »

0%