` 全志h5 友善arm nanopi neo2 运行 "wpe-webgl" 做界面绘图，集成nodejs环境，直接x11运行。 不想用qt, glfw之类做界面的朋友是个不错选择视频中运行fps有10-12帧左右
测试分辨率240*320
https://www.bilibili.com/video/BV1bk4y1y7fD/
代码
- /*
- GLSL port
- */
- var lasttime = 0;
- var requestAnimationFrame = function (callback) {
- var now = Date.now();
- var nextTime = Math.max(lastTime + 16, now);
- webgl.nextFrame();
- return setTimeout(function () {
- callback(lastTime = nextTime);
- },
- nextTime - now);
- };
- var webgl = require('wpe-webgl');
- var width = 320;
- var height = 240;
- global.window = {
- innerWidth: width,
- innerHeight: height
- };
- var options = {
- width: width,
- height: height
- };
- var gl = webgl.init(options);
- // webgl.nextFrame(true /* Use false to prevent buffer swapping */);
- var vs = `
- #ifdef GL_ES
- precision highp float;
- #endif
-
- attribute vec2 a_position;
- void main() {
- gl_Position = vec4(a_position, 0, 1);
- }
- `;
- var fs = `
- #ifdef GL_ES
- precision highp float;
- #endif
- uniform float u_time;
- uniform vec2 u_resolution;
- const mat2 m = mat2( 0.80, 0.60, -0.60, 0.80 );
- float noise( in vec2 p )
- {
- return sin(p.x)*sin(p.y);
- }
- float fbm4( vec2 p )
- {
- float f = 0.0;
- f += 0.5000*noise( p ); p = m*p*2.02;
- f += 0.2500*noise( p ); p = m*p*2.03;
- f += 0.1250*noise( p ); p = m*p*2.01;
- f += 0.0625*noise( p );
- return f/0.9375;
- }
- float fbm6( vec2 p )
- {
- float f = 0.0;
- f += 0.500000*(0.5+0.5*noise( p )); p = m*p*2.02;
- f += 0.250000*(0.5+0.5*noise( p )); p = m*p*2.03;
- f += 0.125000*(0.5+0.5*noise( p )); p = m*p*2.01;
- f += 0.062500*(0.5+0.5*noise( p )); p = m*p*2.04;
- f += 0.031250*(0.5+0.5*noise( p )); p = m*p*2.01;
- f += 0.015625*(0.5+0.5*noise( p ));
- return f/0.96875;
- }
- vec2 fbm4_2( vec2 p )
- {
- return vec2(fbm4(p), fbm4(p+vec2(7.8)));
- }
- vec2 fbm6_2( vec2 p )
- {
- return vec2(fbm6(p+vec2(16.8)), fbm6(p+vec2(11.5)));
- }
- //====================================================================
- float func( vec2 q, out vec4 ron )
- {
- q += 0.03*sin( vec2(0.27,0.23)*u_time * 5. + length(q)*vec2(4.1,4.3));
- vec2 o = fbm4_2( 0.9*q );
- o += 0.04*sin( vec2(0.12,0.14)*u_time * 5. + length(o));
- vec2 n = fbm6_2( 3.0*o );
- ron = vec4( o, n );
- float f = 0.5 + 0.5*fbm4( 1.8*q + 6.0*n );
- return mix( f, f*f*f*3.5, f*abs(n.x) );
- }
- void main(){
- vec2 uv = gl_FragCoord.xy / u_resolution.xy;
- vec2 p = (2.0*gl_FragCoord.xy-u_resolution.xy)/u_resolution.y;
- float e = 2.0/u_resolution.y;
- vec4 on = vec4(0.0);
- float f = func(p, on);
- vec3 col = vec3(0.0);
- col = mix( vec3(0.2,0.1,0.4), vec3(0.3,0.05,0.05), f );
- col = mix( col, vec3(0.9,0.9,0.9), dot(on.zw,on.zw) );
- col = mix( col, vec3(0.4,0.3,0.3), 0.2 + 0.5*on.y*on.y );
- col = mix( col, vec3(0.0,0.2,0.4), 0.5*smoothstep(1.2,1.3,abs(on.z)+abs(on.w)) );
- col = clamp( col*f*2.0, 0.0, 1.0 );
- #if 0
- // gpu derivatives - bad quality, but fast
- vec3 nor = normalize( vec3( dFdx(f)*u_resolution.x, 6.0, dFdy(f)*u_resolution.y ) );
- #else
- // manual derivatives - better quality, but slower
- vec4 kk;
- vec3 nor = normalize( vec3( func(p+vec2(e,0.0),kk)-f,
- 2.0*e,
- func(p+vec2(0.0,e),kk)-f ) );
- #endif
- vec3 lig = normalize( vec3( 0.9, 0.2, -0.4 ) );
- float dif = clamp( 0.3+0.7*dot( nor, lig ), 0.0, 1.0 );
- vec3 lin = vec3(0.70,0.90,0.95)*(nor.y*0.5+0.5) + vec3(0.15,0.10,0.05)*dif;
- col *= 1.2*lin;
- col = 1.0 - col;
- col = 1.1*col*col;
- gl_FragColor = vec4( col, 1.0 );
- }
- `;
- var uniforms = {
- u_time:{
- value: 0
- },
- u_resolution:{
- value:[width, height]
- }
- }, program;
- function setShader(program, type, script) {
- var shader = gl.createShader(type == 'vs' ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
- gl.shaderSource(shader, script);
- gl.compileShader(shader);
- gl.attachShader(program, shader);
- }
- function updateUniforms(uniforms, program){
- for( var key in uniforms ){
- var len = Array.isArray( uniforms[key].value ) ? uniforms[key].value.length : 1;
-
- switch(len){
- case 1 :
- {
- gl.uniform1f( gl.getUniformLocation(program, key), uniforms[key].value );
- }
- break ;
-
- case 2 :
- case 3 :
- case 4 :
- {
- var args = [];
- args.push( gl.getUniformLocation(program, key) );
-
- uniforms[key].value.forEach( function( v ){
- args.push( v );
- } );
-
- gl['uniform'+len+'f'].apply( gl, args );
- //gl['uniform'+len+'f'].apply( gl, [gl.getUniformLocation(program, key), 480, 320] );
- }
- break ;
- }
- }
- }
- function setup(gl, uniforms) {
- program = gl.createProgram();
-
- setShader(program, 'vs', vs);
- setShader(program, 'fs', fs);
- gl.linkProgram(program);
- gl.useProgram(program);
- var posLocation = gl.getAttribLocation(program, "a_position");
-
- var buffer = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(
- [-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0]
- ), gl.STATIC_DRAW);
- gl.enableVertexAttribArray(posLocation);
- gl.vertexAttribPointer(posLocation, 2, gl.FLOAT, false, 0, 0);
-
- updateUniforms( uniforms, program );
-
- gl.drawArrays(gl.TRIANGLES, 0, 6);
-
- // animation loop
- loop( false );
- }
- function update(){
- gl.clearColor( 0, 0, 0, 1. );
- gl.clear( gl.COLOR_BUFFER_BIT );
-
- uniforms.u_time.value += .1;
-
- updateUniforms( uniforms, program );
- gl.drawArrays(gl.TRIANGLES, 0, 6);
- }
- function loop( mode ){
-
- if( mode ){
- while( true ){
- update();
- webgl.nextFrame(true /* Use false to prevent buffer swapping */);
- }
- return ;
- }
-
- update();
- webgl.nextFrame(true /* Use false to prevent buffer swapping */);
- setTimeout( loop, 1 );
- }
- setup( gl, uniforms);
附上硬件设备
`
0
|
|
|
|
|
|
|
/6 
工商网监
湘ICP备2023018690号
3147
评论
淘帖
46489
