In this lesson we cover setting up WebGL for use, including creating a canvas, getting the WebGL rendering context and clearing the canvas to a particular color.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Setup</title>

</head>

<body>

    <canvas id="canvas" width="600" height="600"></canvas>

    <script src="./mian.js"></script>

</body>

</html>
var gl;

initGL();

draw();

function initGL(){

    var canvas = document.getElementById("canvas");

    gl = canvas.getContext("webgl");

    gl.viewport(0,0,canvas.width, canvas.height);

    gl.clearColor(1,0,0,1); //red, blue, green, alpha

}

function draw(){

    gl.clear(gl.COLOR_BUFFER_BIT); //Paint the color to the canvas

}

[WebGL] Setting Up WebGL的更多相关文章

  1. WebGL自学教程——WebGL演示样本：开始

    最终开始WebGL样品演示,...... 开始 使用WebGL步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊>中的 ...

  2. WebGL自学教程——WebGL演示样例：開始

    最终開始WebGL的演示样例了,...... 開始 使用WebGL的步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊> ...

  3. 【WebGL】《WebGL编程指南》读书笔记——第6章

    一.前言        最近重感冒发烧,妈蛋好难受,请假了3天,驾校也没去,简直僵硬!今天继续WebGL的学习. 二.正文        A. GLSL支持两种数据值类型: 整数型(int)与浮点型( ...

  4. 【WebGL】《WebGL编程指南》读书笔记——第5章

    一.前言        终于到了第五章了,貌似开始越来越复杂了. 二.正文         Example1:使用一个缓冲区去赋值多个顶点数据(包含坐标及点大小) function initVerte ...

  5. 【WebGL】《WebGL编程指南》读书笔记——第3章

    一.前言 根据前面一章的内容,继续第三章的学习. 二.正文       一起绘制三个点,这里要使用到缓存了 var n = initVertexBuffers(gl); //返回绘制点的个数 n ) ...

  6. 【WebGL】《WebGL编程指南》读书笔记——第2章

    一.前言 最近看了<WebGL编程指南>这本书,发现还是很有意思的,故每章阅读后做个笔记. 二.正文 Example1:在canvas中绘制矩形 <!DOCTYPE html> ...

  7. 【WebGL】1.WebGL简介

    OpenGL和WebGL基本概念 OPEN GL:一个跨编程语言.跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维的亦可),是一个功能强大,调用方便的底层图形库. WebGL:›一个3D ...

  8. 【WebGL】《WebGL编程指南》读书笔记——第4章

    一.前言        今天继续第四章的学习内容,开始学习复合变换的知识. 二.正文        Example1: 复合变换 在书中,作者为我们封装了一套用于变换的矩阵对象:Matrix4对象.它 ...

  9. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

随机推荐

  1. mvc JavaScriptResult的用法

    一.JavaScriptResult在MVC中的定义的代码片段   C# 代码   复制 public class JavaScriptResult : ActionResult { public o ...

  2. 【转】Yahoo!团队：网站性能优化的35条黄金守则

    Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最佳实践的核心 ...

  3. VS中使用QT调用R脚本

    一开始想直接把R编译成库然后调用R,后来查了n多资料,发现VS中是无法办到的,官方也给出了一句话,大概意思就是没可能在VS中使用R提供的C++接口,大概是涉及到了底层的ABI的原因,具体也不太清楚. ...

  4. bzoj 2502 清理雪道（有源汇的上下界最小流）

    [题意] 有一个DAG,要求每条边必须经过一次,求最少经过次数. [思路] 有上下界的最小流.  边的下界为1,上界为无穷.构造可行流模型,先不加ts边跑一遍最大流,然后加上t->s的inf边跑 ...

  5. Python面向对象1

    一.类和对向 面向过程和面向对象的编程 面向过程的编程:函数式编程,C程序等 面向对象的编程:C++,JAVA,Python等 类和对象:是面向对象中的2个重要概念 类:是事物的抽象,比如汽车: 对象 ...

  6. 多元线性回归(Linear Regression with multiple variables)与最小二乘(least squat)

    1.线性回归介绍 X指训练数据的feature,beta指待估计得参数. 详细见http://zh.wikipedia.org/wiki/%E4%B8%80%E8%88%AC%E7%BA%BF%E6% ...

  7. <Stackoverflow> 声望和节制

    什么是声望(reputation)?我是怎样获得(或失去)它的? 声望是一种粗略的测量,用来表示社区对你的信任度.通过让别人相信你知道自己正在讨论什么来获得.对网站的基本使用,包括问一个问题,回答,建 ...

  8. “大数据讲师”、“Hadoop讲师”、“Spark讲师”、“云计算讲师”、“Android讲师”

    王家林简介 Spark亚太研究院院长和首席专家,中国目前唯一的移动互联网和云计算大数据集大成者. 在Spark.Hadoop.Android等方面有丰富的源码.实务和性能优化经验.彻底研究了Spark ...

  9. Intellij IDEA Maven创建web项目

    Intellij IDEA在创建java webapp的时候没有那么人性化,新手使用会处处碰壁.特此记录! 一.File--New--project 二.Next--输入GroupId.Artifac ...

  10. MAC机常用快捷键整理表格

    MAC机常用快捷键整理表格 范围 快捷键 说明 图形   (Command 键)在某些 Apple 键盘上,此键也可能为标志()     Control (Control 键)     Alt Opt ...