2021-06-15

Socket in Erlang and C#

Server Code (Client)


[Serializable]
public class BaseData
{
    public int command;
}

[Serializable]
public class JoinRoom: BaseData
{
    public string id; // user id
    public string room_id;
}

public void Connect()
{
    JoinRoom jr = new JoinRoom()
    {
        command = 1001,
        room_id = "ess33424",
        id = "s15512",
    };
    /** HEAD 可以用来定义服务器的通讯协议版本号或直接用作协议指令。或者同时定义两者 */
    byte[] HEAD = { 131, 107, 0, 5 };
    byte[] BODY = Encoding.UTF8.GetBytes(JsonUtility.ToJson(jr));
    byte[] MESSAGE = new byte[HEAD.Length + BODY.Length];
    SendBytes(MESSAGE);
}


public void SendBytes(byte[] msg)
{
    NetworkStream stream = Client.GetStream();
    stream.Write(msg, 0, msg.Length);
}

Server Code(Erlang)

Sample Code：Erlang Socket Server


handle_info({inet_async, Sock, Ref, {ok, DataBin}}, State) ->
    io:format("recv: ~p ~n", [DataBin]),
    <<H1:8, H2:8, H:8, H4:8, Rest/binary>> = DataBin,
    io:format("msg: ~p ~n", [Rest]),
    gen_tcp:send(Sock, Rest),
    {noreply, State};

2021-05-11

Game Dev

Blender Python API Render And Output

利用Python实现在Blender中自动导出所有相机角度下的Action。

import bpy
from os.path import join

CAMERA_FRONT = "Front"
CAMERA_BACK = "Back"
CAMERA_LEFT = "Slide.L"
CAMERA_RIGHT = "Slide.R"

CHARACTER_NAME = "character_test"

ROOT_OUTPUT_FOLDER = "C:/tmp/"

TOTAL_FRAMES = 11 #(0~10)

BATTLE_ANIMATION_ACTIONS = ["atk", "be_hit", "die", "idle", "skill"]
MOVE_ANIMATION_ACTION = "run"

CURRENT_SCENE = bpy.context.scene

def render_animate(middle_path):
    current_folder = ROOT_OUTPUT_FOLDER + middle_path
    for f in range(TOTAL_FRAMES):
        CURRENT_SCENE.frame_set(f)
        if f < 10:
            file_name = "000{}".format(f)
        else:
            file_name = "00{}{}".format(1, f%10)
        # file_name += scene.render.file_extension
        file_name += ".png"
        bpy.context.scene.render.filepath = join(current_folder, file_name)
        bpy.ops.render.render(write_still = True)


def generate_battle():
    ''' left '''
    target_camera = bpy.data.objects[CAMERA_RIGHT]
    bpy.context.scene.camera = target_camera
    for action in BATTLE_ANIMATION_ACTIONS:
        temp_battle = CHARACTER_NAME + "/battle/left/l_" + action + "/"
        bpy.context.object.animation_data.action = bpy.data.actions.get(action)
        render_animate(temp_battle)
    ''' right '''
    target_camera = bpy.data.objects[CAMERA_LEFT]
    bpy.context.scene.camera = target_camera
    for action in BATTLE_ANIMATION_ACTIONS:
        temp_battle = CHARACTER_NAME + "/battle/right/" + action + "/"
        bpy.context.object.animation_data.action = bpy.data.actions.get(action)
        render_animate(temp_battle)


