登录注册
京东自营 + 国补 iPhone 历史最低价          国家补贴 享8折

Xebcnor

  • WebGL 文本 使用字符纹理

    在上一篇文章中我们复习了在 WebGL 场景中如何使用纹理绘制文本。技术是很常见的，对一些事物也是极重要的，例如在多人游戏中你想在一个头像上放置一个名字。同时这个名字也不能影响它的完美性。比方说你想呈现大量的文本，这需要经常改变 UI 之类的事物。前一篇文章给出的最后一个例子中，一个明显的解决方案是给每个字母加纹理。我们来尝试一下改变上一个例子。

    Xebcnor
    webgl， 文本， 使用， 字符， 纹理

  • WebGL 文本 纹理

    在上一篇文章中我们学习了在 WebGL 场景中如何使用一个 2D 画布绘制文本。这个技术可以工作且很容易做到，但它有一个限制，即文本不能被其他的 3D 对象遮盖。要做到这一点，我们实际上需要在 WebGL 中绘制文本。最简单的方法是绘制带有文本的纹理。例如你可以使用 photoshop 或其他绘画程序，来绘制带有文本的一些图像。然后我们构造一些平面几何并显示它。

    Xebcnor
    webgl， 文本， 纹理， 中文版

  • WebGL 文本 Canvas 2D

    相对于使用 HTML 元素制作文本我们还可以使用另一种使用 2D 上下文的画布。不需要分析，我们就可以做一个猜测，这将比使用 DOM 快。当然也会变得相对不灵活。你可能不能得到所有的 CSS 样式。但是，这儿没有 HTML 元素可以创建和跟踪。和前边其他的例子类似，让我们来构造一个容器，但这一次我们将在其中放置两个画布。<div class="container"> <

    Xebcnor
    webgl， 文本， canvas， 2d， 中文版

  • WebGL 文本 HTML

    “在 WebGL 中如何绘制文本”是一个我们常见的问题。那么第一件事就是我们要问自己绘制文本的目的何在。现在有一个浏览器，浏览器用来显示文本。所以你的第一个答案应该是如何使用 HTML 来显示文本。让我们从最简单的例子开始：你只是想在你的 WebGL 上绘制一些文本。我们可以称之为一个文本覆盖。基本上这是停留在同一个位置的文本。

    Xebcnor
    webgl， 文本， html， 中文版

  • WebGL 场景图

    我很肯定一些 CS 大师或者图形大师会给我们讲很多东西，但是...一个场景图通常是一个树结构，在这个树结构中的每个节点都生成一个矩阵...嗯，这并不是一个非常有用的定义。也许讲一些例子会非常有用。 大多数的 3D 引擎都使用一个场景图。你在场景图中放置你想要在场景图中出现的东西。引擎然后按场景图行进，同时计算出需要绘制的一系列东西。

    Xebcnor
    webgl， 场景， 中文版

  • WebGL 绘制多个东西

    在 WebGL 中第一次得到东西后最常见的问题之一是，我怎样绘制多个东西。 除了少数例外情况，首先要意识到的东西是，WebGL 就像某人写的包含某个函数，而不是向函数中传递大量参数，相反，你有一个独自的函数来绘制东西，同时有 70 + 函数来为一个函数设置状态。因此，例如假设你有一个可以绘制一个圆的函数。

    Xebcnor
    webgl， 绘制， 多个， 东西， 中文版

  • WebGL - 更少的代码，更多的乐趣

    WebGL 程序要求你编写必须编译和链接的着色器程序，然后你需要查看对于这些着色器程序的输入的位置。这些输入被称为制服和属性，同时用来查找它们的位置的代码可能是冗长而乏味的。 假设我们已经有了用来编译和链接着色器程序的 WebGL 代码的典型样本。下面给出了一组着色器。 顶点着色器： uniform mat4 u_worldViewProjection;uniform vec3 u_lightWorldPos;

    Xebcnor
    webgl， 更少， 代码， 更多， 乐趣

  • WebGL 3D 摄像机

    在过去的章节里我们将 F 移动到截锥的前面，因为 makePerspective 函数从原点（0，0，0）度量它，并且截锥的对象从 -zNear 到 -zFar 都在它前面。视点前面移动的物体似乎没有正确的方式去做吗？在现实世界中，你通常会移动你的相机来给建筑物拍照。将摄像机移动到对象前你通常不会将建筑移动到摄像机前。

    Xebcnor
    webgl， 3d， 摄像机， 中文版

  • WebGL 3D 透视

    在上一篇文章中，我们就学习过如何做三维，但三维没有任何透视。它是利用一个所谓的“正交”的观点，它固然有其用途，但这通常不是人们说 “3D” 时他们想要的。相反，我们需要补充透视。只不过什么是透视？它基本上是一种事物越远显得更小的特征。看上面的例子，我们看到越远的东西被画得越小。

    Xebcnor
    webgl， 3d， 透视， 中文版

  • WebGL 正交 3D

    在上一篇文章中，我们就学习过二维矩阵是如何进行工作的。我们谈到的平移，旋转，缩放，甚至像素到剪辑空间的投影都可以通过一个矩阵和一些神奇的矩阵数学来完成。做三维只是一个从那里向前的一小步。在我们以前的二维的例子中，我们有二维点（x，y），我们乘以一个 3x3 的矩阵。做三维我们需要三维点（x，y，z）和一个 4x4 矩阵。

    Xebcnor
    webgl， 正交， 3d， 中文版

  • WebGL 2D 矩阵

    在前面三篇文章中我们讲解了如何平移几何图形，如何旋转几何图形，如何伸缩变换图形。平移，旋转和伸缩都被认为是一种变化类型。每一种变化都需要改变渲染器，而且他们依赖于操作的顺序。在前面的例子中我们进行了伸缩，旋转和平移操作。如果他们执行操作的顺序改变将会得到不同的结果。例如 XY 伸缩变换为 2，1，旋转 30%，接着平移变换 100，0。

    Xebcnor
    webgl， 2d， 矩阵， 中文版

  • WebGL 2D 图像伸缩

    图像伸缩和转换一样简单。我们只需对需要变换的点乘以我们想要的比例。如下是从以前的代码改变而来的。<script id="2d-vertex-shader" type="x-shader/x-vertex">attribute vec2 a_position;uniform vec2 u_resolution;uniform vec2 u_translation;uniform vec2 u_rotation;uniform vec2 u_scale;

    Xebcnor
    webgl， 2d， 图像， 伸缩， 中文版

  • WebGL 2D 图像旋转

    首先我要承认下我不是很清楚如何讲解这个让它看起来更容易理解，但是，不管怎么样，我想尽力尝试下。首先，我想介绍下什么叫做“单位圆”。你如果还记得高中数学中(不要睡着了！)一个圆又一个半径。半径指的是从圆心到圆的圆边的距离。单位圆指的是它的半径是 1.0。如下是一个单位圆：打开上面的链接之后，你可以拖动圆环上面的小圆，接着 X 和 Y 的值也会随之发生变化。

    Xebcnor
    webgl， 2d， 图像， 旋转， 中文版

  • WebGL 2D 图像转换

    在学习 3D 相关知识之前，请首先看看 2D 的知识。请保持耐心。这篇文章某些人看起来可能非常简单，但是我们将要讲解的知识是建立在前几篇的文章的基础之上。如果你没有阅读过，我建议你至少阅读第一章之后再回到这里继续学习。Translation 指的是一些奇特的数学名称，它的基本意思是“移动”某物。

    Xebcnor
    webgl， 2d， 图像， 转换， 中文版

  • WebGL 图像处理（续）

    这篇文章是 WebGL 图像处理内容扩展。下一个关于图像处理的显著问题就是如何应用多重效果？读者当然可以尝试着写一下着色器。生成一个 UI 来让用户使用不同的着色器选择他们希望的效果。这通常是不太可能的，因为这个技术通常需要实时的渲染效果。一种比较灵活的方式是使用两种或更多的纹理和渲染效果来交替渲染,每次应用一个效果，然后反复应用。 Original Image ->

    Xebcnor
    webgl， 图像处理， 中文版

  • WebGL 图像处理

    在 WebGL 中图像处理是很简单的，多么简单？为了在 WebGL 中绘制图像，我们需要使用纹理。类似于当渲染代替像素时，WebGL 会需要操作投影矩阵的坐标，WebGL 读取纹理时需要获取纹理坐标。纹理坐标范围是从 0.0 到 1.0。 因为我们仅需要绘制由两个三角形组成的矩形，我们需要告诉 WebGL 在矩阵中纹理对应的那个点。

    Xebcnor
    webgl， 图像处理， 中文版

  • WebGL 着色器和 GLSL

    我们已经讨论了一些关于着色器和 GLSL 的相关内容，但是仍然介绍的不是很仔细。可以通过一个例子来更清楚的了解的更清楚。 正如 WebGL 是如何工作中讲到的，每次绘制，都需要两个着色器，分别是顶点着色器和片段着色器。每个着色器都是一个函数。顶点着色器和片段着色器都是链接在程序中的。一个典型的 WebGL 程序都会包含很多这样的着色器程序。

    Xebcnor
    webgl， 着色器， glsl， 中文版

  • WebGL 是如何工作的

    这部分是上一节WebGL 基本原理的延续。在继续之前，我们需要讨论 WebGL 和 GPU 是如何运作的。GPU 有两个基础任务，第一个就是将点处理为投影矩阵。第二部分就是基于第一部分将相应的像素点描绘出来。 当用户调用 gl.drawArrays(gl.TRIANGLE, 0, 9); 这里的 9 就意味着“处理 9 个顶点”，所以就有 9 个顶点需要被处理。 上图左侧的是用户自己提供的数据。

    Xebcnor
    webgl， 如何， 工作， 中文版

  • WebGL 基本原理

    WebGL 的出现使得在浏览器上面实时显示 3D 图像成为，WebGL 本质上是基于光栅化的 API ,而不是基于 3D 的 API。 WebGL 只关注两个方面，即投影矩阵的坐标和投影矩阵的颜色。使用 WebGL 程序的任务就是实现具有投影矩阵坐标和颜色的 WebGL 对象即可。可以使用“着色器”来完成上述任务。顶点着色器可以提供投影矩阵的坐标，片段着色器可以提供投影矩阵的颜色。

    Xebcnor
    webgl， 基本原理， 中文版

  • WebGL 中文版

    WebGL 是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

    Xebcnor
    webgl， 中文版
上一页 下一页

个人简介

  1. Xebcnor

  2. 前端学习 GO GO GO

  3. 获得 22643 积分

  4. https://nowjava.com/creator/10010

热门标签

关注时代Java

Copyright © 2014-2024NowJava. All Rights Reserved. 时代Java 版权所有 京ICP备14059627号-7

关注时代Java