[新手上路]批处理新手入门导读[视频教程]批处理基础视频教程[视频教程]VBS基础视频教程[批处理精品]批处理版照片整理器
[批处理精品]纯批处理备份&还原驱动[批处理精品]CMD命令50条不能说的秘密[在线下载]第三方命令行工具[在线帮助]VBScript / JScript 在线参考
返回列表 发帖
523066680

Rank: 7Rank: 7Rank: 7

帖子
3151 
积分
6455 
技术
317  
捐助
70  
注册时间
2008-8-3 
1楼 跳转到 » 倒序看帖
打印
tT
发表于 2017-7-7 15:41 | 只看该作者

[原创教程] Html5 Canvas + WebGL 简单示例

HTML5 Canvas 示例


          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="utf-8" />
              <title>Canvas</title>
            </head>

            <body onload="main()">
              <canvas id="example1" width="400" height="400">
                Please use a browser that supports "canvas"
              </canvas>
              <script>
                function main()
                {
                  var canvas = document.getElementById('example1');
                  if (! canvas )
                  {
                    console.log('Failed to retrieve the <canvas> element');
                    return;
                  }
                  
                  var ctx = canvas.getContext('2d');      // 注意是小写'd'
                  
                  ctx.fillStyle = 'rgba(0, 0, 255, 1.0)'; //设置填充颜色
                  ctx.fillRect(120, 10, 150, 150);        //矩形填充，设置范围
                }
              </script>
            </body>
          </html>

      在线展示：
      http://runjs.cn/code/8r9cqjly

      通过 var canvas = document.getElementById('example1') 获取指定id的 canvas 元素，
      ID名称 example1 和前面的 <canvas id="example1" width="400" height="400"> 相对应 ，
      其中 width 和 height 指定了画布尺寸。

      然后获取 2d 绘制环境 var ctx = canvas.getContext('2d');

      接下来对这个代码进行修改，仍旧需要 html5 画布作为基础，但是渲染环境改为 WebGL

          <html lang="en">
            <head>
              <meta charset="utf-8" />
              <title>Canvas</title>
            </head>

            <body onload="main()">
              <canvas id="example1" width="400" height="400">
                Please use a browser that supports "canvas"
              </canvas>
              <!-- 加载 WebGL 工具库 -->
              <script src="./lib/webgl-utils.js"></script>
              <script src="./lib/webgl-debug.js"></script>
              <script src="./lib/cuon-utils.js"></script>

              <script>
                function main()
                {
                  var canvas = document.getElementById('example1');

                  // 获取 WebGL 渲染环境
                  var gl = getWebGLContext(canvas);

                  // 设置清屏颜色
                  gl.clearColor(0.0, 0.0, 0.0, 1.0);

                  // 刷新颜色缓冲区
                  gl.clear(gl.COLOR_BUFFER_BIT);
                }
              </script>
            </body>
          </html>

      在线示例：
      http://runjs.cn/code/xvrr2zpv


WebGL工具库：
[attach]10725[/attach]
收藏 分享
FuniCode 编程论坛

523066680

Rank: 7Rank: 7Rank: 7

帖子
3151 
积分
6455 
技术
317  
捐助
70  
注册时间
2008-8-3 
2楼
发表于 2017-7-8 17:18 | 只看该作者
HTML JS 分离，从 顶点着色器确定一个点的位置，并着色。
  1. <!DOCTYPE html>

  2. <html lang="en">

  3.   <head>

  4.     <meta charset="utf-8" />

  5.     <title>WebGL</title>

  6.   </head>

  7.  

  8.   <body onload="main()">

  9.     <canvas id="example1" width="400" height="400"> 

  10.       Please use a browser that supports "canvas"

  11.     </canvas>

  12.     <script src="./lib/webgl-utils.js"></script>

  13.     <script src="./lib/webgl-debug.js"></script>

  14.     <script src="./lib/cuon-utils.js"></script>

  15.     <script src="./example1.js"></script>

  16.   </body>

  17. </html>
复制代码
  1. function main()

  2. {

  3.     // Vertex shader program 顶点着色器

  4.     var VSHADER_SOURCE = 

  5.         'void main() {\n' +

  6.         '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // 设置图元的顶点坐标

  7.         '  gl_PointSize = 10.0;\n' +                    // 设置点的大小

  8.         '}\n';

  9. 

  10.     // Fragment shader program  片元着色器

  11.     var FSHADER_SOURCE =

  12.         'void main() {\n' +

  13.         '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // 颜色

  14.         '}\n';

  15. 

  16.     var canvas = document.getElementById('example1');

  17. 

  18.     // 获取 WebGL 环境

  19.     var gl = getWebGLContext(canvas);

  20. 

  21.     // 初始化着色器

  22.     if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) 

  23.     {

  24.         console.log('Failed to intialize shaders.');

  25.         return;

  26.     }

  27.     

  28.     //设置并清除颜色缓冲区

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

  30.     gl.clear(gl.COLOR_BUFFER_BIT);

  31. 

  32.     gl.drawArrays(gl.Points, 0, 1);

  33. }