def generate_move():
    bpy.context.object.animation_data.action = bpy.data.actions.get(MOVE_ANIMATION_ACTION)
    
    target_camera = bpy.data.objects[CAMERA_FRONT]
    bpy.context.scene.camera = target_camera
    temp_battle = CHARACTER_NAME + "/move/down/"
    render_animate(temp_battle)

    target_camera = bpy.data.objects[CAMERA_BACK]
    bpy.context.scene.camera = target_camera
    temp_battle = CHARACTER_NAME + "/move/up/"
    render_animate(temp_battle)

    target_camera = bpy.data.objects[CAMERA_RIGHT]
    bpy.context.scene.camera = target_camera
    temp_battle = CHARACTER_NAME + "/move/left/"
    render_animate(temp_battle)

    target_camera = bpy.data.objects[CAMERA_LEFT]
    bpy.context.scene.camera = target_camera
    temp_battle = CHARACTER_NAME + "/move/right/"
    render_animate(temp_battle)

generate_battle()
generate_move()

2020-11-09

Erlang

cowboy websocket (boardcast)

websocket连接管理,这里存储在ets里面:

-module (conn_ets).
-export ([init/0, insert/2, lookup/1, remove_by_id/1, remove_by_pid/1, get_online_num/0]).

-define(TABLE_ID, ?MODULE).

init() ->
    ets:new(?TABLE_ID, [bag, public, named_table]),
    ok.

%% login success insert id and pid.
insert( GId, Pid ) when is_pid(Pid) ->
    ets:insert(?TABLE_ID, { GId, Pid }).

lookup(GId) ->
    ets:lookup(?TABLE_ID, GId).

%% get pid by id
% lookup(GId) ->
%     case ets:lookup(?TABLE_ID, GId) of
%         [{GId, Pid}] -> {ok, {GId, Pid}};
%         []            -> {error, not_found}
%     end.

%% logout remove online user
remove_by_id(GId) ->
    ets:match_delete(?TABLE_ID, {GId, '_'}).

remove_by_pid(Pid) ->
    ets:match_delete(?TABLE_ID, {'_', Pid}).

get_online_num() ->
    length(ets:tab2list(?TABLE_ID)).

websocket 回调模块:

-module(ws_h).

-export([init/2]).
-export([websocket_init/1]).
-export([websocket_handle/2]).
-export([websocket_info/2]).
-export([terminate/3]).

% -record(state, {pid, id}).

init(Req, Opts) ->
    #{pid := Pid} = Req,
    conn_ets:insert("chat_room", Pid),
    {cowboy_websocket, Req, Opts}.

websocket_init(State) ->
    % erlang:start_timer(1000, self(), <<"Hello!">>),
    {[{text, <<"Immediately Hello!">>}], State}.
    % self()! {[{text, <<"Hello Response">>}], State},
    % {[], State}.

websocket_handle({text, Msg}, State) ->
    lists:foreach(
        fun({_, CurrPid}) -> 
            % io:format("Boardcast: ~w ~n", [CurrPid])
            CurrPid ! { chat, <<"Boardcast message: ", Msg/binary>> }
        end,
        conn_ets:lookup("chat_room")
        ),
    % io:format("Terminate reason: ~w ~n", [conn_ets:lookup("chat_room")]),
    % self() ! { chat, <<"Boardcast message: ", Msg/binary>> },
    {[], State};

websocket_handle(_Data, State) ->
    {[], State}.

websocket_info({chat, Msg}, State)->
    io:format("chat ~w~n", [Msg]),
    {[{text,Msg}], State};

websocket_info({timeout, _Ref, Msg}, State) ->
    erlang:start_timer(1000, self(), <<"How' you doin'?">>),
    {[{text, Msg}], State};

websocket_info(_Info, State) ->
    {[], State}.
 
terminate(Reason, _PartialReq, _State) ->
    io:format("Terminate reason: ~w ~w ~n", [Reason, self()]),
    conn_ets:remove_by_pid(self()),
    % case Reason of
    %     {remote, 1001, _} ->    
    %         io:format("refresh.~n");
    %     {timeout} ->
    %         io:format("timeout.~n");
    %     {error, closed} ->
    %         io:format("closed page.~n")
    % end,
    ok.

最后别忘了在启动时初始化:

-module(chess_app_app).
-behaviour(application).

-export([start/2]).
-export([stop/1]).

