【笔记】《WebGL编程指南》学习-第2章WebGL入门(2-WebGL的HelloWorld)

今日目标:编写世界上最短的WebGL程序,HelloCanvas。

这个程序的功能就是使用背景色清空了 <canvas> 标签的绘图区。
今天的成果:
这里写图片描述


开始学习!


HTML文件

先来看一下HelloCanvas.html

HelloCanvas.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Clear canvas</title>
</head>

<body onload="main()">
    <canvas id="webgl" width="400" height="400">
        Please use a browser that supports "canvas"
    </canvas>

    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script src="HelloCanvas.js"></script>
</body>
</html>

文件的结构很简单:首先使用 <canvas> 元素定义绘图区域,然后引入HelloCanvas.js文件。除此之外还引入了一些其他文件(就是上一篇文章我说的要去下载的)。

这里写图片描述


HelloCanvas.js

好啦,其实真正使用WebGL来绘制三维图形是在 HelloCanvas.js 这个文件里,看之前先回顾一下上一篇提到的绘制二维图形的三个步骤:

  • 获取 <canvas> 元素
  • 获取绘图上下文
  • 开始绘图

    HelloCanvas.js

function main() {
    //获取canvas元素
    var canvas = document.getElementById("webgl");
    if(!canvas){
        console.log("Failed to retrieve the <canvas> element");
        return;
    }

    //获取WebGL绘图上下文
    var gl = getWebGLContext(canvas);
    if(!gl){
        console.log("Failed to get the rendering context for WebGL");
        return;
    }

    //指定清空<canvas>颜色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //清空<canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);
}

本例子中,main()函数的执行流,包含了以下四个步骤,我们将分别解析:

  1. 获取 <canvas> 元素(不说了,和上一篇一样,传id)
  2. 获取WebGL绘图上下文
  3. 设置背景色
  4. 清空 <canvas>

为WebGL获取绘图上下文

 var gl = getWebGLContext(canvas);

通常来说,应该使用 canvas.getContex() 函数来获取绘图上下文,但在获取WebGL绘图上下文时,canvas.getContex() 函数接受的参数,在不同浏览器种不同,所以这里写了一个函数 getWebGLContext() 来隐藏不同浏览器之间的差异。

而这个函数就在要下的那几个文件里,在前面html文件里引进来的。
下面是该函数的一些规范
这里写图片描述

设置 <canvas>颜色

gl.clearColor(0.0, 0.0, 0.0, 1.0);

在上一篇笔记中,我们在绘制矩形之前就制定了绘图颜色。在WebGL中,与之类似,清空绘图区之前你也得指定背景颜色,同样是以 RAGB 格式设置背景色,但不同的是取值范围。
在上一篇二维图形程序中,颜色分量值是在0到255之间。凡是,由于 WebGL 是继承自 OpenGL 的,所以它遵循传统的 OpenGL 颜色分量的取值范围,是从 0.0 到 1.0。RGB 的值越高,颜色越亮。透明度还是相同的取值范围。

一旦指定了背景色后,背景色就会贮存在WebGL系统(WebGL System)中,在下一次调用 gl.clearColor() 前不会改变。

清空 <canvas>

gl.clear(gl.COLOR_BUFFER_BIT);

最后调用这个函数,用之前指定的背景色清空(用背景色填充,擦除已经绘制的内容)绘图区域。

注意,函数的参数是 gl.COLOR_BUFFER_BIT ,而不是表示绘图区域的<canvas>。这是因为 WebGL 中的 gl.clear() 方法实际上继承自 OpenGL ,它基于多基本缓冲区模型。清空绘图区域,实际上是在清空颜色缓冲区(color buffer),传递参数 gl.COLOR_BUFFER_BIT 是在告诉 WebGL 清空颜色缓存区,比如深度缓冲区和模板缓存区(后面介绍,有个印象就行)。

这里写图片描述

如果没有指定背景色,那么使用的默认值如下图:

这里写图片描述


运行下html文件就可以看到这样的啦:
这里写图片描述

更改颜色的RGB值,还可以更改颜色
这里写图片描述

今天就到这啦 ,打完收工!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Unity WebGL中使用Java提供的接口数据,可以通过以下步骤实现: 1. 在Java中创建一个可以从JavaScript调用的公共方法,例如: ```java public class MyJavaClass { public static String myMethod(String arg) { return "Hello " + arg + " from Java!"; } } ``` 注意,该方法必须是静态的,并且必须具有可公开访问的public修饰符。 2. 在Unity WebGL中,使用JavaScript的`window["java"]`对象调用Java方法。首先,需要在Unity中创建一个JavaScript文件。在该文件中,创建一个在Unity启动时加载的函数,该函数将初始化Java对象,并返回对该对象的引用。例如: ```javascript var javaObj; function initJava() { javaObj = UnityLoader.instantiate("javaObj", "MyJavaClass"); } function callJavaMethod(arg) { var result = javaObj.call("myMethod", arg); return result; } ``` 其中,`instantiate`方法将创建一个Java对象,并将其命名为`javaObj`,该对象的类名为`MyJavaClass`。`call`方法将调用Java对象的`myMethod`方法,并将`arg`作为参数传递给该方法。 3. 在Unity中,使用`Application.ExternalEval`方法调用JavaScript函数。例如: ```c# string arg = "World"; string result = Application.ExternalEval("callJavaMethod('" + arg + "')"); Debug.Log(result); ``` 其中,`ExternalEval`方法将调用JavaScript中的`callJavaMethod`函数,并将`arg`作为参数传递给该函数。函数将返回结果,该结果将存储在`result`变量中,并在Unity的控制台中打印出来。 注意,需要将JavaScript文件添加到Unity的HTML模板中,以便在WebGL构建中正确加载它。 希望这可以帮助你开始使用Java和Unity WebGL进行交互。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值