复制代码
1

评分人数

FuniCode 编程论坛

TOP

happy886rr

帖子
961 
积分
2350 
技术
334  
捐助
0  
注册时间
2016-3-7 
3楼
发表于 2017-7-8 17:44 | 只看该作者
回复 2# 523066680
我也觉得前端很好玩，打算放弃C语言，转学前端。

TOP

523066680

Rank: 7Rank: 7Rank: 7

帖子
3151 
积分
6455 
技术
317  
捐助
70  
注册时间
2008-8-3 
4楼
发表于 2017-7-8 17:49 | 只看该作者
本帖最后由 523066680 于 2017-7-8 17:55 编辑

回复 3# happy886rr

    C/C++属于终身技能，说"放弃"，言重了。只是临时换口味。而且 js 还是类C语言，花括号分号一样一样的。
FuniCode 编程论坛

TOP

523066680

Rank: 7Rank: 7Rank: 7

帖子
3151 
积分
6455 
技术
317  
捐助
70  
注册时间
2008-8-3 
5楼
发表于 2017-7-8 19:15 | 只看该作者
本帖最后由 523066680 于 2017-7-8 19:29 编辑

昨天把自己那个1024特效用shader完成了，用WebGL是为了方便学习和实践，本质上我还是在用纯C作为主程序，希望能一直用下去。

实时动态渲染
  1. #include <GL/glew.h>

  2. #include <GL/freeglut.h>

  3. #include <stdio.h>

  4. #include <unistd.h>

  5. #include <math.h>

  6. #include <time.h>

  7. 

  8. #define SIZE_X 500

  9. #define SIZE_Y 500

  10. 

  11. int winID;

  12. int program;

  13. 

  14. GLuint vTest;

  15. GLfloat test = 200.0;

  16. 

  17. GLuint vAng;

  18. GLfloat ang = 0.0;

  19. 

  20. const GLchar* readShader( const char *filename );

  21. 

  22. void display(void)

  23. {

  24.     static const GLfloat black[] = { 0.0f, 0.0f, 0.0f, 1.0f };

  25.     glClearBufferfv(GL_COLOR, 0, black );

  26. 

  27.     glDrawArrays(GL_POINTS, 0, 1);

  28.     glutSwapBuffers();

  29. }

  30. 

  31. void idle(void)

  32. {

  33.     usleep(10000);

  34.     ang += 0.05;

  35.     glVertexAttrib1f( vAng, ang );

  36. 

  37.     glutPostRedisplay();

  38. }

  39. 

  40. void reshape(int Width,int Height)

  41. {

  42.     glViewport(0, 0, Width, Height);     //视口范围

  43. }

  44. 

  45. void keypress(unsigned char key, int mousex, int mousey)

  46. {

  47.     switch (key)

  48.     {

  49.         case 'q':

  50.             glutDestroyWindow(winID);

  51.             exit(0);

  52.             break;

  53.         case 'Q':

  54.             glutDestroyWindow(winID);

  55.             exit(0);

  56.             break;

  57.         case ']': 

  58.             test += test*0.1;

  59.             glVertexAttrib1f( vTest, test );

  60.             glutPostRedisplay();

  61.             break;

  62.         case '[': 

  63.             test -= test*0.1;

  64.             glVertexAttrib1f( vTest, test );

  65.             glutPostRedisplay();

  66.             break;

  67.     }

  68. }

  69. 

  70. void init(void)

  71. {

  72.     glClearColor(0.0, 0.0, 0.0, 0.0);

  73.     //允许修改点元素大小

  74.     glEnable(GL_PROGRAM_POINT_SIZE);

  75. 

  76.     srand(time(NULL));

  77. }

  78. 

  79. int loadShader(void)

  80. {

  81. 

  82.     // Very Important !

  83.     glewInit();

  84.     const GLchar * vs_src;

  85.     const GLchar * fs_src;

  86. 

  87.     vs_src = readShader( "pointTest.vert" );

  88.     fs_src = readShader( "pointTest.frag" );

  89. 

  90.     GLuint vs = glCreateShader(GL_VERTEX_SHADER);

  91.     glShaderSource(vs, 1, &vs_src, NULL);

  92.     glCompileShader(vs);

  93. 

  94.     GLuint fs = glCreateShader(GL_FRAGMENT_SHADER);

  95.     glShaderSource(fs, 1, &fs_src, NULL);

  96.     glCompileShader(fs);

  97. 

  98.     program = glCreateProgram();

  99. 

  100.     glAttachShader(program, vs);

  101.     glAttachShader(program, fs);

  102. 

  103.     glLinkProgram(program);

  104. 

  105.     glUseProgram(program);

  106. 

  107.     vTest = glGetAttribLocation( program, "vTest" );

  108.     glVertexAttrib1f( vTest, test );

  109.     printf("%d\n", vTest);

  110. 

  111.     vAng = glGetAttribLocation( program, "vAng" );

  112.     glVertexAttrib1f( vAng, ang );

  113. 

  114. }

  115. 

  116. int main(int argc, char *argv[])

  117. {

  118. 

  119.     glutInit(&argc, argv);

  120.             //显示模式   双缓冲         RGBA  

  121.     glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA);

  122.     glutInitWindowSize(SIZE_X, SIZE_Y);       //窗口大小

  123.     glutInitWindowPosition(10, 10);         //位置

  124.     winID = glutCreateWindow("Simple");  //窗口句柄

  125. 

  126.     init();

  127.     loadShader();

  128. 

  129.     glutDisplayFunc(display);          //显示

  130.     glutKeyboardFunc(keypress);        //按键事件响应

  131.     glutReshapeFunc(reshape);          //窗口事件响应

  132.     glutIdleFunc(idle);                //闲时回调函数

  133.     glutMainLoop();                    //开始主循环

  134.     return 0;

  135. }

  136. 

  137. 

  138. const GLchar* readShader( const char *filename ) 

  139. {

  140.     FILE *FILE = fopen(filename, "rb");

  141. 

  142.     GLchar *source;

  143.     int size;

  144. 

  145.     fseek( FILE, 0, SEEK_END  );

  146.     size = ftell(FILE) + 1;

  147.     fseek( FILE, 0, SEEK_SET  );  //turn back

  148. 

  149.     source = (GLchar *) malloc( sizeof(GLchar) * size );

  150.     fread( source, 1, size, FILE);

  151. 

  152.     return (const GLchar*)(source);  //强制转换

  153. }