start(_Type, _Args) ->
    conn_ets:init(),
    Dispatch = cowboy_router:compile([
        {'_', [
                {"/", home_handler, []},
%%                 {"/[...]", cowboy_static, {dir, "priv/"}},
                {"/index", cowboy_static, {file, "priv/index.html"}},
                {"/ws", cowboy_static, {file, "priv/ws.html"}},
                {"/websocket", ws_h, []}
                ]}
    ]),
    {ok, _} = cowboy:start_clear(my_http_listener,
        [{port, 8080}],
        #{env => #{dispatch => Dispatch}}
    ),
    chess_app_sup:start_link().

stop(_State) ->
    ok.

2020-10-19

Pkg update on FreeBSD 11.1

解决办法：

1 2	pkg bootstrap -f pkg update -f

系统更新：
*原文地址：help-the-world-by-healing-your-nginx-configuration*
换国内源

1
2
3

vi /etc/freebsd-update.conf # change .org to .cn
freebsd-update -r 12.1-RELEASE upgrade
freebsd-update install

2020-09-22

SQL

intro_postgres

创建数据库：

1	createdb -h localhost -U postgres -p 5432 mydb

用户登陆：

1	psql -h localhost -U postgres -p 5432 mydb

以超级用户登陆：

1	sudo su - postgres 1234567890

删除或者创建用户皆以数据库为依托：

1 2	psql sqlname drop user role

创建角色和将数据库分配给角色：

1 2	CREATE ROLE name PASSWORD 'string' CREATE DATABASE exampledb OWNER dbuser

删除表：

1	DROP TABLE tablename

删除表数据,但保留表结构：

1	delete from users

超级管理员 postgres 登录，创建数据库并移交给某个用户：

1 2	psql -h localhost -U postgres CREATE DATABASE tempDB OWNER sunshuai

超级管理员直接创建数据库（所有者为超级管理员）：

1	createdb -h localhost -U postgres -p 5432 tempDB

备份和恢复：

1 2	pg_dump -h localhost -U sunshuai tempdb > dumpfile psql dbname < dumpfile

赋予角色登陆权限

1 2	psql -h localhost -U postgres ALTER ROLE "asunotest" WITH LOGIN

2020-08-18

Game Dev

How to save and load game in Godot Engine

原文地址：How to save and load game in Godot Engine

创建两个 AutoLoad gdscript 脚本文件

Save the file into res://autoload/user_data_manager.gd
Use the same process to create another script res://autoload/game_manager.gd

Browse our two scripts and set their names as shown below.

set scripts as autoload

To save and load game in Godot engine, we need to create some scripts. We will create this once and can be used in all of our game. So let us jump into scripting.

User Data Manager and Game Manager scripting

The user_data_manager.gd script looks like:

extends Node2D
signal loaded
signal version_mismatch
const LOADED = "loaded"
const VERSION_MISMATCH = "version_mismatch"
var _path = "path/to/save/data.dat" #Change this to user://data.dat after testing
var _user_data = {}
func load_data(default_data, version):
    _user_data["version"] = version
    _user_data["data"] = default_data
    var f = File.new()
    if(not f.file_exists(_path)):
        save_data()
    f.open(_path, File.READ)
    var loaded_data = {}
    loaded_data.parse_json(f.get_as_text())
    _parse_loaded_data(loaded_data)
    f.close()
func _parse_loaded_data(loaded_data):
    var loaded_version = loaded_data.version
    for key in loaded_data.data.keys():
        _user_data["data"][key] = loaded_data["data"][key]
    if(loaded_version != _user_data.version):
        emit_signal(VERSION_MISMATCH,loaded_version,loaded_data.data)
    else:
        emit_signal(LOADED)
func save_corrected_data(corrected_user_data):
    _user_data["data"] = corrected_user_data
    save_data()
func update_version(version):
    _user_data["version"] = version
    save_data()
