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. Pacman主题下给Hexo增加简历类型

    原文 http://blog.zanlabs.com/2015/01/02/add-resume-type-to-hexo-under-pacman-theme/ 背景 虽然暂时不找工作,但是想着简历 ...

  2. [Papers]NSE, $u_3$, Lebesgue space [NNP, QM, 2002; Zhou, JMPA, 2005]

    $$\bex u_3\in L^p(0,T;L^q(\bbR^3)),\quad \frac{2}{p}+\frac{3}{q}=\frac{1}{2},\quad 6< q\leq \inft ...

  3. Android 打勾显示输入的密码

    main.xml: <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:and ...

  4. Android 翻页效果 电子书

    转载请注明来自: 5进制空间-android区 相信做电子书的同学,都遇到过翻页动画的需求吧,如果你不满足与点击滑动翻页的话,这边文章应该能够帮助到你. 先上个效果图: 效果还是很不错的,不过与ibo ...

  5. 将webkit内核封装为duilib的浏览器控件

    转载请说明出处,谢谢~~ 原本的duilib是自带浏览器控件的,但是使用了IE内核,我在做仿酷狗音乐播放器时,在右侧乐库要用到浏览器控件,而我使用自带的IE控件却发现了不少缺点,这也是duilib一直 ...

  6. 【Unity入门】场景编辑与场景漫游快捷键

    版权声明:本文为博主原创文章,转载请注明出处. 打开Unity主窗口,选择顶部菜单栏的“GameObject”->“3D Object”->“Plane”在游戏场景里面添加一个面板对象.然 ...

  7. 2.1……Android中的单位简介

    引用自Google API Guides Dimension A dimension value defined in XML. A dimension is specified with a num ...

  8. matplotlib绘制三维图

    本文参考官方文档:http://matplotlib.org/mpl_toolkits/mplot3d/tutorial.html 起步 新建一个matplotlib.figure.Figure对象, ...

  9. Java设计模式系列之桥接模式

    桥接模式(Bridge)的定义 在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化,那么如何应对这种“多维度的变化”?这就要使用桥接模式 将抽象部分与它的实现部分分离,使它们都可以独立地 ...

  10. delphi回调函数

    文章来源: http://anony3721.blog.163.com/blog/static/5119742010866050589/ 一.主单元 unit UnMain; interface us ...