复制代码
Vertex Shader
  1. #version 420 core

  2. 

  3. attribute float vTest;

  4. attribute float vAng;

  5. 

  6. out vec4 coord;

  7. out float fTest;

  8. out float fAng;

  9. 

  10. void main(void)

  11. {

  12.     gl_Position = vec4(0.0, 0.0, 0.0, 0.0);

  13.     gl_PointSize = 480.0;

  14.     coord = gl_Position;

  15.     fTest = vTest;

  16.     fAng = vAng;

  17. }

  18. 

  19. /*

  20.     备注：attribute 只能在 顶点着色器中使用

  21. 

  22.     实际测试 如果 main 中没有用到 传入的变量

  23.     主程序中就无法通过 GetAttribLocation 获取该变量索引。

  24. */
复制代码
Fragment Sahder
  1. #version 420 core

  2. 

  3. in float fTest;

  4. in float fAng; 

  5. 

  6. float RGB(float x, float y, float e)

  7. {

  8.     return ( x * tan(x/y) ) * ( y * tan( x/y + fAng*e ) ) / fTest;

  9. }

  10. 

  11. void main(void)

  12. {

  13.     vec4 coord = (gl_FragCoord - 250.0)*2.0; //平移，并扩大两倍计算范围

  14. 

  15.     gl_FragColor = 

  16.         vec4( 

  17.             int(RGB(coord.x, coord.y, 0.33))%255/255.0,

  18.             int(RGB(coord.x, coord.y, 0.66))%255/255.0,

  19.             int(RGB(coord.x, coord.y, 0.99))%255/255.0,

  20.             0.0

  21.         );

  22. }
复制代码
编译脚本（实在记不住 makefile 语法，用批处理）
  1. @echo off

  2. set path=D:\tdm-gcc-64\bin

  3. 

  4. :Compile

  5. gcc -std=c11 "%1" -o "%~n1.exe" ^

  6.                    -ID:\Lib\freeglut-MinGW-3.0.0-1.mp\include  ^

  7.                    -LD:\Lib\freeglut-MinGW-3.0.0-1.mp\lib\x64 ^

  8.                    -ID:\Lib\glew-1.13.0\include ^

  9.                    -LD:\Lib\glew-1.13.0\lib ^

  10.                    -lfreeglut -lglew32 -lopengl32 -lglu32 

  11. 

  12. :Run

  13. if %errorlevel% == 0 (

  14. 	%~n1.exe

  15. ) else (

  16. 	echo Compile Error

  17. 	pause

  18. )
复制代码
FuniCode 编程论坛

TOP

523066680

Rank: 7Rank: 7Rank: 7

帖子
3151 
积分
6455 
技术
317  
捐助
70  
注册时间
2008-8-3 
6楼
发表于 2017-7-8 19:36 | 只看该作者
本帖不再更新，对于有兴趣的朋友，推荐：《WebGL Programming Guide》
FuniCode 编程论坛

TOP

返回列表