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. 【转载】ACM总结——dp专辑

    感谢博主——      http://blog.csdn.net/cc_again?viewmode=list       ----------  Accagain  2014年5月15日 动态规划一 ...

  2. Linux Kernel 4.8分支第4个候选版本发布

    导读 今天,大神Linus Torvalds宣布了Linux 4.8分支的第四个候选版本,该候选版本在提供常规驱动更新.架构改善和部分KVM调整之外最大的新功能就是修复了英特尔Skylake电源管理B ...

  3. 《C++ primer》--第10章

    习题10.21 解释map和set容器的差别,以及他们各自适用的情况. 解答: map容器和set容器的差别在于: map容器是键-值对的集合,而set容器只是键的集合: map类型适用于需要了解键与 ...

  4. xcode 怎么样在发布release版本的时候 不输出log

    我们平时在开发应用的时候,经常会用到 NSLog 来调试我们的程序,而随着项目越来越大,这些用于调试的日志输出就会变得很难管理. 发布正式版的时候一定要屏蔽掉所有后台输出,因为这些输出还是比较消耗系统 ...

  5. ADO.NET 中的数据并发

    当多个用户试图同时修改数据时,需要建立控制机制来防止一个用户的修改对同时操作的其他用户所作的修改产生不利的影响.处理这种情况的系统叫做“并发控制”.并发控制的类型通常,管理数据库中的并发有三种常见的方 ...

  6. Java Spring boot 系列目录

    Spring boot 介绍 Spring boot 介绍 Spring boot 介绍 Spring boot 介绍 Spring boot 介绍 Spring boot 介绍 Spring boo ...

  7. redo文件四

    v$session_wait 用来查询redo buffer的空间信息 select sid,event,seconds_in_wait,state from v$session_wait where ...

  8. Tkinter教程之Scrollbar篇

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1811319 '''Tkinter教程之Scrollbar篇'''#Scrollbar(滚动条) ...

  9. Hadoop学习笔记2---配置详解

    配置系统是复杂软件必不可少的一部分,而Hadoop配置信息处理是学习Hadoop源代码的一个很好的起点.现在就从Hadoop的配置文件谈起. 一.Hadoop配置格式 Hadoop配置文件格式如下所示 ...

  10. Codevs No.2144 砝码称重2

    2016-05-31 22:01:16 题目链接: 砝码称重2 (Codevs No.2144) 题目大意: 给定N个砝码,求称出M的重量所需砝码最小个数 解法: 贪心 使砝码数量最小,当然是每个砝码 ...