func save_data():
    var f = File.new()
    f.open(_path,File.WRITE)
    f.store_string(_user_data.to_json())
    f.close()
func set_data(key,value):
    _user_data["data"][key] = value
func get_data(key):
    return _user_data["data"][key]

To understand the above script we have to look into the game_manager.gd script:

extends Node2D
var _default_user_data = {
    score = 0
}
func _ready():
    UserDataManager.connect(UserDataManager.LOADED,self,"init")
    UserDataManager.connect(UserDataManager.VERSION_MISMATCH,self,"_user_data_version_mismatch")
    UserDataManager.load_data(_default_user_data,"0.0.1");
func _user_data_version_mismatch(loaded_version,loaded_data):
#    Check loaded_version, parse loaded_data and update the savedata
#    UserDataManager.save_corrected_data(corrected_data)
#    Then update the new version
#    UserDataManager.update_version("0.0.2")
    init()
func init():
    print("INIT")
    pass

Singleton in Godot is auto instantiated and available to every script by the name we set in the project settings. We have two Singleton objects now – UserDataManager and GameManager. Both can be accessed from any other script we are going to write for our game.

We have a default user data variable. This is a dictionary object. If there is no save data present when the game starts, this default data is used. In fact, it goes deeper, even if the loaded data has no records for a specified key then the value from this default data is used. This is possible when we update our game and has additional values to be saved.

When our game boots up, UserDataManager’s load_data method is called with the default data and a version string. This version string can be in any format but it should represent our game version somehow. The UserDataManager will load the save data from the disk. If there is no save data present, it creates a new one with the specified version. If our current game version is different than the one in the saved file, the version mismatch function is called. This is the place to write logic to convert the old user data format to the new one.

That’s it. We can initialize everything in the init() and UserDataManager will manage the saving and loading of our game.

This is how you save and load game in Godot Engine.

When we want to save any data we can call,

1
2
3

UserDataManager.set_data("health",75)
UserDataManager.set_data("coins",100)
UserDataManager.save_data()

And to get something,

1	var player_health = UserDataManager.get_data("health")

Calling the above methods will work from any script and returns the value from our saved data. The above script will only work on 2.1.x versions of Godot engine. Godot 3.0 is just around the corner and scripting API is different for the Dictionary class. We will check it out when it is released.

If you really need an explanation for the user_data_manager.gd, let me know in the comments below. Thanks for reading.

2020-08-17

Web

通过修复NGINX配置帮助世界

原文地址：help-the-world-by-healing-your-nginx-configuration
海军上将威廉·麦克雷文2014年著名的演讲，在得克萨斯大学，他说，如果你想改变世界，通过使你的床开始。有时候，小事情可能会产生很大的影响-无论是早上铺床还是对网站的HTTP服务器配置进行少量更改。
这看起来像是夸大其词？2020年的头几个月，我们对世界上正常和合理事物的所有定义都花光了。由于COVID‑19大流行，地球上将近一半的人口被困在自己的家中，因此互联网已成为他们交流，娱乐，购买食物，工作和教育的唯一方式。互联网每周都比以往任何时候都拥有更高的网络流量和服务器负载。根据BroadbandNow在3月25日发布的报告，“在我们分析的200个城市中，有88个（44％）在过去一周内经历了一定程度的网络降级，而之前的10个星期是这样”。
诸如Netflix和YouTube之类的主要媒体平台都在限制其传输质量，以保护网络链接，使人们有更多带宽可用于工作，与家人交流或在学校上虚拟课。但这还不够，因为网络质量逐渐恶化，许多服务器变得超负荷。

您可以通过优化网站来提供帮助

如果您拥有网站并可以管理其HTTP服务器配置，则可以提供帮助。进行一些小的更改可以减少用户生成的网络带宽以及服务器的负载。这是双赢的局面：如果您的站点当前负载沉重，则可以减少它，从而为更多的用户提供服务，并可能降低成本。如果负载不是很高，则更快的负载可以改善用户的体验（有时会积极影响您在Google搜索结果中的排名）。

如果您的应用程序每个月有数百万用户，或者是一个包含烘焙食谱的小博客，那都没有关系–您消除的每千字节网络流量都释放了容量，供那些迫切需要在线检查医学检查结果或创建包裹标签的人使用给亲戚寄一些重要的东西

在此博客中，我们介绍了您可以对NGINX配置进行的一些简单但功能强大的更改。举一个真实的例子，我们使用我的朋友Rogalove的电子商务网站，该公司是我居住的波兰一家生态化妆品制造商。该网站是运行NGINX 1.15.9作为其Web服务器的相当标准的WooCommerce安装。为了进行计算，我们假设该网站每天获得100个唯一身份用户，其中30％的用户为固定访问者，并且每个用户在会话期间平均访问4个页面。

这些技巧是您可以立即采取的简单步骤，以提高性能并减少网络带宽。如果您要处理大量流量，则可能需要实施更复杂的更改以产生重大影响，例如，调整操作系统和NGINX，提供正确的硬件容量，以及（最重要的是）启用和调整缓存。查看这些博客文章以获取详细信息：

为HTML，CSS和JavaScript文件启用Gzip压缩

如您所知，用于在现代网站上构建页面的HTML，CSS和JavaScript文件可能非常庞大。在大多数情况下，Web服务器可以即时压缩这些和其他文本文件，以节省网络带宽。

如您在左下方所见，没有压缩：文本文件的大小为1.15 MB，并且传输了很多数据。

默认情况下，NGINX中禁用压缩，但是根据您的安装或Linux发行版，某些设置可能会在默认的nginx.conf文件中启用。在这里，我们在NGINX配置文件中启用gzip压缩：

gzip on;
gzip_types application/xml application/json 
text/css text/javascript application/javascript;
gzip_vary on;
gzip_comp_level 6;
gzip_min_length 500;

如您在以下屏幕截图中所见，压缩后的数据传输量仅为260 KB ，减少了约80％！对于页面上的每个新用户，您可以节省大约917 KB的数据传输。对于我们的WooCommerce安装，每天62 MB，或每月1860 MB。

设置缓存头

当浏览器检索网页的文件时，它会将副本保留在本地磁盘缓存中，这样，当您再次访问该页面时，它不必从服务器重新获取文件。每个浏览器都使用自己的逻辑来决定何时使用文件的本地副本以及何时在服务器上更改了文件时再次获取它。但是，作为网站所有者，您可以在发送的HTTP响应中设置缓存控制和过期标头，以提高浏览器的缓存行为的效率。从长远来看，您会收到很多不必要的HTTP请求。

首先，您可以为字体和图像设置较长的缓存过期时间，这些字体和图像可能不会经常更改（即使更改，它们通常也会获得新的文件名）。在以下示例中，我们指示客户端浏览器将字体和图像在本地缓存中保留一个月：

location ~* \.(?:jpg|jpeg|gif|png|ico|woff2)$ {
    expires 1M;
    add_header Cache-Control "public";
}

启用HTTP / 2协议支持

HTTP / 2是用于服务网页的下一代协议，旨在更好地利用网络和主机服务器。根据Google文档，它可以更快地加载页面：生成的协议对网络更友好，因为与HTTP / 1.x相比，使用的TCP连接更少。这意味着与其他流量的竞争减少，连接寿命更长，从而可以更好地利用可用网络容量。 NGINX 1.9.5和更高版本（以及NGINX Plus R7和更高版本）支持HTTP / 2协议，您所需要做的就是启用它。为此，请在您的NGINX配置文件中http2的listen指令中包含参数：

1	listen 443 ssl http2;

请注意，在大多数情况下，您还需要启用TLS才能使用HTTP / 2。您可以通过HTTP2.Pro服务验证您（或任何站点）是否支持HTTP/2:

优化记录

让自己喝一杯自己喜欢的饮料，舒适地坐着，然后思考：您上次查看访问日志文件是什么时候？上周，上个月，从来没有？即使将其用于站点的日常监视，您也可能只关注错误（400和500状态代码等），而不关注成功的请求。

通过减少或消除不必要的日志记录，可以节省服务器上的磁盘存储，CPU和I / O操作。这不仅使您的服务器更快一点-如果将您部署在云环境中，则释放的I / O吞吐量和CPU周期可能为同一虚拟机上的其他虚拟机或应用程序节省生命。

有几种不同的方法可以减少和优化日志记录。在这里，我们重点介绍三个。

方法1：禁用页面资源请求的记录

如果您不需要记录检索普通页面资源（例如图像，JavaScript文件和CSS文件）的请求，则这是一种快速简便的解决方案。您需要做的就是创建一个location与这些文件类型匹配的新块，并禁用其中的日志记录。（您也可以将此access_log指令添加到我们设置标头的上方的location块中。）Cache-Control

1
2
3

location ~* \.(?:jpg|jpeg|gif|png|ico|woff2|js|css)$ {
        access_log off;
    }

方法2：禁用成功请求的日志记录

这是一种更强大的方法，因为它会丢弃带有或响应代码的查询，仅记录错误。它比方法1稍微复杂一点，因为它取决于如何配置NGINX日志记录。在我们的示例中，我们使用Ubuntu Server发行版中包含的标准nginx.conf，因此，无论虚拟主机如何，所有请求都记录到/var/log/nginx/access.log中。2xx3xx

使用官方NGINX文档中的示例，让我们打开条件日志记录。创建一个变量$loggable，并将其设置为，0以使用和代码进行请求，否则设置为。然后在指令中将此变量作为条件引用。2xx3xx1access_log

这是/etc/nginx/nginx.conf中http上下文中的原始指令：

1	access_log /var/log/nginx/access.log;

添加一个map块并从access_log指令中引用它：

map $status $loggable {
    ~^[23] 0;
    default 1;
}
access_log /var/log/nginx/access.log combined if=$loggable;

请注意，尽管这combined是默认的日志格式，但是在包含if参数时，您需要明确指定它。

方法3：使用缓冲最小化I / O操作

即使您要记录所有请求，也可以通过打开访问日志缓冲来最大程度地减少I / O操作。使用此指令，NGINX会等待将日志数据写入磁盘，直到填满512 KB缓冲区或自上次刷新以来经过1分钟（以先发生者为准）。

1	access_log /var/log/nginx/access.log combined buffer=512k flush=1m;

限制特定URL的带宽

如果服务器提供较大的文件（或较小但非常受欢迎的文件，例如表单或报表），则设置客户端下载文件的最大速度可能很有用。如果您的站点已经承受了很高的网络负载，则限制下载速度会留下更多带宽，以使应用程序的关键部分保持响应速度。这是硬件制造商使用的非常流行的解决方案–您可能需要等待更长的时间才能为打印机下载3 GB的驱动程序，但是同时有成千上万的其他人下载您仍然可以下载。😉

使用limit_rate指令限制特定URL的带宽。在这里，我们将/ download 下每个文件的传输速率限制为每秒50 KB。

1
2
3

location /download/ {
    limit_rate 50k;
}

您可能还希望仅对较大的文件进行速率限制，这可以使用limit_rate_after指令进行。在此示例中，每个文件（来自任何目录）的前500 KB都不受速度限制地进行传输，之后的所有内容均以50 KB / s为上限。这样可以加快网站关键部分的交付速度，同时降低其他部分的速度。

location / {
    limit_rate_after 500k;
    limit_rate 50k;
}

请注意，速率限制适用于浏览器和NGINX之间的单个HTTP连接，因此请不要阻止用户使用下载管理器来解决速率限制。最后，您还可以限制到服务器的并发连接数或请求速率。有关详细信息，请参见我们的文档。

摘要

我们希望这五个技巧能帮助您优化网站的性能。速度和带宽增益因网站而异。即使调整您的NGINX配置似乎并没有显着释放带宽或提高速度，成千上万的网站单独调整其NGINX配置的整体影响还是会加在一起。我们的全球网络得到更有效的利用，这意味着最关键的服务将在需要时提供。如果您在站点上遇到有关NGINX的任何问题，我们将为您提供帮助！在COVID‑19大流行期间，NGINX员工和社区正在监视Stack Overflow 1上的NGINX通道，并尽快答复问题和要求。如果您在流行病最前沿的组织工作并有高级需求，则您可能有资格获得最多五个免费的NGINX Plus许可证以及更高级别的F5 DNS负载平衡器云服务。有关详细信息，请参见受COVID‑19影响的网站的免费资源。还可以查看该博客，了解使用NGINX和F5的免费资源来提高网站性能的其他简便方法的摘要。

2020-08-14

Web

用threejs开发3D微信小游戏贪食蛇

现在在github已经有现成的threejs的weapp-ddapter.js了。但我早前做得时候没有找到，只找到修改weapp-ddapter的方式。

修改 1：在变量document对象里增加以下函数：

1
2
3

createElementNS: function createElementNS(nameSpace, tagName){
    return this.createElement(tagName)
}

修改 2：在函数_createClass(XMLHTTPRequest, [{key:’abort’…}, …])()参数中增加addEventListener函数：

{
  key: 'addEventListener',
  value: function addEventListener(type, listener) {
    if (typeof listener === 'function') {
      let event = { target: this }
      let that = this
      this['on' + type] = function () {
        listener.call(that, event)
      }
    }
  }
}

自此微信小游戏就可以支持threejs了，下面开始做个简单的小游戏。
这个游戏需要用到两个js库，用以辅助Threejs。
1: Detector.js
Detector用来检测threejs的兼容性。
2: OrbitControls.js
OrbitControls用来作为threejs的轨道控制器。
额外的，如果想监测threejs的性能帧数，可以用stats.js。这里的Demo比较简单，就不用它了。
初始化先检测webgl的兼容性

if (g.Detector.webgl) {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera( 75, g.innerWidth/g.innerHeight, 0.1, 1000 );
    this.renderer = new THREE.WebGLRenderer();
    ...
} else {
    //如果不兼容，需要显示出warning提示
    var warning = Detector.getWebGLErrorMessage();
    ...
}

这里的小游戏场景，按钮，为了省事都以立方体cube代替。食物cube在场景随机产生，同时设置随机颜色。在操作上，设定为在场景cube的6个面各有一个按钮cube，通过点击这6个按钮控制小蛇在空间的移动方向。为了方便观察，我们设置食物cube，小蛇cube均有alpha = 0.4的透明度。
效果图如下：

需要改进：这里玩了几把，操作上需要不断的调整场景角度才能很好的操作小蛇，操作比较僵硬。暂时没有好的操作优化思路，暂时就到这吧，有空闲时间再研究。

2020-08-14

Web

Install Nodejs On FreeBSD 11.1

安装 NodeJS:

这里用懒惰的办法，直接安装二进制包：

1	pkg install node

（PS:网络好的话还是ports源码安装比较好）
安装过程是没有任何问题的，但是我想 node -v看下版本测试是否真的安装成功的时候。
然后就出事了：
Undefined symbol “nghttp2_submit_origin” nodejs FreeBSD
好在FreeBSD的优势就是文档详细，在官方文档找到如下：

其实真正导致这个问题的是缺少 libnghttp2但是我看到我的系统自带python 版本是python27-2.7.13，为了不出其他的幺蛾子，索性把依赖的库都升级到requires的版本了。
把依赖的包依次安装或更新，问题瞬间解决。完美